@charset "utf-8";

/* 12개 서브 페이지 통합 레이어. 기존 페이지별 정보 구조는 유지하고 시각 위계와 부품을 메인에 맞춘다. */
.fl-sub {
    --fl-primary: var(--hn-caramel);
    --fl-dark: var(--hn-ink);
    --fl-cream: var(--hn-paper);
    --fl-sand: var(--hn-linen);
    color: var(--hn-ink);
    background: var(--hn-linen);
    font-family: var(--hn-serif);
    font-size: 16px;
    line-height: 1.72;
    letter-spacing: -.01em;
    overflow: clip;
}
.fl-sub *, .fl-sub *::before, .fl-sub *::after { box-sizing: border-box; }
.fl-sub :where(.fl-container, [class*="-inner"], [class*="-grid"], [class*="-copy"], [class*="-text"]) { min-width: 0; max-width: 100%; }
.fl-sub :where(h2, h3, h4, p, ul, ol, dl, dd, figure) { margin-top: 0; }
.fl-sub :where(h2, h3, h4) { color: var(--hn-ink); font-family: var(--hn-serif); font-weight: 600; letter-spacing: -.045em; }
.fl-sub :where(p, li, dt, dd, figcaption) { word-break: keep-all; overflow-wrap: break-word; }
.fl-sub :where(em) { color: var(--hn-caramel); font-style: normal; }
.fl-sub :where(strong) { color: inherit; font-weight: 700; }
.fl-sub :where(img) { max-width: 100%; }
.fl-sub .fl-container { width: 100%; max-width: none; margin: 0; padding-right: var(--hn-gutter); padding-left: var(--hn-gutter); }

/* 페이지별 첫 장면: 광고형 카드보다 메인의 편집형 양단 구성에 맞춘다. */
.fl-sub > section:first-child { position: relative; min-height: 560px; display: flex; align-items: center; padding: clamp(96px, 12vw, 160px) 0; background: var(--hn-linen); border: 0; }
.fl-sub > section:first-child::before { content: ""; position: absolute; left: -5vw; bottom: -24%; width: clamp(280px, 34vw, 520px); aspect-ratio: 1; background: url("../img/hn/art-peanut-branch.svg") center/contain no-repeat; opacity: .055; transform: rotate(-18deg); pointer-events: none; }
.fl-sub > section:first-child > :where(.fl-container, [class*="-inner"]) { position: relative; z-index: 1; }
.fl-sub > section:first-child :where([class*="-inner"], [class*="-copy"], [class*="-text"]) { text-align: left !important; }
.fl-sub > section:first-child :where(h2, h3, [class$="-title"]) { max-width: 12em; font-size: clamp(40px, 5vw, 68px); line-height: 1.2; }
.fl-sub > section:first-child :where(p:not([class*="label"]):not([class*="eyebrow"])) { max-width: 42em; color: var(--hn-ink-700); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.75; }

/* 공통 타이포와 섹션 리듬 */
.fl-sub :where([class$="-label"], [class*="-label "]) { color: var(--hn-caramel); font: 600 12px/1.5 "Lora", serif; letter-spacing: .14em; text-transform: uppercase; }
.fl-sub section:not(:first-child) { padding-top: clamp(88px, 10vw, 144px); padding-bottom: clamp(88px, 10vw, 144px); }
.fl-sub section:not(:first-child) :where(h2, h3, [class$="-title"]) { font-size: clamp(32px, 4vw, 52px); line-height: 1.28; }
.fl-sub :where([class*="is-cream"], [class*="--cream"]) { color: var(--hn-ink); background: var(--hn-paper); }
.fl-sub :where([class*="is-sand"], [class*="--sand"]) { color: var(--hn-ink); background: var(--hn-linen); }
.fl-sub :where([class*="is-dark"], [class*="--dark"]) { color: var(--hn-paper); background: var(--hn-ink); }
.fl-sub :where([class*="is-dark"], [class*="--dark"]) :where(h2, h3, h4, p, li, dt, dd, strong) { color: inherit; }
.fl-sub :where([class*="is-dark"], [class*="--dark"]) em { color: var(--hn-amber); }

/* AI 더미 페이지의 둥근 카드·그림자를 걷어내고 기록 카드처럼 정돈 */
.fl-sub :where([class*="-card"], [class*="-item"], [class*="-box"], [class*="-panel"], [class*="-tile"], [class*="-step"]) { border-radius: 2px !important; box-shadow: none !important; }
.fl-sub :where([class*="-card"], [class*="-item"], [class*="-tile"], [class*="-step"]) { border-color: var(--hn-ink-200) !important; }
.fl-sub :where(table) { width: 100%; border-collapse: collapse; border-top: 1px solid var(--hn-ink); }
.fl-sub :where(th, td) { padding: 18px 16px; border-bottom: 1px solid var(--hn-ink-200); text-align: left; }
.fl-sub :where(th) { color: var(--hn-ink-700); font-weight: 600; }

/* 행동 요소: 메인과 동일한 2px 각·명확한 hover/focus */
.fl-sub :where(a[class*="btn"], button[class*="btn"], .fl-btn) { min-height: 52px; padding: 0 26px; border: 1px solid var(--hn-ink) !important; border-radius: 2px !important; box-shadow: none !important; font: 600 15px/1.2 "MaruBuri", serif; transition: color .25s, background .25s, border-color .25s; }
.fl-sub :where(a[class*="btn"], button[class*="btn"], .fl-btn):hover { color: var(--hn-paper) !important; background: var(--hn-ink) !important; border-color: var(--hn-ink) !important; transform: none !important; }
.fl-sub :where([class*="-cta"]) { border-radius: 0 !important; box-shadow: none !important; }
.fl-sub :where([class*="-cta"]) :where(h2, h3) { max-width: 16em; }
.fl-sub :where([class*="-cta"]) a:focus-visible { outline-color: var(--hn-amber); }

/* 데이터 도식은 장식보다 정보로 읽히도록 잉크 한 색에 가깝게 정리 */
.fl-sub svg { font-family: var(--hn-serif); }
.fl-sub :where([class*="visual"], [class*="diagram"], [class*="graphic"]) { filter: saturate(.55); }
.fl-sub [data-fl-reveal] { transition-duration: .7s; transition-timing-function: var(--hn-ease); }

@media (max-width: 1024px) {
    .fl-sub > section:first-child { min-height: 480px; }
    .fl-sub > section:first-child :where([class*="-inner"]) { gap: 48px; }
}
@media (max-width: 767px) {
    .fl-sub { font-size: 15px; }
    .fl-sub > section:first-child { min-height: 0; padding: 72px 0; }
    .fl-sub :where(.fl-container, [class*="-inner"], [class*="-grid"], [class*="-copy"], [class*="-text"]) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
    .fl-sub > section:first-child :where([class*="-inner"], [class*="-grid"]) { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
    .fl-sub > section:first-child :where(h2, h3, [class$="-title"]) { width: 100% !important; max-width: 100% !important; font-size: clamp(32px, 9vw, 40px); overflow-wrap: anywhere; }
    .fl-sub :where(p, li, dt, dd) { max-width: 100% !important; overflow-wrap: anywhere; }
    .fl-sub section:not(:first-child) :where(h2, h3, [class$="-title"]) { font-size: clamp(28px, 8vw, 38px); }
    .fl-sub :where(th, td) { padding: 14px 10px; }
    .fl-sub :where(a[class*="btn"], button[class*="btn"], .fl-btn) { min-height: 48px; padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .fl-sub [data-fl-reveal] { opacity: 1 !important; transform: none !important; }
}