/* ============================================================
   첫토익 웹 공용 디자인 시스템 — "말랑 크림" (v2)
   ------------------------------------------------------------
   로그인 전 소개 페이지(랜딩 + /about /classes /app /natodan
   /reviews /faq /location /download) 전체가 이 파일 하나를 공유한다.

   디자인 방향 — 20대 여성 취향의 '귀엽고 깔끔한' 톤.
     · 잉크색을 회색이 아니라 따뜻한 갈색으로 — 마스코트 토리의
       라인아트 색과 맞춰서 페이지 전체가 토리와 같은 세계관이 된다.
     · 배경은 흰색이 아니라 크림. 파스텔(피치·핑크·민트·라벤더)을
       포인트로만 쓰고 면적은 좁게 — 유치해지지 않는 선.
     · 모서리는 크게, 그림자는 따뜻하게(갈색 기운), 요소는 살짝 기울여
       스티커처럼. 손글씨 폰트는 주석에만.

   ⚠️ 노랑은 배경으로만. 글자에 노랑을 쓰지 않는다(가독성).
   ⚠️ 학생·강사 앱(Flutter)은 이 파일과 무관 — 절대 영향 없음.
   ⚠️ 토큰·클래스 이름은 v1 과 동일하게 유지 — 각 페이지의 로컬
      <style> 이 이 이름들을 참조하므로 이름을 바꾸면 전 페이지가 깨진다.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap');

:root{
  /* 브랜드 옐로우 — 배경 전용 */
  --yellow:#FFD600; --yellow-deep:#F2C500; --yellow-soft:#FFF6D4;
  --butter:#FFF0B3;
  /* 파스텔 포인트 */
  --peach:#FFDCCB; --coral:#FF9E7A;
  --pink:#FFD8E4; --pink-deep:#FF8FAE;
  --mint:#CFEDDF; --mint-deep:#5FBF9B;
  --sky:#D9E9FF; --lav:#E7DFFF;
  /* 잉크 — 따뜻한 갈색 계열(토리 라인아트와 동일 계열) */
  --ink:#3D3229; --ink-2:#6E5F53; --ink-3:#95867A; --ink-4:#B6A99D;
  /* 배경 */
  --bg:#FFFCF6; --bg-soft:#FDF7EC; --bg-cream:#FFF7E8;
  --dark:#4A3D33;
  --line:#EDE2D2; --line-2:#F4EDE1;
  /* 하위 페이지 호환용(파랑·초록 계열은 파스텔로 순화) */
  --blue:#5B8DEF; --blue-soft:#EEF4FF;
  --green:#4CAF82; --green-soft:#F0FAF5;
  --radius:22px; --radius-lg:30px; --radius-xl:40px; --radius-pill:999px;
  --shadow-sm:0 2px 4px rgba(120,90,60,.04), 0 6px 18px rgba(120,90,60,.05);
  --shadow-md:0 8px 26px rgba(120,90,60,.09), 0 2px 8px rgba(120,90,60,.05);
  --shadow-lg:0 26px 64px rgba(120,90,60,.14);
  --hand:'Gaegu', 'Pretendard Variable', sans-serif;
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  line-height:1.7; letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 24px}

/* ── 헤더 ─────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,252,246,.82);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line-2)}
.nav-in{max-width:var(--max);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:17px;letter-spacing:-.02em;flex-shrink:0}
.brand .mark{width:32px;height:32px;border-radius:11px;background:var(--yellow);display:grid;place-items:center;font-size:15px;color:var(--ink);
  box-shadow:0 3px 0 rgba(190,150,0,.25);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.brand .t2{color:var(--ink-4)}
.nav-links{display:flex;gap:4px;font-size:14.5px;font-weight:700;color:var(--ink-2);margin-left:6px}
.nav-links a{padding:7px 13px;border-radius:var(--radius-pill);transition:.18s}
.nav-links a:hover{color:var(--ink);background:var(--yellow-soft)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:800;background:var(--butter)}
.nav-cta{margin-left:auto;display:flex;gap:8px;align-items:center}

/* 모바일 메뉴 */
.nav-toggle{display:none;background:#fff;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;padding:7px 13px;color:var(--ink-2)}
.mnav{display:none;border-top:1px solid var(--line-2);background:var(--bg)}
.mnav.open{display:block}
.mnav a{display:block;padding:13px 24px;font-size:15px;font-weight:700;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.mnav a[aria-current="page"]{color:var(--ink);background:var(--yellow-soft)}

/* ── 버튼 ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:800;border-radius:var(--radius-pill);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .16s, border-color .16s;
  white-space:nowrap;cursor:pointer;border:0}
.btn:active{transform:translateY(2px) scale(.98)}
.btn-sm{padding:9px 17px;font-size:14px}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-ghost{border:1.6px solid var(--line);color:var(--ink-2);background:#fff}
.btn-ghost:hover{border-color:var(--ink-4);color:var(--ink);transform:translateY(-2px)}
/* 아래쪽 진한 테두리 = 말랑한 '눌리는' 느낌 */
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 #E0B500, 0 8px 20px rgba(224,181,0,.28)}
.btn-yellow:hover{background:#FFDE33;transform:translateY(-2px);box-shadow:0 6px 0 #E0B500, 0 12px 26px rgba(224,181,0,.36)}
.btn-yellow:active{box-shadow:0 1px 0 #E0B500, 0 4px 12px rgba(224,181,0,.3)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 4px 0 #2A221B, 0 8px 20px rgba(61,50,41,.24)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 6px 0 #2A221B, 0 12px 26px rgba(61,50,41,.3)}
.btn-dark:active{box-shadow:0 1px 0 #2A221B}

/* ── 섹션 ─────────────────────────────────────────── */
/* overflow:hidden — 섹션 배경 블롭이 오른쪽으로 삐져나가면 페이지에
   가로 스크롤이 생긴다(1440 에서 실측). 블롭은 잘려도 무방. */
section{padding:96px 0;position:relative;overflow:hidden}
.sec-soft{background:var(--bg-soft)}
.sec-cream{background:var(--bg-cream)}
.sec-dark{background:var(--dark);color:#fff}
.sec-dark .sec-lead{color:rgba(255,255,255,.72)}
.label{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);color:var(--ink-2);
  font-weight:800;font-size:12.5px;letter-spacing:.1em;padding:8px 16px;border-radius:var(--radius-pill);margin-bottom:18px;
  box-shadow:var(--shadow-sm)}
h1.page-h{font-size:clamp(31px,4.1vw,50px);line-height:1.26;font-weight:900;letter-spacing:-.038em}
h2.sec-h{font-size:clamp(26px,3.2vw,41px);line-height:1.3;font-weight:900;letter-spacing:-.038em}
h3.sub-h{font-size:clamp(19px,2vw,24px);font-weight:900;letter-spacing:-.03em;margin-bottom:12px}
.sec-lead{margin-top:16px;font-size:clamp(14.5px,1.25vw,17px);color:var(--ink-2);line-height:1.9}
.center{text-align:center}
.center .sec-lead{max-width:640px;margin-left:auto;margin-right:auto}
/* 형광펜 — 살짝 기울고 끝이 둥글게 */
.mark{background:linear-gradient(transparent 56%, var(--yellow) 56%, var(--yellow) 94%, transparent 94%);padding:0 4px;border-radius:3px}
.mark-p{background:linear-gradient(transparent 56%, var(--pink) 56%, var(--pink) 94%, transparent 94%);padding:0 4px;border-radius:3px}
.mark-m{background:linear-gradient(transparent 56%, var(--mint) 56%, var(--mint) 94%, transparent 94%);padding:0 4px;border-radius:3px}
.body-p{font-size:16px;color:var(--ink-2);line-height:1.95;margin:14px 0}
.body-p b,.body-p strong{color:var(--ink);font-weight:800}

/* 손글씨 주석 — 화살표와 함께 쓰는 작은 메모 */
.hand{font-family:var(--hand);font-size:20px;font-weight:700;color:var(--coral);line-height:1.4;letter-spacing:0}
.hand-m{font-family:var(--hand);font-size:19px;font-weight:700;color:var(--mint-deep);letter-spacing:0}

/* ── 페이지 헤더(하위 페이지 공통 상단) ──────────── */
.page-head{padding:64px 0 12px}
.page-head .crumb{font-size:13px;color:var(--ink-4);font-weight:700;margin-bottom:14px}
.page-head .crumb a:hover{color:var(--ink-2)}

/* ── 카드 ─────────────────────────────────────────── */
.cards{display:grid;gap:20px;margin-top:44px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1.5px solid var(--line-2);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s, border-color .26s;position:relative}
.card:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:var(--shadow-md);border-color:var(--butter)}
.card .ic{font-size:28px;margin-bottom:14px;display:block}
.card h3{font-size:17.5px;font-weight:800;letter-spacing:-.025em;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--ink-3);line-height:1.8}
.card ul{margin:10px 0 0 18px;font-size:14.5px;color:var(--ink-3)}
.card li{margin:5px 0}
/* 카드 안 미니 토리 — 이모지 아이콘 자리를 대신한다 */
.card-tori{width:84px;height:84px;margin:-6px 0 8px -8px;filter:drop-shadow(0 6px 12px rgba(120,90,60,.14));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.card:hover .card-tori{transform:scale(1.08) rotate(-5deg)}
/* 문단 옆에 세워두는 토리 — PC 에서는 제목 옆 장식이라 작게, 모바일에서는
   제목 위로 올라가 단독으로 서므로 조금 크게.
   ⚠️ 선택자를 img.side-tori 로 — 이 이미지는 .tori-img 도 함께 갖는데
      .tori-img{width:100%} 가 파일 뒤쪽에 있어 같은 특이도면 그쪽이 이긴다.
      (실측: 96px 로 뒀더니 PC 에서 812px 로 렌더됐다) */
img.side-tori{width:96px;flex-shrink:0}
.with-tori{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
@media (max-width:820px){ img.side-tori{width:124px} }

/* ── 클레이 아이콘 ──────────────────────────────────
   OS 기본 이모지는 기기마다 그림이 다르고(애플/안드로이드/윈도우)
   납작한 광택 톤이라 이 사이트의 클레이·파스텔과 정면으로 어긋난다.
   전부 직접 만든 클레이 아이콘(/media/icons)으로 교체했다. */
/* ⚠️ 아이콘 뒤에 파스텔 사각형 타일을 깔지 않는다.
   클레이 아이콘은 이미 자기 색과 입체를 갖고 있어서, 뒤에 색 타일을
   더하면 스티커를 붙여놓은 것처럼 보이고 색이 두 겹으로 부딪힌다.
   게다가 페이지마다 타일 유무가 달라 통일감이 깨졌다(토리 소개만
   사각형이 보이던 문제). 전부 배경 없는 아이콘 하나로 통일. */
img.clay{width:48px;height:48px;object-fit:contain;display:block;flex-shrink:0;
  margin-bottom:14px;
  filter:drop-shadow(0 5px 10px rgba(120,90,60,.15));
  transition:transform .3s var(--ease-back)}
.card:hover img.clay,.fcard:hover img.clay,.icard:hover img.clay,
.who-c:hover img.clay,.bx:hover img.clay,.tf:hover img.clay{transform:scale(1.1) rotate(-6deg)}
/* 가로 배치 카드(아이콘이 글 왼쪽)에서는 아래 여백이 필요 없다 */
.fcard img.clay,.tf img.clay{margin-bottom:0}
/* 제목 앞에 붙는 작은 아이콘 */
.inline-clay{width:26px;height:26px;object-fit:contain;display:inline-block;
  vertical-align:-6px;margin-right:8px}

/* 아이콘 타일 — 파스텔 배경 위 이모지/이미지 */
.ic-tile{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;margin-bottom:16px}
.ic-y{background:var(--yellow-soft)} .ic-p{background:var(--pink)} .ic-m{background:var(--mint)}
.ic-s{background:var(--sky)} .ic-l{background:var(--lav)} .ic-c{background:var(--peach)}

/* ── 단계/스텝 ────────────────────────────────────── */
.steps{margin-top:44px;display:grid;gap:16px}
.step{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;background:#fff;border:1.5px solid var(--line-2);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);transition:transform .22s, box-shadow .22s}
.step:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
.step-no{width:54px;height:54px;border-radius:18px;background:var(--yellow);display:grid;place-items:center;font-weight:900;font-size:19px;
  box-shadow:0 3px 0 rgba(190,150,0,.25)}
.step-b{background:var(--sky);color:var(--ink);box-shadow:0 3px 0 rgba(120,160,220,.25)}
.step h3{font-size:19px;font-weight:900;letter-spacing:-.03em;margin-bottom:6px}
.step .who{font-size:13px;font-weight:700;color:var(--ink-4);margin-bottom:10px}
.step p{font-size:15px;color:var(--ink-2);line-height:1.85}
.step ul{margin:12px 0 0 18px;font-size:14.5px;color:var(--ink-3)}
.step li{margin:5px 0}

/* ── 표 ───────────────────────────────────────────── */
.table-wrap{margin-top:32px;overflow-x:auto;border:1.5px solid var(--line-2);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:16px 18px;text-align:left;font-size:15px;border-bottom:1px solid var(--line-2)}
th{background:var(--bg-cream);font-weight:800;font-size:14px;color:var(--ink-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
td b{font-weight:800}

/* ── FAQ ──────────────────────────────────────────── */
.faq{margin-top:40px;display:grid;gap:12px}
details{background:#fff;border:1.5px solid var(--line-2);border-radius:18px;padding:20px 24px;box-shadow:var(--shadow-sm);transition:border-color .2s}
details:hover{border-color:var(--line)}
details[open]{border-color:var(--yellow);background:#FFFDF7}
summary{font-weight:800;font-size:16px;letter-spacing:-.02em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-size:22px;font-weight:400;color:var(--ink-4);transition:.25s cubic-bezier(.34,1.56,.64,1)}
details[open] summary::after{transform:rotate(135deg);color:var(--ink-2)}
details p{margin-top:14px;font-size:15px;color:var(--ink-2);line-height:1.9}

/* ── CTA ──────────────────────────────────────────── */
.cta-final{background:linear-gradient(150deg,#FFEC9E 0%,#FFD600 60%,#FFCB3D 100%);padding:88px 0;position:relative;overflow:hidden}
.cta-final h2{font-size:clamp(28px,3.4vw,42px);font-weight:900;letter-spacing:-.038em;line-height:1.3}
.cta-final p{margin-top:18px;font-size:16.5px;color:#6B5525;line-height:1.85;font-weight:600}
.cta-actions{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── 푸터 ─────────────────────────────────────────── */
footer.site{background:var(--dark);color:rgba(255,255,255,.66);padding:56px 0 40px;font-size:14px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
footer.site h4{color:#fff;font-size:15px;font-weight:800;margin-bottom:14px}
footer.site a{color:rgba(255,255,255,.66);line-height:2}
footer.site a:hover{color:var(--butter)}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:13px;color:rgba(255,255,255,.44)}

/* ── 귀여움 담당 유틸 ──────────────────────────────── */
/* 파스텔 블롭 — 섹션 배경에 흐릿하게 깔아 공기감을 만든다 */
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none;z-index:0}
.blob-y{background:var(--butter)} .blob-p{background:var(--pink)}
.blob-m{background:var(--mint)} .blob-l{background:var(--lav)} .blob-c{background:var(--peach)}
/* 블롭 위 콘텐츠가 가려지지 않도록 */
.above{position:relative;z-index:1}

/* 토리 스티커 — 살짝 떠 있고 마우스를 올리면 흔들린다 */
.tori-img{width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(120,90,60,.16));animation:floaty 5s ease-in-out infinite}
.tori-img.d1{animation-delay:-1.2s} .tori-img.d2{animation-delay:-2.4s} .tori-img.d3{animation-delay:-3.6s}
.tori-img:hover{animation:wiggle .55s ease-in-out}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}

/* 말풍선 */
.bubble{position:relative;display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:20px;
  padding:12px 18px;font-size:14.5px;font-weight:800;color:var(--ink);box-shadow:0 4px 0 rgba(61,50,41,.12)}
.bubble::after{content:'';position:absolute;left:26px;bottom:-11px;width:0;height:0;
  border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid var(--ink)}
.bubble::before{content:'';position:absolute;left:29px;bottom:-7px;width:0;height:0;z-index:1;
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff}

/* 마스킹테이프 — 카드 위에 붙이면 다이어리 느낌 */
.tape{position:absolute;top:-11px;left:50%;translate:-50% 0;width:96px;height:24px;
  background:rgba(255,214,0,.55);border-left:2px dashed rgba(255,255,255,.6);border-right:2px dashed rgba(255,255,255,.6);
  rotate:-2deg;border-radius:2px}
.tape-p{background:rgba(255,143,174,.42)} .tape-m{background:rgba(95,191,155,.34)}

/* 폴라로이드 — 후기 카드 */
.polaroid{background:#fff;border-radius:8px;padding:14px 14px 20px;box-shadow:var(--shadow-md);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.polaroid:nth-child(odd){rotate:-1.2deg} .polaroid:nth-child(even){rotate:1.2deg}
.polaroid:hover{rotate:0deg;transform:translateY(-6px) scale(1.02)}

/* 칩 */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:var(--radius-pill);background:var(--yellow-soft);color:var(--ink-2)}
.chip-p{background:var(--pink);color:#8A3F58} .chip-m{background:var(--mint);color:#2F6A54}
.chip-s{background:var(--sky);color:#35548A} .chip-l{background:var(--lav);color:#54418F}

/* 흐르는 띠 */
.marquee{background:var(--yellow);overflow:hidden;padding:15px 0;border-top:2px solid rgba(61,50,41,.08);border-bottom:2px solid rgba(61,50,41,.08)}
.marquee-in{display:flex;gap:38px;width:max-content;animation:slide 26s linear infinite;font-weight:900;font-size:15px;color:var(--ink);letter-spacing:-.02em}
.marquee-in span{display:flex;align-items:center;gap:38px;white-space:nowrap}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-in{animation-play-state:paused}

/* 반짝이 */
.sparkle{position:absolute;font-size:20px;animation:twinkle 2.6s ease-in-out infinite;pointer-events:none;z-index:1}
.sparkle.s2{animation-delay:-.9s} .sparkle.s3{animation-delay:-1.8s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* 물결 구분선 */
.wavy{display:block;width:100%;height:26px}

/* ── 하위 페이지 히어로 (카피 + 토리) ────────────────
   랜딩과 같은 리듬을 하위 페이지에도. 좁아지면 토리가 위로 올라가
   먼저 인사하고 카피가 따라온다. */
.phero{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.phero-tori{position:relative;width:min(240px,24vw);justify-self:end}
.phero-tori .tori-img{width:100%}
.phero-tori .bubble{position:absolute;z-index:2;top:-6px;left:-42%;white-space:nowrap;rotate:-3deg;font-size:13.5px}
@media (max-width:1024px){ .phero-tori{width:180px} .phero-tori .bubble{display:none} }
@media (max-width:820px){
  .phero{grid-template-columns:1fr;gap:10px}
  .phero-tori{width:132px;justify-self:center;order:-1}
}

/* ── 강사 카드 ─────────────────────────────────────
   누끼 사진이라 배경을 파스텔로 깔고 바닥에 붙여 세운다. */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.team-card{border-radius:var(--radius-lg);padding:26px 22px 0;text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.team-y{background:linear-gradient(165deg,#FFF6D4,#FFE9A3)}
.team-p{background:linear-gradient(165deg,#FFF0F4,#FFDCE7)}
.team-m{background:linear-gradient(165deg,#F0FAF5,#D2EDDF)}
.team-card .role{display:inline-block;background:#fff;color:var(--ink-2);font-weight:800;font-size:12px;
  letter-spacing:.06em;padding:6px 14px;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}
.team-card h3{font-size:21px;font-weight:900;letter-spacing:-.03em;margin:12px 0 6px}
.team-card p{font-size:14px;color:var(--ink-2);line-height:1.75;min-height:52px}
.team-card img{width:88%;max-width:230px;margin:6px auto 0;display:block;
  filter:drop-shadow(0 10px 18px rgba(120,90,60,.16))}
@media (max-width:820px){ .team{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto} }

/* ══════════════════════════════════════════════════════
   모션 시스템
   ------------------------------------------------------
   원칙 3가지 —
   ① 한 번에 다 나타나지 않는다. 카드·리스트는 순서대로 (stagger).
   ② 헤드라인은 줄 단위로 올라온다. 문장을 '읽기 시작하게' 만드는 장치.
   ③ 스크롤에 반응하되 과하지 않게. 시선이 머무는 곳만 움직인다.
   ⚠️ 모든 모션은 prefers-reduced-motion 에서 꺼진다 — 어지럼증 접근성.
   ══════════════════════════════════════════════════════ */
:root{ --ease:cubic-bezier(.16,1,.3,1); --ease-back:cubic-bezier(.34,1.56,.64,1) }

/* ── 기본 등장 ── */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.reveal.pop{transform:translateY(18px) scale(.94)}
.reveal.pop.in{transform:none}
/* 방향 변형 — 좌우에서 밀려들어오면 2단 레이아웃에 리듬이 생긴다 */
.reveal.from-l{transform:translateX(-34px)}
.reveal.from-r{transform:translateX(34px)}
.reveal.from-l.in,.reveal.from-r.in{transform:none}
.reveal.blur{filter:blur(8px)}
.reveal.blur.in{filter:none;transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease)}

/* ── 자식 순차 등장 — site.js 가 --d 를 매긴다 ── */
.stagger > *{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms)}
.stagger.in > *{opacity:1;transform:none}

/* ── 헤드라인 줄 단위 등장 ──
   줄마다 마스크(overflow:hidden)를 씌우고 안쪽 글자를 밀어 올린다.
   한 덩어리로 페이드하는 것과 결이 다르다 — 문장이 '읽히기 시작'한다. */
.rise > span{display:block;overflow:hidden;padding-bottom:.06em}
.rise > span > i{display:block;font-style:normal;transform:translateY(108%);
  transition:transform .95s var(--ease);transition-delay:var(--d,0ms)}
.rise.in > span > i{transform:none}

/* ── 형광펜이 그어지는 효과 ── */
.mark.draw,.mark-p.draw,.mark-m.draw{background-size:0% 100%;background-repeat:no-repeat;
  transition:background-size .85s var(--ease) .3s}
.mark.draw.in,.mark-p.draw.in,.mark-m.draw.in{background-size:100% 100%}

/* ── 숫자 카운트업 (site.js) ── */
.count{font-variant-numeric:tabular-nums}

/* ── 스크롤 진행 막대 ── */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--yellow),var(--coral));
  z-index:200;pointer-events:none;transition:transform .1s linear}

/* ── 커서를 따라오는 은은한 빛 (데스크톱만) ── */
.glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,214,0,.13),rgba(255,214,0,0) 68%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .5s}
body.has-glow .glow{opacity:1}

/* ── 히어로 마우스 패럴랙스 (site.js 가 --px/--py 를 준다) ── */
.parallax{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.parallax.on{transform:translate3d(calc(var(--px,0)*1px),calc(var(--py,0)*1px),0)}

/* ── 버튼이 살짝 따라오는 자성 효과 ── */
.btn{will-change:transform}

/* ── 섹션 경계 곡선 — 색이 바뀌는 지점을 부드럽게 ── */
.curve{display:block;width:100%;height:44px;margin-bottom:-1px}
.curve.flip{transform:scaleY(-1)}

@media (prefers-reduced-motion:reduce){
  .reveal,.stagger > *,.rise > span{opacity:1!important;transform:none!important;
    filter:none!important;transition:none!important}
  .mark.draw{background-size:100% 100%;transition:none}
  html{scroll-behavior:auto}
  .tori-img,.marquee-in,.sparkle,.blob{animation:none!important}
  .progress,.glow{display:none}
  .parallax.on{transform:none}
}

/* ══════════════════════════════════════════════════════
   마감 디테일 — 있는지 모르지만 없으면 허전한 것들
   ══════════════════════════════════════════════════════ */
/* 아주 옅은 종이 질감 — 평평한 크림 배경에 깊이를 준다 */
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
body > *{position:relative;z-index:2}

/* 카드 위로 지나가는 빛 — 마우스를 올리면 한 번 스친다 */
.card,.step,.bx,.tf,.fcard,.icard,.who-c{position:relative;overflow:hidden}
.card::after,.step::after,.tf::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .75s var(--ease);}
.card:hover::after,.step:hover::after,.tf:hover::after{transform:translateX(120%)}

/* 스크롤하면 헤더가 살짝 조여든다 */
.nav{transition:padding .3s var(--ease), box-shadow .3s, background .3s}
body.scrolled .nav{box-shadow:0 4px 20px rgba(120,90,60,.07);background:rgba(255,252,246,.93)}
body.scrolled .nav-in{padding-top:8px;padding-bottom:8px}
.nav-in{transition:padding .3s var(--ease)}

/* 키보드 포커스 — 마우스 클릭에는 안 뜨고 탭 이동에만 */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}

/* 선택 영역 */
::selection{background:var(--butter);color:var(--ink)}

/* ── 반응형 ───────────────────────────────────────── */
@media (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  section{padding:68px 0}
  .page-head{padding:44px 0 8px}
  .nav-links{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .nav-cta{display:none}
  .nav-in{gap:10px}
  .g2,.g3{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:14px}
  footer.site .cols{grid-template-columns:1fr}
  .blob{filter:blur(38px)}
  .hand{font-size:18px}
}

/* ── 토리 FAB — 전 소개 페이지 상주 마스코트 ─────────
   클릭 시 앱 챗봇(/app.html#/chatbot)으로 연결. */
.tori-fab{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:10px;
  animation:toriIn .6s cubic-bezier(.16,1,.3,1) .8s both}
.tori-bubble{background:#fff;border:2px solid var(--ink);border-radius:var(--radius-pill);
  padding:10px 16px;font-size:13.5px;font-weight:800;color:var(--ink);white-space:nowrap;
  box-shadow:0 4px 0 rgba(61,50,41,.1);animation:toriBob 3.4s ease-in-out infinite}
.tori-btn{width:78px;height:78px;border-radius:50%;border:0;padding:0;cursor:pointer;overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #FFFBEA, #FFE68A);
  box-shadow:0 10px 28px rgba(224,181,0,.42), 0 2px 8px rgba(120,90,60,.14);
  display:grid;place-items:center;transition:transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s;
  animation:toriFloat 4.2s ease-in-out infinite}
.tori-btn:hover{transform:scale(1.08) translateY(-3px) rotate(-4deg);box-shadow:0 16px 36px rgba(224,181,0,.52)}
.tori-btn:active{transform:scale(.96)}
.tori-btn img,.tori-btn video{width:100%;height:100%;object-fit:cover;display:block}
.tori-close{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--ink-3);font-size:12px;line-height:1;
  cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm);opacity:0;transition:opacity .2s}
.tori-wrap{position:relative}
.tori-fab:hover .tori-close{opacity:1}
@keyframes toriFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes toriBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes toriIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .tori-fab,.tori-btn,.tori-bubble{animation:none}
}
@media (max-width:820px){
  .tori-fab{right:14px;bottom:14px;gap:8px}
  .tori-btn{width:64px;height:64px}
  .tori-bubble{font-size:12.5px;padding:8px 13px}
}
@media (max-width:420px){
  .tori-bubble{display:none}
}