/* ============================================================
   트리즈닥터 디자인 시스템 v1 — "브릿지 블루"
   출처: Claude Design 프로젝트 DESIGN.md. 라이트 우선, theme-aware 토큰.
   ============================================================ */
:root {
  /* 브랜드 */
  --brand-600:#1467d6; --brand-700:#0d4fa8; --brand-100:#eaf2fd; --brand-050:#f4f8fd;
  --accent-yellow:#ffc93c; --accent-yellow-100:#fdf3d8; --accent-orange:#ff7a3d;
  --ink-900:#1c2540;
  /* 뉴트럴 (라이트) */
  --text-strong:#111827; --text-body:#4b5563; --text-muted:#6b7280;
  --border:#e5e9f2; --surface:#ffffff; --bg:#f6f8fb;
  /* 라운드 */
  --r-btn:10px; --r-card:16px; --r-modal:20px;
  /* 섀도 */
  --sh-card:0 2px 12px rgba(17,24,39,.06);
  --sh-hover:0 8px 28px rgba(17,24,39,.12);
  --sh-modal:0 24px 64px rgba(17,24,39,.24);
  --container:1120px;
  --mono:'JetBrains Mono',monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text-body);
  font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a { color:var(--brand-600); text-decoration:none; }
a:hover { color:var(--brand-700); }
img { max-width:100%; display:block; }
button { font-family:inherit; }
h1,h2,h3,p { text-wrap:pretty; }
/* hidden 속성이 display 지정 요소(.btn 등)에도 확실히 적용되도록 전역 리셋 */
[hidden] { display:none !important; }
.wrap { max-width:var(--container); margin:0 auto; padding-left:24px; padding-right:24px; }
.mono { font-family:var(--mono); }

/* ---------- 버튼 ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-weight:700; border-radius:var(--r-btn);
  cursor:pointer; border:none; line-height:1; transition:background .15s, box-shadow .15s, transform .15s; }
.btn:focus-visible { outline:2px solid var(--brand-600); outline-offset:2px; }
.btn--primary { background:var(--brand-600); color:#fff; height:48px; padding:0 24px; font-size:16px; }
.btn--primary:hover { background:var(--brand-700); color:#fff; }
.btn--secondary { background:var(--surface); color:var(--brand-600); border:1.5px solid #c4d9f5; height:48px; padding:0 24px; font-size:16px; }
.btn--secondary:hover { background:var(--brand-050); }
.btn--sm { height:40px; padding:0 18px; font-size:14.5px; }
.btn[disabled] { opacity:.4; cursor:default; }

/* ---------- 헤더 ---------- */
.td-header { position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--border); }
.td-header__inner { display:flex; align-items:center; gap:28px; height:64px; }
.td-brand { font-size:20px; font-weight:800; color:var(--brand-600); letter-spacing:-.01em; }
.td-nav { display:flex; align-items:center; gap:8px; flex:1; }
.td-switcher { position:relative; }
.td-switcher__btn { display:flex; align-items:center; gap:6px; background:var(--brand-050); border:none;
  font-size:15px; font-weight:600; color:var(--text-strong); padding:10px 12px; border-radius:var(--r-btn); cursor:pointer; }
.td-switcher__btn .caret { font-size:10px; color:var(--text-muted); }
.td-switcher__menu { position:absolute; top:52px; left:0; width:320px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh-modal); padding:12px;
  display:flex; flex-direction:column; gap:2px; }
.td-switcher__menu[hidden] { display:none; }
.td-switcher__item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-btn);
  border:none; text-align:left; cursor:pointer; background:transparent; width:100%; }
.td-switcher__item:hover { background:var(--brand-050); }
.td-switcher__item[aria-current="true"] { background:var(--brand-050); }
.td-switcher__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.td-switcher__name { font-size:14.5px; font-weight:600; color:var(--text-strong); flex:1; }
.td-switcher__cur { font-size:11px; font-weight:700; color:var(--brand-600); }
.td-header__buy { font-size:15px; font-weight:600; color:var(--text-strong); display:flex; align-items:center; gap:5px; }
.td-header__buy .ext { font-size:12px; color:var(--text-muted); }
.td-header__toggle { display:none; }

/* ---------- 히어로 ---------- */
.td-hero { background-image:url('/images/brand/hero-bg.svg'), linear-gradient(135deg,#eaf2fd,#fdf6e3); background-size:cover,auto; background-position:center; background-repeat:no-repeat; }
.td-hero__inner { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:64px 24px; max-width:var(--container); margin:0 auto; }
.td-hero__tags { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.tag { font-size:12.5px; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--surface); border:1px solid transparent; }
.tag--book { color:var(--brand-600); border-color:#c4d9f5; }
.tag--card { color:#a16207; border-color:#f0dfae; }
.tag--edition { color:#a16207; border-color:#f0dfae; }
.td-hero__title { font-size:44px; font-weight:800; color:var(--ink-900); margin:0 0 14px; letter-spacing:-.02em; line-height:1.2; }
.td-hero__subtitle { font-size:17px; color:var(--text-body); line-height:1.75; margin:0 0 28px; }
.td-hero__actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.td-hero__meta { font-family:var(--mono); font-size:13px; color:var(--text-muted); margin-top:20px; }
/* 히어로 이미지 — 박스 없이 자연스럽게(투명 배경 float) */
.td-hero__cover { display:flex; align-items:center; justify-content:center; }
.td-hero__img { max-height:460px; max-width:100%; width:auto; object-fit:contain; cursor:zoom-in; filter:drop-shadow(0 22px 40px rgba(28,37,64,.26)); }
/* 3권 투명 목업 배치 — 가운데 앞, 좌우 뒤로 부채꼴 */
.td-hero__covers { position:relative; width:100%; max-width:540px; margin:0 auto; aspect-ratio:4/3; }
.td-hero__vol { position:absolute; top:50%; width:auto; object-fit:contain; cursor:zoom-in; filter:drop-shadow(0 18px 30px rgba(28,37,64,.22)); }
.td-hero__vol--center { left:50%; transform:translate(-50%,-50%); max-height:80%; z-index:3; }
.td-hero__vol--left   { left:0;  transform:translateY(-50%) translateX(-4%); max-height:62%; z-index:1; }
.td-hero__vol--right  { right:0; transform:translateY(-50%) translateX(4%);  max-height:62%; z-index:2; }

/* ---------- 섹션 공통 ---------- */
.section { max-width:var(--container); margin:0 auto; padding:88px 24px 0; width:100%; }
.section__title { font-size:30px; font-weight:800; color:var(--text-strong); margin:0 0 10px; letter-spacing:-.01em; }
.section__lead { font-size:15.5px; color:var(--text-muted); line-height:1.7; margin:0 0 24px; max-width:720px; }
.section__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:24px; }
.section__count { font-family:var(--mono); font-size:13px; color:var(--text-muted); }

/* 대표 문구 */
.td-pullquote { max-width:760px; margin:0 auto; padding:88px 24px 0; text-align:center; }
.td-pullquote__mark { font-size:44px; color:var(--brand-600); line-height:.5; font-weight:800; }
.td-pullquote__text { font-size:28px; font-weight:700; color:var(--ink-900); line-height:1.5; margin:12px 0 0; letter-spacing:-.01em; }

/* 스포트라이트 */
.td-spotlight-wrap { max-width:var(--container); margin:0 auto; padding:64px 24px 0; width:100%; }
.td-spotlight { background:var(--ink-900); border-radius:var(--r-modal); padding:36px 40px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.td-spotlight__badge { background:var(--accent-yellow); color:#3d3000; font-size:13px; font-weight:800; padding:8px 16px; border-radius:999px; flex-shrink:0; }
.td-spotlight__title { font-size:19px; font-weight:800; color:#fff; margin-bottom:6px; }
.td-spotlight__text { font-size:14.5px; color:#c7d2f0; line-height:1.7; margin:0; }

/* 특징 */
.grid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:24px; }
.feature-card { background:var(--surface); border-radius:var(--r-card); padding:28px; box-shadow:var(--sh-card); }
.feature-num { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:15px; font-weight:800; margin-bottom:16px; font-family:var(--mono); }
.feature-card h3 { font-size:18px; font-weight:700; color:var(--text-strong); margin:0 0 8px; }
.feature-card p { font-size:14.5px; color:var(--text-muted); line-height:1.7; margin:0; }
.feature-card--img { text-align:center; }
.feature-card--img h3, .feature-card--img p { text-align:left; }
.feature-card__img { height:200px; display:grid; place-items:center; margin:-6px 0 16px; }
.feature-card__img img { max-height:100%; max-width:90%; width:auto; object-fit:contain; filter:drop-shadow(0 10px 20px rgba(28,37,64,.2)); }

/* 활용법 */
.usage-card { background:var(--brand-100); border-radius:var(--r-card); padding:28px; }
.usage-card h3 { font-size:18px; font-weight:700; color:var(--ink-900); margin:0 0 8px; }
.usage-card p { font-size:14.5px; color:var(--text-body); line-height:1.7; margin:0; }

/* 추천·후기 */
.endorse-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:24px; }
.endorse-card { background:var(--surface); border-radius:var(--r-card); padding:26px; box-shadow:var(--sh-card); }
.endorse-card p { font-size:15px; color:var(--text-strong); line-height:1.75; margin:0 0 16px; }
.endorse-card .name { font-size:13.5px; font-weight:700; color:var(--text-strong); }
.endorse-card .role { font-size:12.5px; color:var(--text-muted); }

/* 저자 */
.td-author { background:var(--ink-900); border-radius:var(--r-modal); padding:48px 40px; display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; }
.td-author__photo { width:140px; height:140px; border-radius:50%; object-fit:cover; background:#2b3a6b; }
.td-author__role { font-size:13px; font-weight:700; color:var(--accent-yellow); letter-spacing:.05em; margin-bottom:8px; }
.td-author__name { font-size:26px; font-weight:800; color:#fff; margin:0 0 10px; }
.td-author__body { font-size:15px; color:#c7d2f0; line-height:1.8; margin:0; }

/* 제품 정보 */
.td-specs { background:var(--surface); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.spec-row { display:grid; grid-template-columns:160px 1fr; padding:16px 24px; border-bottom:1px solid #eef1f5; font-size:14.5px; }
.spec-row:last-child { border-bottom:none; }
.spec-row .label { font-weight:700; color:var(--text-strong); }
.spec-row .value { color:var(--text-body); font-family:var(--mono); font-size:13.5px; }

/* FAQ */
.td-faq { max-width:800px; }
.faq-list { display:flex; flex-direction:column; gap:10px; }
.faq-item { background:var(--surface); border-radius:12px; box-shadow:0 2px 12px rgba(17,24,39,.05); overflow:hidden; }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; background:none; border:none;
  padding:18px 22px; font-size:15.5px; font-weight:700; color:var(--text-strong); cursor:pointer; text-align:left; }
.faq-q .icon { font-size:16px; color:var(--text-muted); }
.faq-a { margin:0; padding:0 22px 18px; font-size:14.5px; color:var(--text-body); line-height:1.75; }
.faq-a[hidden] { display:none; }

/* 다운로드 */
.td-downloads { max-width:800px; }
.dl-list { display:flex; flex-direction:column; gap:10px; }
.dl-item { background:var(--surface); border-radius:12px; padding:18px 22px; display:flex; align-items:center; gap:16px; box-shadow:0 2px 12px rgba(17,24,39,.05); }
.dl-item__ico { width:40px; height:40px; border-radius:10px; background:var(--brand-100); display:grid; place-items:center; font-size:11px; font-weight:800; color:var(--brand-600); font-family:var(--mono); flex-shrink:0; }
.dl-item__b { flex:1; min-width:0; }
.dl-item__name { font-size:15px; font-weight:700; color:var(--text-strong); }
.dl-item__meta { font-size:12.5px; color:#9ca3af; font-family:var(--mono); }
.dl-empty { color:var(--text-muted); font-size:14.5px; }
.dl-group { margin-bottom:22px; }
.dl-group:last-child { margin-bottom:0; }
.dl-grouptitle { font-size:14px; font-weight:700; color:var(--brand-700); margin:0 0 10px; padding-left:2px; }

/* 함께 보면 좋은 */
.related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.related-card { display:flex; gap:16px; align-items:center; background:var(--surface); border:none; border-radius:var(--r-card);
  padding:16px; box-shadow:var(--sh-card); cursor:pointer; text-align:left; font-family:inherit; transition:box-shadow .15s; }
.related-card:hover { box-shadow:var(--sh-hover); }
.related-card__img { width:72px; height:72px; border-radius:12px; object-fit:cover; flex-shrink:0; background:var(--brand-100); }
.related-card__name { font-size:15.5px; font-weight:700; color:var(--text-strong); margin-top:6px; }
.related-card__short { font-size:13px; color:var(--text-muted); line-height:1.5; }

/* 갤러리 — 플립북 */
.td-flip { background:var(--surface); border-radius:var(--r-card); padding:32px; box-shadow:var(--sh-card); }
.td-flip__row { display:flex; align-items:center; gap:20px; }
.td-flip__nav { width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:#fff; font-size:16px; color:var(--text-strong); cursor:pointer; flex-shrink:0; }
.td-flip__nav:hover { background:var(--brand-050); }
.td-flip__stage { flex:1; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#eef2f7; cursor:zoom-in; }
.td-flip__stage img { width:100%; height:100%; object-fit:contain; background:#fff; }
.td-flip__dots { display:flex; gap:5px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.td-flip__dot { width:10px; height:10px; padding:0; border-radius:50%; border:none; background:#dbe3ef; cursor:pointer; }
.td-flip__dot[aria-current="true"] { background:var(--brand-600); }

/* 갤러리 — 발명원리 그리드 */
.td-principles { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.td-principles__cell { aspect-ratio:3/4; border-radius:10px; overflow:hidden; border:1px solid var(--border); cursor:zoom-in; background:#f6f8fb; }
.td-principles__cell img { width:100%; height:100%; object-fit:cover; }
.td-principles__cell:hover { border-color:var(--brand-600); }

/* 갤러리 — 카드 앞뒷면 */
.td-cardface { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.td-cardface__item { aspect-ratio:2/3; border-radius:12px; overflow:hidden; border:1px solid var(--border); cursor:zoom-in; background:#fff; padding:0; }
.td-cardface__item img { width:100%; height:100%; object-fit:cover; }

/* 갤러리 — 스트립 (이미지 세로 크기에 맞춰 높이 확보 + 좌우 스크롤) */
.td-strip { display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; align-items:flex-start; }
.td-strip__item { flex:0 0 auto; height:460px; border-radius:12px; overflow:hidden; cursor:zoom-in; background:#fff; border:1px solid var(--border); }
.td-strip__item img { height:100%; width:auto; object-fit:contain; }

/* 푸터 */
/* 상세 페이지 본문 하단 여백(마지막 섹션과 푸터 사이) */
.td-detail-main { padding-bottom:96px; }
@media (max-width:900px){ .td-detail-main { padding-bottom:64px; } }

.td-footer { background:var(--surface); border-top:1px solid var(--border); margin-top:96px; }
.td-footer__inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:24px; }
.td-footer__brand { font-size:15px; font-weight:800; color:var(--brand-600); }
.td-footer__legal { font-size:12.5px; color:#9ca3af; }

/* ---------- 모달 ---------- */
.modal { position:fixed; inset:0; background:rgba(28,37,64,.5); z-index:100; display:grid; place-items:center; padding:24px; }
.modal[hidden] { display:none; }
.modal__box { position:relative; background:#fff; border-radius:var(--r-modal); width:100%; max-width:480px; padding:32px; box-shadow:var(--sh-modal); max-height:90vh; overflow:auto; }
/* 모달 닫기(X) — PC·모바일 공통 */
.modal__x { position:absolute; top:12px; right:12px; width:38px; height:38px; display:grid; place-items:center;
  background:none; border:none; border-radius:50%; font-size:26px; line-height:1; color:var(--text-muted); cursor:pointer; }
.modal__x:hover { background:var(--brand-050); color:var(--text-strong); }
.modal__x:focus-visible { outline:2px solid var(--brand-600); outline-offset:2px; }
.modal__box--wide { max-width:560px; }
.modal__title { font-size:22px; font-weight:800; color:var(--text-strong); margin:0 0 8px; }
.modal__desc { font-size:14.5px; color:var(--text-muted); line-height:1.6; margin:0 0 24px; }
.field { display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--text-strong); }
.field-col { display:flex; flex-direction:column; gap:14px; }
.field-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.input, .textarea { border:1px solid var(--border); border-radius:var(--r-btn); font-family:inherit; font-size:15px; color:var(--text-strong); background:#fff; }
.input { height:48px; padding:0 14px; }
.textarea { padding:12px 14px; resize:vertical; }
.input:focus, .textarea:focus { outline:none; border-color:var(--brand-600); box-shadow:0 0 0 3px var(--brand-100); }
.check { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; font-weight:400; color:var(--text-body); line-height:1.5; cursor:pointer; }
.check input { margin-top:2px; accent-color:var(--brand-600); }
.modal__note { font-size:12.5px; color:#9ca3af; }
.modal__ok { text-align:center; padding:16px 0; }
.modal__ok-ico { width:56px; height:56px; border-radius:50%; background:var(--brand-100); display:grid; place-items:center; margin:0 auto 16px; font-size:24px; color:var(--brand-600); }
.modal__status { font-size:13.5px; margin-top:4px; min-height:18px; }
.modal__status--err { color:#dc2626; }

/* ---------- 라이트박스 ---------- */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:200; display:grid; place-items:center; padding:32px; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:92vw; max-height:88vh; object-fit:contain; border-radius:8px; }
.lightbox__close { position:absolute; top:20px; right:24px; background:none; border:none; color:#fff; font-size:32px; cursor:pointer; }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:#fff; font-size:28px; width:52px; height:52px; border-radius:50%; cursor:pointer; }
.lightbox__nav--prev { left:24px; } .lightbox__nav--next { right:24px; }

/* ============================================================
   홈 전용 컴포넌트
   ============================================================ */
.home-hero { background-image:url('/images/brand/hero-bg.svg'), linear-gradient(135deg,#eaf2fd 0%,#fdf6e3 100%); background-size:cover,auto; background-position:center; background-repeat:no-repeat; }
.home-hero__inner { max-width:var(--container); margin:0 auto; padding:96px 24px 88px; text-align:center; }
.home-hero__eyebrow { font-size:16px; font-weight:700; color:var(--brand-600); letter-spacing:.01em; margin:0 0 16px; }
.home-hero__title { font-size:48px; font-weight:800; color:var(--ink-900); line-height:1.25; margin:0 0 18px; letter-spacing:-.02em; }
.home-hero__sub { font-size:18px; color:var(--text-body); line-height:1.7; margin:0 auto; max-width:600px; }
.home-hero__cta { display:flex; gap:12px; justify-content:center; margin-bottom:48px; flex-wrap:wrap; }
.home-quick { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.quick-pill { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:9px 16px; font-size:14px; font-weight:600; color:var(--text-strong); box-shadow:0 1px 4px rgba(17,24,39,.04); }
.quick-pill:hover { border-color:var(--brand-600); color:var(--brand-600); }
.quick-pill__dot { width:8px; height:8px; border-radius:50%; }

.home-section { max-width:var(--container); margin:0 auto; padding:64px 24px 0; width:100%; }
.home-section--first { padding-top:96px; }
.home-section__head { display:flex; align-items:baseline; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.home-section__head h2 { font-size:30px; font-weight:800; color:var(--text-strong); margin:0; letter-spacing:-.01em; }
.home-section__head span { font-size:15px; color:var(--text-muted); }

.pgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.pcard { display:block; background:var(--surface); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); color:inherit; transition:box-shadow .2s, transform .2s; }
.pcard:hover { box-shadow:var(--sh-hover); color:inherit; }
.pcard__img { aspect-ratio:4/3; overflow:hidden; background:linear-gradient(160deg,#f4f8fd,#e7f0fb); display:grid; place-items:center; padding:18px; }
.pcard__img img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 10px 20px rgba(28,37,64,.18)); transition:transform .2s; }
.pcard:hover .pcard__img img { transform:scale(1.04) translateY(-2px); }
/* 카드 교구는 사진 — 박스를 꽉 채움(cover) */
.pcard--card .pcard__img { background:#fff; padding:0; }
.pcard--card .pcard__img img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; filter:none; }
.pcard__body { padding:20px; }
.pcard__tags { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.aud { font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.aud--adult { color:#0d4fa8; background:#eaf2fd; }
.aud--elem { color:#a16207; background:#fdf3d8; }
.aud--teen { color:#c2410c; background:#ffedd5; }
.pcard__name { font-size:19px; font-weight:700; color:var(--text-strong); margin:0 0 6px; }
.pcard__sum { font-size:14.5px; color:var(--text-muted); line-height:1.6; margin:0; }

.dl-cta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; }
.dl-cta { border-radius:var(--r-card); padding:36px; }
.dl-cta--teacher { background:var(--brand-100); }
.dl-cta--parent { background:var(--accent-yellow-100); }
.dl-cta__eyebrow { font-size:13px; font-weight:700; letter-spacing:.05em; margin-bottom:10px; }
.dl-cta--teacher .dl-cta__eyebrow { color:var(--brand-600); }
.dl-cta--parent .dl-cta__eyebrow { color:#a16207; }
.dl-cta h3 { font-size:24px; font-weight:800; color:var(--ink-900); margin:0 0 10px; }
.dl-cta p { font-size:15px; color:var(--text-body); line-height:1.7; margin:0 0 16px; }
.dl-cta__link { display:inline-block; font-size:15px; font-weight:700; color:var(--brand-600); }
.dl-cta__link:hover { color:var(--brand-700); }

.buy-band-wrap { max-width:var(--container); margin:96px auto; padding:0 24px; width:100%; }
.buy-band { background:var(--ink-900); border-radius:var(--r-modal); padding:56px 40px; text-align:center; }
.buy-band h2 { font-size:30px; font-weight:800; color:#fff; margin:0 0 10px; letter-spacing:-.01em; }
.buy-band p { font-size:16px; color:#c7d2f0; margin:0 0 24px; }
.buy-band__btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent-yellow); color:#3d3000; font-size:16px; font-weight:700; padding:14px 28px; border-radius:var(--r-btn); }
.buy-band__btn:hover { background:#f5bd25; color:#3d3000; }

/* 홈 헤더 드롭다운(2열) */
.td-switcher__menu--mega { width:560px; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px; }
.td-mega__label { font-size:12px; font-weight:700; color:var(--text-muted); letter-spacing:.06em; margin-bottom:10px; padding-left:10px; }
.td-mega__item { display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:var(--r-btn); color:inherit; }
.td-mega__item:hover { background:var(--brand-050); color:inherit; }
.td-mega__item b { font-size:14.5px; font-weight:700; color:var(--text-strong); }
.td-mega__item span { font-size:12.5px; color:var(--text-muted); }
.td-nav__link { font-size:15px; font-weight:600; color:var(--text-strong); padding:10px 12px; border-radius:var(--r-btn); }
.td-nav__link:hover { background:var(--brand-050); color:var(--text-strong); }

/* 리치 푸터 */
.foot { background:var(--surface); border-top:1px solid var(--border); margin-top:auto; }
.foot__grid { max-width:var(--container); margin:0 auto; padding:48px 24px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.foot__brand-name { font-size:18px; font-weight:800; color:var(--brand-600); margin-bottom:10px; }
.foot__brand p { font-size:13.5px; color:var(--text-muted); line-height:1.7; margin:0; }
.foot__col-h { font-size:13px; font-weight:700; color:var(--text-strong); margin-bottom:12px; }
.foot__col a { display:block; font-size:13.5px; color:var(--text-muted); margin-bottom:8px; }
.foot__col a:hover { color:var(--brand-600); }
.foot__bottom { border-top:1px solid #eef1f5; padding:16px 24px; text-align:center; font-size:12.5px; color:#9ca3af; }

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .home-hero__title { font-size:32px; }
  .home-section--first { padding-top:64px; }
  .buy-band-wrap { margin:64px auto; }
  .buy-band { padding:40px 24px; } .buy-band h2 { font-size:24px; }
  .foot__grid { grid-template-columns:1fr 1fr; }
  .td-switcher__menu--mega { width:min(90vw,520px); }
}
@media (max-width:560px){
  .foot__grid { grid-template-columns:1fr; }
  .td-switcher__menu--mega { grid-template-columns:1fr; width:min(88vw,360px); }
}

/* ---------- 반응형 (상세) ---------- */
@media (max-width:900px){
  .td-hero__inner { grid-template-columns:1fr; gap:28px; padding:40px 24px; }
  .td-hero__cover { max-height:340px; }
  .td-hero__title { font-size:32px; }
  .section, .td-spotlight-wrap { padding-top:64px; }
  .section__title, .td-flip .section__title { font-size:24px; }
  .td-pullquote { padding-top:64px; } .td-pullquote__text { font-size:22px; }
  .td-author { grid-template-columns:1fr; text-align:center; padding:36px 24px; }
  .td-author__photo { margin:0 auto; }
  .td-principles { grid-template-columns:repeat(5,1fr); }
  .td-footer { margin-top:64px; }
  .field-2 { grid-template-columns:1fr; }
  .td-header__inner { gap:12px; }
}
@media (max-width:560px){
  .td-principles { grid-template-columns:repeat(4,1fr); }
  .td-header__buy { display:none; }
}

/* ============================================================
   헤더 네비(2 드롭다운) · 캐러셀 · 스크롤탑 (수정본)
   ============================================================ */
.td-nav { display:flex; align-items:center; gap:8px; flex:1; }
.td-nav__link { font-size:16px; font-weight:600; color:var(--text-strong); padding:10px 12px; border-radius:var(--r-btn); }
.td-nav__link:hover { background:var(--brand-050); color:var(--text-strong); }
.td-nav__buy { display:inline-flex; align-items:center; gap:4px; }
.td-nav__contact { flex:none; margin-left:auto; }
.td-header__toggle { display:none; background:none; border:none; color:var(--text-strong); cursor:pointer; padding:6px; margin-left:auto; }

.td-dd { position:relative; }
.td-dd__btn { display:flex; align-items:center; gap:6px; background:none; border:none; font-size:16px; font-weight:600; color:var(--text-strong); padding:10px 12px; border-radius:var(--r-btn); cursor:pointer; }
.td-dd__btn:hover { background:var(--brand-050); }
.td-dd__btn .caret { font-size:10px; color:var(--text-muted); }
.td-dd__menu { position:absolute; top:52px; left:0; width:320px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh-modal); padding:10px; display:flex; flex-direction:column; gap:2px; z-index:60; }
.td-dd__menu[hidden] { display:none; }
.td-dd__item { display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-btn); color:inherit; }
.td-dd__item:hover { background:var(--brand-050); color:inherit; }
.td-dd__item[aria-current="true"] { background:var(--brand-050); }
.td-dd__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.td-dd__t { display:flex; flex-direction:column; gap:1px; }
.td-dd__t b { font-size:14.5px; font-weight:700; color:var(--text-strong); }
.td-dd__t span { font-size:12.5px; color:var(--text-muted); }

/* 캐러셀 */
.carousel { background:var(--surface); border-radius:var(--r-card); padding:28px; box-shadow:var(--sh-card); }
.carousel__row { display:flex; align-items:center; gap:16px; }
.carousel__nav { width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:#fff; font-size:20px; line-height:1; color:var(--text-strong); cursor:pointer; flex-shrink:0; }
.carousel__nav:hover { background:var(--brand-050); border-color:var(--brand-600); color:var(--brand-600); }
.carousel__stage { flex:1; min-width:0; display:grid; place-items:center; cursor:zoom-in; }
.carousel__stage img { max-height:620px; max-width:100%; width:auto; object-fit:contain; border-radius:8px; }
.carousel__dots { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-top:20px; max-height:44px; overflow:hidden; }
.carousel__dot { width:9px; height:9px; padding:0; border-radius:50%; border:none; background:#dbe3ef; cursor:pointer; }
.carousel__dot[aria-current="true"] { background:var(--brand-600); }

/* 책 미리보기 — 두쪽 펼침(PC) / 한쪽(모바일) */
.book-spread { flex:1; min-width:0; display:flex; gap:6px; justify-content:center; align-items:center; cursor:zoom-in; touch-action:pan-y; }
.book-spread__pg { max-height:620px; max-width:calc(50% - 3px); width:auto; object-fit:contain; background:#fff; border-radius:4px; box-shadow:0 8px 22px rgba(28,37,64,.14); user-select:none; -webkit-user-drag:none; }
.book-spread--single .book-spread__pg { max-width:100%; }
@keyframes pageturn { from { opacity:.35; transform:scale(.985); } to { opacity:1; transform:none; } }
.book-spread.turn .book-spread__pg { animation:pageturn .26s ease; }

/* 스트립 — 드래그로 좌우 슬라이드 */
.td-strip { cursor:grab; scroll-behavior:smooth; }
.td-strip.grabbing { cursor:grabbing; scroll-behavior:auto; }
.td-strip img { user-select:none; -webkit-user-drag:none; }

/* 스크롤탑 */
.scrolltop { position:fixed; right:24px; bottom:24px; z-index:80; width:48px; height:48px; border-radius:50%; border:none; background:var(--brand-600); color:#fff; cursor:pointer; box-shadow:0 8px 24px rgba(20,103,214,.36); display:grid; place-items:center; transition:background .15s, transform .15s; }
.scrolltop:hover { background:var(--brand-700); transform:translateY(-2px); }
.scrolltop[hidden] { display:none; }

/* ---------- 헤더 모바일 ---------- */
@media (max-width:860px){
  .td-header__toggle { display:block; }
  .td-nav { position:absolute; top:64px; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border);
    flex-flow:row wrap; align-items:stretch; gap:8px; padding:12px 16px 18px; box-shadow:var(--sh-card); display:none; }
  .td-nav--open { display:flex; }
  /* 구매하기 · 문의하기 — 나란히, 동일 크기 버튼 */
  .td-nav__buy, .td-nav__contact {
    flex:1 1 0; min-width:0; margin:6px 0 0; height:46px; padding:0 12px; border-radius:var(--r-btn);
    display:inline-flex; align-items:center; justify-content:center; gap:4px; font-size:15px; font-weight:700; }
  .td-nav__buy { background:var(--surface); color:var(--brand-600); border:1.5px solid #c4d9f5; }
  .td-nav__buy:hover { background:var(--brand-050); color:var(--brand-600); }
  /* 모바일: 드롭다운 없이 그룹 라벨 + 제품 링크(3+3) 항상 펼침 */
  .td-dd { flex:1 0 100%; }
  .td-dd + .td-dd { border-top:1px solid var(--border); margin-top:4px; }
  .td-dd__btn { width:100%; justify-content:flex-start; pointer-events:none; cursor:default;
    font-size:12.5px; font-weight:700; color:var(--text-muted); letter-spacing:.05em; padding:14px 10px 6px; }
  .td-dd__btn .caret { display:none; }
  .td-dd__menu, .td-dd__menu[hidden] { display:flex !important; position:static; width:100%;
    box-shadow:none; border:none; border-radius:0; padding:0 0 6px; }
  /* 제품별 배경 톤으로 구분감 (트리즈=블루·토리즈=옐로·슬쩍=오렌지) */
  .td-dd__item { padding:12px 12px; border-radius:10px; margin-bottom:6px; }
  .td-dd__item[data-tone="blue"]   { background:#eaf2fd; }
  .td-dd__item[data-tone="yellow"] { background:#fdf3d8; }
  .td-dd__item[data-tone="orange"] { background:#ffedd5; }
  .td-dd__item[aria-current="true"] { box-shadow:inset 3px 0 0 var(--brand-600); }
  .home-hero__title { font-size:32px; }
  .carousel { padding:16px; } .carousel__stage img { max-height:52vh; }
  .book-spread__pg { max-height:56vh; }
  .carousel__nav { width:40px; height:40px; }
  .td-strip__item { height:300px; }
  .scrolltop { display:none !important; }   /* 모바일에선 상단이동 플로팅 버튼 숨김 */
}