/* 더시드 메뉴 페이지 — 긴 소개 페이지 공통 (2026-11-06 운영자 「빈 페이지 3개 초안부터 만들어줘」)
   회사 소개(new/company.html) · AX 솔루션(new/company-ax.html) · 이벤트(new/events.html) 가 같이 씁니다. 동작은 new/page.js
   account.css → light.css 다음에 불러옵니다. 애플 제품 페이지처럼 큰 제목 · 넉넉한 여백 · 흰 구역과 옅은 회색 구역이 번갈아
   색 · 글꼴은 light.css 의 이름(토큰) 그대로. 가지 색 — 사업(회사 · AX) = 하늘, 플랫폼(이벤트) = 금: <body class="light gold"> 면 금

   초안 표시 — 운영자가 확정하면 지웁니다
     .draft-bar   맨 위 노란 띠 (「노란 칸 숨기고 보기」 단추 — 확정본처럼 보기)
     .ask         운영자가 정해 줘야 하는 곳 (노란 점선 칸, 앞에 「확인 필요」). .ask.example 은 앞에 「예시」
     .draft-only  초안에서만 보이는 것 (예시 카드 등) */

body.light { --accent: var(--blue); }
body.light.gold { --accent: var(--gold); }

main.page { display: block; place-items: normal; padding: 0; }
.wrap { width: 100%; max-width: 1072px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 860px; }

/* ── 초안 띠 · 확인 필요 칸 ── */
.draft-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 9px 16px;
  background: #fff8e1; border-bottom: 1px solid #f0dfa8; color: #5f4a0e; font-size: 13px; line-height: 1.5; text-align: center; }
.draft-bar button { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid #dfbf5f; background: #fff; color: #5f4a0e;
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .2s, transform .12s; }
.draft-bar button:hover { background: #fffdf5; }
.draft-bar button:active { transform: scale(.98); }
.draft-bar button:focus-visible { outline: 2px solid var(--branch-blue); outline-offset: 2px; }
html.clean .draft-bar { background: var(--canvas); border-color: var(--line); color: var(--sub); }
html.clean .draft-bar button { border-color: var(--line); color: var(--fg); }

.ask { display: block; max-width: 860px; margin-top: 18px; padding: 11px 14px; border-radius: 12px; background: #fff8e1; border: 1px dashed #dfbf5f;
  color: #5f4a0e; font-size: 13.5px; font-weight: 400; line-height: 1.65; letter-spacing: 0; text-align: left; }
.ask::before { content: '확인 필요'; display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px; background: #f3d36b; color: #3d2f05;
  font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.ask.example::before { content: '예시'; }
.ask b { font-weight: 700; }
.ask code { font-family: var(--mono); font-size: 12px; }
.hero .ask, .center .ask { max-width: 660px; margin-left: auto; margin-right: auto; }
html.clean .ask, html.clean .draft-only { display: none !important; }

/* ── 회사 쪽 작은 막대 (애플 제품 페이지의 아래 막대처럼) ── */
.subnav { position: sticky; top: 52px; z-index: 4; background: rgba(255,255,255,.82); border-bottom: 1px solid rgba(0,0,0,.08);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.subnav .wrap { max-width: 1152px; height: 50px; display: flex; align-items: center; gap: 20px; } /* 위 막대(.top)와 같은 폭 */
.subnav .t { margin-right: auto; font-size: 19px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.subnav .l { font-size: 13px; color: var(--sub); white-space: nowrap; transition: color .2s; }
.subnav .l:hover, .subnav .l[aria-current="page"] { color: var(--fg); }
.subnav .go { display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border-radius: 999px; background: var(--navy); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: filter .2s, transform .12s; }
.subnav .go:hover { filter: brightness(1.25); }
.subnav .go:active { transform: scale(.98); }
@media (max-width: 480px) { .subnav .wrap { height: 46px; gap: 14px; } .subnav .t { font-size: 16px; } }

/* ── 첫 화면 ── */
.hero { padding: clamp(64px, 12vw, 140px) 0 clamp(56px, 9vw, 104px); text-align: center; }
.hero .emb2 { display: block; width: 54px; margin: 0 auto 22px; animation: up .9s var(--ease) both; }
.hero h1 { margin-top: 14px; font-size: clamp(40px, 7.4vw, 80px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; animation: up .9s var(--ease) .05s both; }
.hero .lead { max-width: 680px; margin: 20px auto 0; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.6; color: var(--sub); animation: up .9s var(--ease) .12s both; }
.hero .more { margin-top: 26px; animation: up .9s var(--ease) .2s both; }
/* 엠블럼처럼 하늘 → 금 */
.grad { background: linear-gradient(100deg, var(--branch-blue) 8%, var(--branch-gold) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── 구역 ── */
.sec { padding: clamp(72px, 11vw, 128px) 0; }
.sec.gray { background: var(--canvas); }
.sec[id] { scroll-margin-top: 102px; } /* #steps 처럼 바로 갈 때 위 막대 · 회사 막대에 안 가리게 */
.k { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--accent); }
/* 라벨이 나타날 때 빛이 가로로 한 번 스침 (2026-11-08 운영자 「WHAT WE DO · WHY 이 부분, 가로로 짧게 빛이 한 번 가로지르면서 뜨게」) — .rise 가 .in 이 될 때, 첫 화면 라벨은 열자마자 */
html.js .k.rise.in, html.js .hero .k { background: linear-gradient(100deg, var(--accent) 38%, #fff 50%, var(--accent) 62%); background-size: 260% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: glint 1.1s cubic-bezier(.4, 0, .2, 1) .25s 1 both; }
html.js .hero .k { animation: up .9s var(--ease) both, glint 1.1s cubic-bezier(.4, 0, .2, 1) .9s 1 both; }
@keyframes glint { from { background-position: 120% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { html.js .k.rise.in, html.js .hero .k { animation: none; background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); } }
.sec h2 { margin-top: 12px; font-size: clamp(30px, 4.8vw, 48px); font-weight: 700; line-height: 1.15; letter-spacing: -.022em; }
.sec .sub { max-width: 660px; margin-top: 14px; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.65; color: var(--sub); }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }

/* 글자 링크 — 애플처럼 파란 글 + › */
.more { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-size: 17px; font-weight: 500; }
.more::after { content: '›'; font-size: 1.2em; line-height: 1; transform: translateY(-1px); transition: transform .2s var(--ease); }
.more.out::after { content: '↗'; font-size: .85em; transform: none; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.more:hover::after { transform: translate(2px, -1px); }
.more.out:hover::after { transform: translate(1px, -1px); }
.more:focus-visible { outline: 2px solid var(--branch-blue); outline-offset: 3px; border-radius: 4px; }

/* 버튼 — 글 길이만큼 */
.btn.fit { display: inline-flex; width: auto; padding: 0 30px; }

/* ── 카드 ── */
.grid { margin-top: 44px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.three { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid.two { grid-template-columns: 1fr; } }
.box { position: relative; display: block; padding: 28px 26px; border-radius: 24px; background: #fff; border: 1px solid rgba(0,0,0,.06); }
.sec:not(.gray) .box { background: var(--canvas); border-color: transparent; }
.box .k { font-size: 11px; letter-spacing: .2em; }
.box h3 { margin-top: 10px; font-size: 21px; font-weight: 700; line-height: 1.32; letter-spacing: -.012em; }
.box p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--sub); }
.box .more { margin-top: 16px; font-size: 15px; }
.box .ic { display: block; width: 34px; height: 34px; color: var(--accent); }
.box .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
a.box { transition: transform .3s var(--ease), box-shadow .3s; }
a.box:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.08); }
a.box:hover .more { text-decoration: underline; text-underline-offset: 3px; }
a.box:active { transform: scale(.985); }
a.box:focus-visible { outline: 2px solid var(--branch-blue); outline-offset: 3px; }

/* ── 자주 묻는 질문 ── */
.faq { max-width: 820px; margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px; cursor: pointer; list-style: none;
  font-size: clamp(17px, 2vw, 20px); font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: 0 0 auto; font-size: 28px; font-weight: 300; line-height: 1; color: var(--sub); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--branch-blue); outline-offset: 2px; border-radius: 6px; }
.faq .a { max-width: 700px; padding: 0 2px 24px; font-size: 16px; line-height: 1.75; color: var(--sub); }
.faq .a .ask { margin-top: 10px; }

/* ── 마무리 ── */
.cta { text-align: center; }
.cta .btn { margin-top: 30px; }
.cta .alt { margin-top: 18px; display: flex; justify-content: center; }
.cta small { display: block; max-width: 520px; margin: 16px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--faint); }

/* ── 스크롤하면 살짝 떠오름 (기준 문서 6.3 의 5번) — 스크립트가 켜졌을 때만 숨김. --i 는 차례(카드마다 조금씩 늦게)
   transform 대신 translate 를 써서 카드의 올라옴(hover) · 눌림(98%)과 겹치지 않게 ── */
html.js .rise { opacity: 0; translate: 0 22px;
  transition: opacity .9s var(--ease), translate .9s var(--ease), transform .3s var(--ease), box-shadow .3s, background .2s;
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s; }
html.js .rise.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .rise { opacity: 1; translate: 0 0; transition: none; }
  .hero .emb2, .hero h1, .hero .lead, .hero .k, .hero .more { animation: none; }
}