/* am.css — 11-04 지시서 §23 "그냥 똑같이 카피 뜨라고 — 내용만 다르게" · 담당 1(어두운 '작동 방식' 구간 + 공용 토큰·액자·이름표·단추).
   값 = REF_ANTIMETAL.md 실측(§0~§10 · 덤프 dump-*-s01a: 줄 그리드 416|652 틈 12 · 글 칸 안쪽 40 · 창 칸 이름표 19.5 + 12 + 창 512 · 폰 한 칸 틈 20 · 줄 사이 32/48).
   antimetal 의 글·로고·그림·코드 파일은 안 씀 — 색·크기·간격·곡선 숫자만. 알갱이·창 둘레 빛은 우리가 새로 그림(SVG 잡음 · 그러데이션).
   불러오는 순서: … stage.css → board.css → am.css(이 파일) → am-light.css(담당 3) · 제목 글꼴 Noto Serif KR(구글 폰트 · OFL · board-ui serifFont() 가 첫 화면 다 뜬 뒤 붙임 — §26-3).
   공용(담당 2·3 도 씀): 토큰 --am-* · .am-wrap · .am-h4/.am-h3/.am-h2s(세리프) · .am-sub · .am-body · .am-tag · .am-pill · .am-link · .am-note · .am-chip · .am-dash-top · [data-am-rv](등장) · [data-am-dots](제목 점 등장).
   무대 줄 = .am-row(이름표 .am-tag · 글 칸 .am-txt · 구리 액자 창 .am-win > 안 판 .am-win-in) · 짝수 줄 .am-row--flip(창 왼쪽). */

/* ── 1. 뿌리 토큰(그쪽 :root 숫자 그대로 · 글자 단계 clamp 그대로 — 1440/390 실측과 같음) ── */
@property --am-ink { syntax: '<color>'; inherits: true; initial-value: #1a1614; }
@property --am-muted { syntax: '<color>'; inherits: true; initial-value: #696663; }
@property --am-line { syntax: '<color>'; inherits: true; initial-value: #dbdbd6; }
@property --am-line2 { syntax: '<color>'; inherits: true; initial-value: #c0c0bc; }
@property --am-accent { syntax: '<color>'; inherits: true; initial-value: #c2410c; }
@property --am-paper { syntax: '<color>'; inherits: true; initial-value: #f5f6f1; }
@property --am-pill-bg { syntax: '<color>'; inherits: true; initial-value: #1a1614; }
@property --am-pill-fg { syntax: '<color>'; inherits: true; initial-value: #f5f6f1; }
:root {
  --paper-light: #f5f6f1; --paper-dark: #1a1614; --ink-light: #1a1614; --ink-dark: #fafbf7;
  --theme-duration: .5s; --theme-ease: ease;
  /* 밝은 쪽 값(담당 3 밝은 구간도 이 값) — 어두운 쪽은 아래 html[data-scheme="dark"] .hb-stage */
  --am-ink: #1a1614; --am-muted: #696663; --am-line: #dbdbd6; --am-line2: #c0c0bc; --am-accent: #c2410c; --am-paper: #f5f6f1; --am-pill-bg: #1a1614; --am-pill-fg: #f5f6f1;
  --am-gutter: clamp(12px, 5vw - 8px, 40px);
  --am-col: 1080px; --am-wide: 1360px;
  /* §26-3(16:4x 사장님): 제목 다시 명조 = Noto Serif KR(구글 폰트 · board-ui serifFont() 가 쪽의 세리프 글자만 text= 로 불러옴 · 크기·줄 간격·자간 그대로)
     → 못 불러오면 설치 명조(맥 AppleMyungjo · 나눔명조 · 안드로이드 Noto Serif CJK · 윈도 바탕). --al-serif(am-light.css)도 이 값을 받음. */
  --am-serif: 'Noto Serif KR', 'AppleMyungjo', 'Nanum Myeongjo', 'NanumMyeongjo', 'Noto Serif CJK KR', 'Source Han Serif K', 'Batang', serif;
  --am-xs: clamp(.75rem, .728rem + .094vw, .8125rem);      /* 13 / 12.01 */
  --am-sm: clamp(.875rem, .853rem + .094vw, .9375rem);     /* 15 / 14.01 */
  --am-base: clamp(1rem, .956rem + .188vw, 1.125rem);      /* 18 / 16.03 */
  --am-lg: clamp(1.125rem, 1.081rem + .188vw, 1.25rem);    /* 20 / 18.03 */
  --am-xl: clamp(1.25rem, 1.162rem + .376vw, 1.5rem);      /* 24 / 20.06 */
  --am-2xl: clamp(1.35rem, 1.192rem + .676vw, 1.8rem);     /* 28.8 / 21.71 */
  --am-3xl: clamp(1.6875rem, 1.41rem + 1.184vw, 2.475rem); /* 39.6 / 27.18 */
  --am-4xl: clamp(2.1375rem, 1.702rem + 1.859vw, 3.375rem);/* 54 / 34.48 */
  --am-5xl: clamp(2.7rem, 1.987rem + 3.042vw, 4.725rem);   /* 75.6 / 43.66 */
  --am-ease-rv: cubic-bezier(.22, 1, .36, 1);
  --am-ease-ui: cubic-bezier(.4, 0, .2, 1);
  --am-tr: --am-ink .5s ease, --am-muted .5s ease, --am-line .5s ease, --am-accent .5s ease;   /* 섞는 것 = 보이는 글·선·이름표 넷만(진한 선·종이·알약은 바로 — 뒤집힐 때 안 보이는 자리) */
}
/* 어두운 쪽(그쪽 값: 글 #fafbf7 · 흐린 글 = 글 60% + 종이 40% #989693 · 선 12% #35312f · 진한 선 24% #504d4a · 주황 = 우리 브랜드 한 단 밝게) */
html[data-scheme="dark"] .hb-stage, html:not(.fxjs) .hb-stage {
  --am-ink: #fafbf7; --am-muted: #989693; --am-line: #35312f; --am-line2: #504d4a; --am-accent: #ff6b2e; --am-paper: #1a1614; --am-pill-bg: #fafbf7; --am-pill-fg: #1a1614;
}
/* 쪽 바탕: 첫 화면 아래 밝은 종이 = #f5f6f1(꽃 판 .s0 은 자기 바탕 #fdfbf7 그대로) · 어두울 때 = stage.css(#1a1614) */
html.fxjs body { background-color: var(--paper-light); }
html.fxjs[data-scheme="dark"] body { background-color: var(--paper-dark); }
@media (prefers-reduced-motion: no-preference) {
  /* 내 구간만(#contact 상담·바닥은 담당 3 토큰) — 폰 CPU 4배 실험: 뒤집기 토큰 섞기를 쪽 전체 .hb-stage 에 걸면 담당 3 토큰 섞기와 합쳐 프레임 50~67ms → 구간을 좁혀 33ms */
  html.anim.hb-sch :is(.hb-dif, .hb1.hb-stage, .hb-gfx.hb-stage, .hb-end) { transition: var(--st-tr), var(--am-tr); }
  html.anim.hb-sch body { transition: background-color var(--theme-duration) var(--theme-ease); }
}

/* ── 2. 공용 글·틀 ── */
.am-wrap { width: min(100% - 2 * var(--am-gutter), var(--am-col)); margin: 0 auto; }
.am-sec { padding-top: 80px; padding-bottom: 80px; }   /* 그쪽 섹션 위아래 80(≥1024) · 64(640~1023) · 48 */
@media (max-width: 1023px) { .am-sec { padding-top: 64px; padding-bottom: 64px; } }
@media (max-width: 639px) { .am-sec { padding-top: 48px; padding-bottom: 48px; } }
.am-h4, .am-h3, .am-h2s { margin: 0; font-family: var(--am-serif); font-weight: 400; color: var(--am-ink); text-wrap: balance; word-break: keep-all; font-synthesis: none; }
.am-h4 { font-size: var(--am-4xl); line-height: 1.08; letter-spacing: -.02em; }
.am-h3 { font-size: var(--am-3xl); line-height: 1.15; letter-spacing: -.015em; }
.am-h2s { font-size: var(--am-2xl); line-height: 1.25; letter-spacing: -.01em; }
.am-sub { margin: 0; font-size: var(--am-xl); line-height: 1.35; letter-spacing: -.005em; font-weight: 500; color: var(--am-ink); text-wrap: balance; }
.am-body { margin: 0; font-size: var(--am-base); line-height: 1.55; font-weight: 400; color: var(--am-muted); text-wrap: pretty; }
.am-body b, .am-body strong { font-weight: 500; color: var(--am-ink); }
.am-note { margin: 0; font-size: var(--am-xs); line-height: 1.5; letter-spacing: .01em; color: var(--am-muted); }
.am-tag { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--am-xs); line-height: 1.5; font-weight: 600; letter-spacing: .01em; color: var(--am-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-tag-n { opacity: .65; }
.am-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--am-line2); font-size: var(--am-xs); font-weight: 500; line-height: 1; color: var(--am-ink); font-style: normal; white-space: nowrap; vertical-align: middle; }
.am-dash-top { border-top: 1px dashed var(--am-line); }
/* 알약 단추(그쪽 본문 CTA 하나 · 어두우면 흰 알약 자동) — 높이 = 글 15/14.01 + 위아래 16 = 47/46 */
a.am-pill, button.am-pill, .am-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 24px; border: 0; border-radius: 999px; background-color: var(--am-pill-bg); color: var(--am-pill-fg);
  font: inherit; font-size: var(--am-sm); font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s var(--am-ease-ui); -webkit-tap-highlight-color: transparent; }
/* §6 실측: hover = 바탕만 글자색 90%(hover:bg-ink/90 · 글은 그대로 — 투명도 아님) · 누름 = 같은 값(그쪽 active 규칙 0 — 폰은 누르면 hover 결 · 크기 바뀜 0) */
a.am-pill:hover, .am-pill:hover, .am-pill:active { background-color: color-mix(in srgb, var(--am-pill-bg) 90%, transparent); color: var(--am-pill-fg); }
/* 글 링크 + 화살표(그쪽 두 번째 행동) */
a.am-link, .am-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--am-base); font-weight: 500; line-height: 1.55; color: var(--am-muted); text-decoration: none;
  transition: color .15s var(--am-ease-ui); }
.am-link > :not(.am-arr) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--am-ink) 25%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .15s var(--am-ease-ui); }
.am-link .am-arr { display: inline-block; transition: transform .15s var(--am-ease-ui); }
a.am-link:hover, .am-link:hover, .am-link:active { color: var(--am-ink); }
.am-link:is(:hover, :active) > :not(.am-arr) { text-decoration-color: var(--am-ink); }
.am-link:is(:hover, :active) .am-arr { transform: translateX(2px); }
:is(.am-pill, .am-link):focus-visible { outline: 2px solid var(--am-accent); outline-offset: 2px; }

/* ── 3. 어두운 '작동 방식' 구간(#different → 줄 01~05 → 무대 끝 CTA) ── */
/* 구간 머리: 꽃 판 아래 점선 경계(쪽 전체 폭 · 선 색 = 글 12% · 뒤집기와 같이 0.5초) · 위 80/64/48 · 세리프 섹션 제목(3xl 39.6/27.18 — §24 그쪽 짝 실측) · 제목 → 첫 줄 48/40 */
.hb.hb-dif { padding: 80px 0 0; border-top: 1px dashed var(--am-line); }
.hb-dif .hb-dif-t { font-family: var(--am-serif); font-size: var(--am-3xl); line-height: 1.15; letter-spacing: -.015em; font-weight: 400; color: var(--am-ink); text-wrap: balance; }   /* §24 짝 = 그쪽 작동 방식 h2(3xl · 54 아님) */
#why-aboutus.hb1 { padding: 48px 0 0; }
main > section.hb-gfx.hb-stage { padding: 32px 0 0; }
main > section.hb-gfx.hb-stage::before, .hb.hb-end::before, .hb.hb-end::after { content: none; display: none; }
main > section.hb-dif:not(.cv-open) { contain-intrinsic-block-size: auto 220px; }
main > section.hb1.hb-stage:not(.cv-open), main > section.hb-gfx.hb-stage:not(.cv-open) { contain-intrinsic-block-size: auto 600px; }

/* 줄 = 그쪽 li 그리드: [글 26rem | 창 1fr] 틈 12 · 짝수 줄 [창 1fr | 글 26rem] · 창 칸 = 이름표(19.5) + 12 + 창(512) · 글 칸 = 두 행 걸침 · 안쪽 40 · 세로 가운데 · 소제목↔본문 12 */
.am-row { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "txt tag" "txt win"; gap: 12px; }
.am-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-areas: "tag txt" "win txt"; }
.am-row > .am-tag { grid-area: tag; }
.am-row > .am-txt { grid-area: txt; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; padding: 40px; }
.am-row > .am-win { grid-area: win; }
.am-txt > * { margin: 0; }
.am-txt > .am-stats { margin-top: 12px; }
.am-txt > .am-note { margin-top: 4px; }

/* 큰 숫자(그쪽 통계 숫자 결: 75.6/43.66 · 1.02 · −0.025em · w400 · tabular · 강조색) — 글자 = 끝 값(포스터) · 올리기는 장면 스크립트(담당 2 · 1.4s easeOutCubic) */
.am-stats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; }
.am-stat { display: flex; flex-direction: column-reverse; gap: 12px; margin: 0; min-width: 0; }   /* 그쪽 통계 카드: 숫자 줄 → 12 → 설명(DOM 은 설명 → 숫자 = 읽는 순서) */
.am-stat-k { font-size: var(--am-base); line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--am-muted); white-space: nowrap; }   /* 그쪽 통계 설명 = 본문 18/1.55 w400 · 한 줄 */
.am-stat-v { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.am-stat-v > b { font-size: var(--am-5xl); line-height: 1.02; letter-spacing: -.025em; font-weight: 400; color: var(--am-accent); font-variant-numeric: tabular-nums; font-style: normal; }
.am-stat-v > small { font-size: var(--am-base); line-height: 1; font-weight: 500; color: var(--am-muted); }
.am-stat-v > b[data-gfx-num] { min-width: 0 !important; text-align: left !important; }   /* 그쪽처럼 숫자 왼끝 = 설명 왼끝 · 단위 = 숫자 바로 뒤. 끝 값 칸 폭은 줄(.am-stat-v)이 받음(board-ui am ⑤) → 세는 동안 옆 칸 안 밀림 */
/* 숫자 셋(지문 줄)도 그쪽 값 75.6 그대로 — 1440 글 칸(336)에 둘 + 하나로 넘어감(§24: 54 로 내리지 않음 · 줄 높이 543.5 안) */

/* 구리 액자 창(실측 4-2): 652×512 · 둥글기 8 · 안쪽 머리카락 선 흰 8% · 링 = 창 폭 6%(최대 36 · 폰 21.96) · 안 판 둥글기 6 · 1px 글 12% · #1f1b19
   링 색 = 그쪽 의도 색(셰이더 대체 그러데이션 168deg #463e39 → #ad8068 40% → #4b403b 80% · 크기 = 목록 전체 · 창마다 자리를 밀어 한 장처럼) + 우리 알갱이 + 천천히 흐르는 구리 빛(transform 만 · 화면 밖이면 멈춤) */
.am-win { --am-k: 0; --am-rx: -428px; --am-pitch: 575.5px; --am-wy: 31.5px; --am-sheet-w: 1080px; --am-sheet-h: 2846px;
  position: relative; isolation: isolate; display: flex; height: 512px; min-width: 0; padding: min(36px, 6%); border-radius: 8px; overflow: hidden;
  background: linear-gradient(168deg, #463e39 0%, #ad8068 40%, #4b403b 80%) var(--am-rx) calc(-1 * (var(--am-k) * var(--am-pitch) + var(--am-wy))) / var(--am-sheet-w) var(--am-sheet-h) no-repeat, #4b403b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.am-row--flip > .am-win { --am-rx: 0px; }
.am-row[data-row="02"] > .am-win { --am-k: 1; } .am-row[data-row="03"] > .am-win { --am-k: 2; } .am-row[data-row="04"] > .am-win { --am-k: 3; } .am-row[data-row="05"] > .am-win { --am-k: 4; }
.am-win::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .38; border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.96' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -1.42'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
.am-win::after { content: ""; position: absolute; inset: -35%; z-index: 0; pointer-events: none;
  background: radial-gradient(26% 20% at 70% 28%, rgba(206, 152, 120, .5), transparent 72%), radial-gradient(30% 24% at 26% 74%, rgba(173, 128, 104, .34), transparent 70%), radial-gradient(22% 30% at 84% 82%, rgba(78, 58, 90, .28), transparent 70%); }
.am-win > .am-win-in { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; min-height: 0; border-radius: 6px; border: 1px solid rgba(250, 251, 247, .12); background: #1f1b19; overflow: hidden; overflow: clip;
  container: am-win / size; color: #bbbbb7; color-scheme: dark; font-size: 12px; line-height: 1.55; }
/* 창 안 = 늘 어두운 제품 판(쪽 색 뒤집기와 무관) — 장면 조각 뿌리가 --gfx-* 를 다시 선언해도 이 값 */
.am-win > .am-win-in, .am-win > .am-win-in > * { --gfx-paper: #1f1b19; --gfx-ink: #fafbf7; --gfx-dim: #bbbbb7; --gfx-line: #393634; --gfx-accent: #ff6b2e;
  --st-bg: #1f1b19; --st-bg2: #2a2624; --st-ink: #fafbf7; --st-sub: #dededa; --st-dim: #bbbbb7; --st-line: rgba(250, 251, 247, .12); --st-hair: #393634; --st-rule: #504d4a; --st-ok: #34a36b; --st-shade: rgba(0, 0, 0, .5); --st-accent: #ff6b2e;
  /* 뒤집기 토큰도 창 안에서 고정 — 0.5초 뒤집기 동안 바뀐 값이 장면 속(수백 요소)까지 물려 내려가 프레임마다 다시 계산되는 일 0(폰 CPU 4배 긴 작업 원인) */
  --am-ink: #fafbf7; --am-muted: #989693; --am-line: #35312f; --am-line2: #504d4a; --am-accent: #ff6b2e; --am-paper: #1a1614; --am-pill-bg: #fafbf7; --am-pill-fg: #1a1614; }
@media (prefers-reduced-motion: no-preference) {
  html.anim .am-win::after { animation: am-drift 24s ease-in-out infinite alternate; animation-play-state: paused; will-change: transform; }
  html.anim .am-win.is-vis::after { animation-play-state: running; }
}
@keyframes am-drift { from { transform: translate3d(-7%, -5%, 0) rotate(-4deg); } to { transform: translate3d(7%, 6%, 0) rotate(8deg); } }

/* 무대 끝 가운데 CTA(그쪽 (가) 끝 실측: 목록 아래 틈 48 + CTA 위 안쪽 112 = 마지막 줄 아래 → 제목 160 · 세리프 2xl 한 줄 + 40 + 알약 하나 · 구간 아래 80) */
.hb.hb-end { padding: 160px 0 80px; }
.hb-end .am-cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.hb-end .am-cta > .am-h2s { max-width: 34em; }
.hb-end .hb-kst { position: absolute; left: 0; right: 0; top: 100%; margin: 12px 0 0; color: var(--am-muted); }   /* 카카오 상태 줄 = 흐름 밖(나타나도 구간 높이 그대로) */

/* ── 4. B1 주소 확인 판 → 창 안 판(580×440 · 폰 322×372) — 꺼짐 판(운영) 기준 · 켜짐(입력 줄)은 글 칸으로 ── */
.hb1 .am-txt .hb-anchor { position: absolute; display: block; height: 0; }
.hb1 .am-txt .hb1-in { order: 0; margin-top: 4px; }
.hb1[data-live="off"] .am-txt .hb1-off, html:not(.fxjs) .hb1 .am-txt .hb1-off { display: grid; justify-items: start; gap: 2px; padding: 0; grid-template-columns: none; }
.hb1 .am-txt .hb1-off-t { max-width: none; font-size: var(--am-base); line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--am-muted); text-wrap: pretty; }
.hb1 .am-txt .hb-kst:not(:empty) { margin-top: 4px; font-size: var(--am-sm); color: var(--am-muted); }
.hb1 .am-txt .hb1-form { grid-template-columns: 1fr; gap: 12px; padding: 4px 0 0; border-bottom: 0; }
.hb1 .am-txt .hb1-field { padding-bottom: 10px; border-bottom: 1px solid var(--am-line2); }
.hb1 .am-txt .hb1-form:focus-within .hb1-field { border-bottom-color: var(--am-accent); }
.hb1 .am-txt .hb1-field textarea, .hb1 .am-txt .hb1-typed { font-size: var(--am-lg); line-height: 30px; height: 30px; min-height: 30px; font-weight: 500; color: var(--am-ink); }
.hb1 .am-txt .hb1-field small { font-size: var(--am-xs); color: var(--am-muted); }
.hb1 .am-txt .hb1-btns { gap: 10px; }
.hb1 .am-txt .hb1-btns .hb-btn { min-height: 0; padding: 16px 24px; border-radius: 999px; font-size: var(--am-sm); font-weight: 500; line-height: 1; }
.hb1 .am-txt .hb1-btns .hb-btn.ink { background: var(--am-pill-bg); color: var(--am-pill-fg); }
.hb1 .am-txt .hb1-btns .hb-btn.line { box-shadow: inset 0 0 0 1px var(--am-line2); color: var(--am-ink); }
.am-win .hb1-board { --c-cream: #1f1b19; --c-paper: #1f1b19; --c-sand: #2a2624; --c-sand2: #2a2624; --c-sand3: #2a2624; --c-line: rgba(250, 251, 247, .12); --c-line2: rgba(250, 251, 247, .12); --c-rule: #504d4a;
  --c-mute: #989693; --c-dim: #989693; --c-sub: #dededa; --c-ink: #fafbf7; --c-ink2: #dededa; --c-grey: #989693; --c-or: #ff6b2e; --c-ort: #ff6b2e; --c-orb: transparent; --c-orl: rgba(255, 107, 46, .55); --c-ok: #4cb27e; --c-okb: transparent; --c-okl: rgba(76, 178, 126, .55);
  display: flex; flex-direction: column; height: 100%; min-height: 0; width: auto; margin: 0; color: #fafbf7; }
.am-win .hb1-meta { flex: none; display: flex; align-items: center; gap: 9px; height: 44px; min-height: 0; margin: 0; padding: 0 15px; background: #231f1d; border-bottom: 1px solid rgba(250, 251, 247, .12); font-size: 12px; color: #bbbbb7; }
.am-win .hb1-meta .hb-mk { width: 15px; height: 15px; }
.am-win .hb1-meta .hb-nm { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #fafbf7; }
.am-win .hb1-meta .hb-ex { margin-left: auto; height: 22px; padding: 0 9px; border-color: rgba(250, 251, 247, .16); background: transparent; font-size: 11.5px; font-weight: 500; color: #bbbbb7; }
.am-win .hb1-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0 15px; }
.am-win .hb1-tbl { flex: none; }
.am-win .hb1-foot { order: 9; flex: none; display: flex; align-items: center; gap: 8px; min-height: 33px; margin: auto -15px 0; padding: 7px 15px; border-top: 1px solid rgba(250, 251, 247, .12); }
.am-win .hb1-foot::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ff6b2e; }
.am-win .hb1-limit { font-size: 12px; line-height: 1.45; color: #989693; }
.am-win .hb-stc { height: 22px; padding: 0 8px; font-size: 11.5px; font-weight: 500; border-color: rgba(250, 251, 247, .16); background: rgba(250, 251, 247, .05); color: #fafbf7; }
.am-win .hb-stc.is-line { background: transparent; border-color: #504d4a; color: #bbbbb7; }
.am-win .hb-stc.is-ok { color: #6cc596; border-color: rgba(76, 178, 126, .5); background: transparent; }
.am-win .hb-stc.is-or { color: #ff8a57; border-color: rgba(255, 107, 46, .5); background: transparent; }
.am-win .hb-hop { height: 20px; padding: 0 6px; border-radius: 5px; font-size: 11.5px; font-weight: 500; background: rgba(250, 251, 247, .05); border-color: rgba(250, 251, 247, .12); color: #dededa; }
.am-win .hb-hop + .hb-hop { margin-left: 12px; }
.am-win .hb-hop + .hb-hop::before { left: -9px; width: 4px; height: 4px; margin-top: -2px; background: #504d4a; }
/* 줄: 주소(13.5) / 종류 · 찾은 곳(11.5 흐림) | 상태 칩 — 응답·다음 요청처·메모는 초점 줄에만 */
.am-win .hb1-r, .am-win .hb1-r.has-m { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; min-height: 0; padding: 9px 0; border-bottom: 1px solid rgba(250, 251, 247, .08); font-size: 12px; }
.am-win .hb1-r > .ad { grid-area: 1 / 1 / 2 / 3; font-size: 13.5px; font-weight: 500; color: #fafbf7; }
.am-win .hb1-r > .ty { grid-area: 2 / 1; font-size: 11.5px; font-weight: 500; color: #bbbbb7; }
.am-win .hb1-r > .sf { grid-area: 2 / 2; font-size: 11.5px; color: #989693; }
.am-win .hb1-r > .st { grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; }
.am-win .hb1-r > .hp, .am-win .hb1-r > .nx, .am-win .hb1-r > .m { display: none; }
/* 초점 줄(주인공): 주소 22 · 상태 칩 26 · 둘째 줄 = 종류 · 찾은 곳 · 응답 · 다음 요청처 */
.am-win .hb1-r.is-f { grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; padding: 16px 0 10px; border-bottom: 0; }
.am-win .hb1-r.is-f > .ad { grid-area: 1 / 1 / 2 / 5; font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: -.015em; }
.am-win .hb1-r.is-f > .st { grid-area: 1 / 5; }
.am-win .hb1-r.is-f > .ty { grid-area: 2 / 1; font-size: 12px; color: #fafbf7; }
.am-win .hb1-r.is-f > .sf { grid-area: 2 / 2; font-size: 12px; }
.am-win .hb1-r.is-f > .hp { display: flex; grid-area: 2 / 3; }
.am-win .hb1-r.is-f > .nx { display: block; grid-area: 2 / 5; justify-self: end; font-size: 12px; font-weight: 500; color: #dededa; }
.am-win .hb1-r.is-f .st .hb-stc { height: 26px; padding: 0 11px; font-size: 12.5px; border: 1px solid #fafbf7; background: transparent; color: #fafbf7; }
.am-win .hb1-strk { border-bottom: 1px dashed rgba(250, 251, 247, .16); }
.am-win .hb1-strip dl { gap: 8px 26px; padding: 2px 0 12px; }
.am-win .hb1-strip dl > div { gap: 4px; }
.am-win .hb1-strip dt { font-size: 11px; color: #989693; }
.am-win .hb1-strip dd { font-size: 12px; font-weight: 500; color: #fafbf7; line-height: 1.4; }
.am-win .hb-chain { gap: 4px 8px; font-size: 12px; font-weight: 500; color: #bbbbb7; }
.am-win .hb-chain b { font-weight: 500; color: #fafbf7; }
.am-win .hb-chain i + i::before, .am-win .hb-chain b + i::before { width: 10px; margin: 0 8px 3px 0; background: #504d4a; }
.am-win .hb1-fly { top: 16px; height: 30px; }
.am-win .hb1-fly > span { font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: -.015em; color: #fafbf7; }
.am-win .hb1-live { flex: none; }
.am-win .hb1-div { min-height: 30px; font-size: 11.5px; }
.am-win .hb1-r.t2 { display: none; }   /* 창 안 판 높이(440 · 폰 372)에 맞춰 꼬리 줄 = 셋(t1 · t3 · 늦은 t4) · 폰 = 둘 */

/* ── 5. 진행 줄(찾기·가려내기·요청·확인) — 흐름 자리 0 · 무대 줄(01~05)에서 머리줄 아래 붙었을 때만 보임(.is-on) · 이름표 결 · 유리 겹 ── */
.hb-prog { --prog-h: 40px; margin-bottom: calc(-1 * var(--prog-h)); height: var(--prog-h); border-bottom: 1px solid var(--am-line);
  background: color-mix(in srgb, var(--am-paper) 78%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hb-prog::before { background: color-mix(in srgb, var(--am-paper) 78%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hb-prog-in { width: min(100% - 2 * var(--am-gutter), var(--am-col)); }
.hb-prog-in > li { gap: 12px; font-size: var(--am-xs); font-weight: 600; letter-spacing: .01em; line-height: 1.5; color: var(--am-muted); }
.hb-prog-in > li.is-now { font-weight: 600; color: var(--am-accent); }
.hb-prog-in > li.is-past { color: var(--am-ink); }
.hb-prog.is-idx:not(.is-demo) .hb-prog-in > li { color: var(--am-muted); }
.hb-prog-in > li:not(:last-child)::after { margin-right: 12px; background: var(--am-line) linear-gradient(var(--am-ink), var(--am-ink)) no-repeat 0 0 / 0% 100%; }
.hb-prog-in > li.is-past::after { background-size: 100% 100%; }
.hb-prog-in > li > span::after { content: none; }
html.hb-prog-on .hb-prog:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html.hb-prog-on .hb-prog { transition: opacity .3s var(--am-ease-ui), visibility 0s, transform .2s var(--am-ease-ui); }
  html.hb-prog-on .hb-prog:not(.is-on) { transition: opacity .2s var(--am-ease-ui), visibility 0s .2s, transform .2s var(--am-ease-ui); }
  html.anim.hb-sch.hb-prog-on .hb-prog { transition: opacity .3s var(--am-ease-ui), visibility 0s, transform .2s var(--am-ease-ui), var(--st-tr), var(--am-tr); }
  html.anim.hb-sch.hb-prog-on .hb-prog:not(.is-on) { transition: opacity .2s var(--am-ease-ui), visibility 0s .2s, transform .2s var(--am-ease-ui), var(--st-tr), var(--am-tr); }
}
html:not(.fxjs) .hb-prog { display: none; }

/* ── 6. 등장(그쪽 scroll-reveal: 16px 위로 + 투명도 · 0.8s cubic-bezier(.22,1,.36,1) · 80ms 계단 · 91% 선) · 제목 점 등장(dot-reveal) ── */
@keyframes am-rv { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .am-rv-wait { opacity: 0; }
  html.anim .am-rv-go { animation: am-rv .8s var(--am-ease-rv) backwards; animation-delay: var(--rv-d, 0ms); }
  /* 점 등장: 글자마다 강조색 점 묶음 → 왼쪽부터 글자(강조색 → 0.14s ease-out 글자색) */
  html.anim .am-dots-on .am-dl { position: relative; color: transparent; }
  html.anim .am-dots-on .am-dl::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: var(--am-dotpat); background-repeat: no-repeat; }
  html.anim .am-dots-on .am-dl.is-dot::before { opacity: 1; }
  html.anim .am-dots-on .am-dl.is-ch { color: var(--am-accent); }
  html.anim .am-dots-on .am-dl.is-ch::before { opacity: 0; }
  html.anim .am-dots-on .am-dl.is-in { color: var(--am-ink); transition: color .14s ease-out; }
}
.am-dl { font: inherit; }
/* §26-4 숫자 올라가기 [data-am-count](board-ui ⑥ · 1.4s easeOutCubic · 세는 동안 칸 폭 = 끝 값 폭) · 통계 카드 [data-am-stat] 점 차오름 [data-am-fill]
   (그쪽 5-1: 찬 점 겹 clip-path inset(100% 0 0) → inset(0) · 덜 차는 기둥 = --am-fill-top · 1.4s cubic-bezier(.2,.7,.2,1) · 숫자와 같은 순간 · 아래 → 위)
   포스터(JS 꺼짐·모션 줄이기·이미 본 카드) = 끝 값 · 다 찬 점. 표시 방식은 담당 2 규칙이 이기게 :where(0 특정도). */
:where([data-am-count]) { display: inline-block; font-variant-numeric: tabular-nums; }
[data-am-fill] { clip-path: inset(var(--am-fill-top, 0%) 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  html.anim [data-am-stat].am-stat-wait [data-am-fill] { clip-path: inset(100% 0 0 0); }
  html.anim [data-am-stat].is-on [data-am-fill] { transition: clip-path 1.4s cubic-bezier(.2, .7, .2, 1); }
}

/* ── 7. 반응형: lg(1024) 아래 = 한 칸(이름표 → 창 366×416 → 글 · 틈 20 · 왼쪽 4) · 줄 사이 48 · 위 여백 64/48 ── */
@media (max-width: 1023px) {
  .am-row, .am-row--flip { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "tag" "win" "txt"; gap: 20px; }   /* 그쪽 li gap-5 = 20(창 → 글) */
  .am-row > .am-tag { margin-bottom: -8px; }   /* 이름표 → 창 = 12(그쪽 창 칸 안 gap-3) */
  .am-row > .am-txt { justify-content: flex-start; padding: 0 4px; }
  .am-win { height: 416px; --am-rx: 0px; --am-pitch: 690px; --am-wy: 30px; --am-sheet-w: 100%; --am-sheet-h: 3420px; }
  .hb.hb-dif { padding-top: 64px; }
  #why-aboutus.hb1 { padding-top: 40px; }
  main > section.hb-gfx.hb-stage { padding-top: 48px; }
  .hb.hb-end { padding: 128px 0 64px; }   /* 40 + 88 */
  main > section.hb-dif:not(.cv-open) { contain-intrinsic-block-size: auto 160px; }
  main > section.hb1.hb-stage:not(.cv-open), main > section.hb-gfx.hb-stage:not(.cv-open) { contain-intrinsic-block-size: auto 720px; }
  .am-stats { gap: 16px 20px; }
}
@media (max-width: 639px) {
  .hb.hb-dif { padding-top: 48px; }
  .hb.hb-end { padding: 96px 0 48px; }   /* 40 + 56 */
  .am-stats { gap: 16px 20px; }
  .am-stats[data-n="3"] { gap: 16px 16px; }
  /* B1 창 안(322×372): 초점 줄 = 주소 한 줄(17) / 종류 · 찾은 곳 | 상태 칩 · 띠 = 이동한 주소 + 요청 순서 · 줄 = 2개(t1·t3) · 발치 두 줄 */
  .am-win .hb1-meta { height: 40px; padding: 0 12px; }
  .am-win .hb1-main { padding: 0 12px; }
  .am-win .hb1-foot { margin: auto -12px 0; padding: 7px 12px; align-items: flex-start; }
  .am-win .hb1-foot::before { margin-top: 6px; }
  .am-win .hb1-r.is-f { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; padding: 13px 0 9px; }
  .am-win .hb1-r.is-f > .ad { grid-area: 1 / 1 / 2 / 4; font-size: 17px; line-height: 24px; }
  .am-win .hb1-r.is-f > .ty { grid-area: 2 / 1; }
  .am-win .hb1-r.is-f > .sf { grid-area: 2 / 2; }
  .am-win .hb1-r.is-f > .st { grid-area: 2 / 3; }
  .am-win .hb1-r.is-f > .hp, .am-win .hb1-r.is-f > .nx { display: none; }
  .am-win .hb1-r.is-f .st .hb-stc { height: 24px; padding: 0 9px; font-size: 12px; }
  .am-win .hb1-strip dl { gap: 6px 18px; padding: 0 0 10px; }
  .am-win .hb1-strip .k2 { display: none; }
  .am-win .hb1-strip .k3 { flex-basis: 100%; }
  .am-win .hb1-r { padding: 8px 0; }
  .am-win .hb1-r > .ad { font-size: 13px; }
  .am-win .hb1-fly { top: 13px; height: 24px; }
  .am-win .hb1-fly > span { font-size: 17px; line-height: 24px; }
}
@media (max-width: 379px) {
  .am-win .hb1-r.is-f > .ad { font-size: 16px; }
  .am-win .hb1-strip dd.hp .hb-hop { padding: 0 5px; }
}

/* §25(11-04 14:4x 사장님 "진짜 200% 똑같이") — 리드 통합: 그쪽에 없는 무대 진행 줄(찾기·가려내기·요청·확인 붙음 줄)은 뺌 → 줄마다 번호 이름표(01~05)만.
   폰 머리줄은 그쪽 390 처럼 안 따라옴(첫 화면 바이트·모양 그대로 — 붙음 규칙만 · .hdx 는 쪽 맨 위 relative 자리). */
nav.hb-prog { display: none !important; }
@media (max-width: 767px) { .hdx:not(.is-open):not(.is-sheet) > .hdx-bar { position: absolute; } }   /* framex.css(뒤에 실림) .hdx-bar{fixed} 보다 세게 · 메뉴 열림은 그대로 고정 */

/* 16:1x 리드: 구간 큰 제목 줄 수를 그쪽과 같게(1440 2줄 · 폰 3줄) — 글자 크기·자간 그대로, 줄 폭만 */
.hb-dif .hb-dif-t { max-width: 12em; }
/* §26-3 명조 굵기(리드 기준 '그쪽 400 · 어두운 바탕에서 가늘면 500'): 밝은 구간 = 400 그대로 · 어두운 구간(무대 첫 제목 · 끝 CTA · 상담 · 끝 띠 · 바닥 링크) = 500
   (Noto Serif KR 400 은 #1a1614 위에서 가로획이 가늘어 흐림 — 눈 비교 polish/3/cmp-dif·cmp-b5.png). 구간마다 고정(색 뒤집기 때 굵기 안 바뀜 = 다시 배치 0). */
.hb-dif .hb-dif-t, .hb-end .am-h2s, html .hb.hb5 .hb-h, html .hb.hb5 .hb5-wh, html .s7x .say h2, html .ft.ft7 .ft-col li > a { font-weight: 500; }
@media (max-width: 767px) { .hb-dif .hb-dif-t { max-width: 7em; } }

/* 16:3x 리드(사장님 "200% 똑같이"): 그쪽엔 화면에 떠 있는 단추가 없음 → 떠 있는 카카오 알약(aside.dockx) 뺌.
   연락 길은 그대로: 데스크톱 붙는 머리줄 '카카오로 상황 말하기' · 01 줄 '카카오 상담 →' · 가운데 CTA · B5 상담 · 끝 띠. 되살리려면 이 줄만 지움. */
aside.dockx { display: none !important; }

/* ── 8. hover · 누름(§26-4 · 그쪽 §6 실측 · 전환 .15s cubic-bezier(.4,0,.2,1)) — 담당 3 ──
   그쪽 hover 유틸 전부(_raw 덤프 셈): text-ink-muted 72(바닥 링크) · bg-raised-fill 20 + group-hover:text-ink 20(연구 기록 카드) · text-ink 7 · bg-ink/90 4(알약)
   · bg-ink/10 2(원 단추) · decoration-ink 1(글 링크) · bg-ink/5 1 — active·scale 규칙 0 → 누름 = hover 와 같은 값(크기 바뀜 0).
   공용 새 클래스(담당 2 새 카드용 · HANDOFF-3): .am-rbtn(32 원 단추) · .am-card(링크 카드 · 제목 .am-card-t · 그림 칸 .am-card-art).
   밝은 구간·끝 띠·바닥 단추는 hover 값이 이미 그쪽 값(am-light.css · s7x.css) → 여기서는 손가락 누름(:active)만 같은 값으로 더함(폰엔 hover 가 없어 누른 느낌 0 이었음).
   알약 hover 투명도 .9 = 바탕 90% 와 화소 같음(글자색 = 쪽 종이색) → 안 바꿈. */
.am-rbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--am-line2); border-radius: 999px; background-color: color-mix(in srgb, var(--am-ink) 5%, transparent); color: var(--am-ink);
  font: inherit; font-size: var(--am-sm); font-weight: 500; line-height: 1; cursor: pointer; transition: background-color .15s var(--am-ease-ui); -webkit-tap-highlight-color: transparent; }
.am-rbtn:is(:hover, :active) { background-color: color-mix(in srgb, var(--am-ink) 10%, transparent); }
.am-rbtn:disabled, .am-rbtn[aria-disabled="true"] { opacity: .5; pointer-events: none; cursor: default; }   /* 그쪽 disabled:opacity-50 · pointer-events-none */
/* 링크 카드(그쪽 연구 기록 article: -m-2 p-2 둥글기 6+8 · transition-colors · [--raised-fill-scale:.6] hover:bg-raised-fill · 제목 ink/75 → group-hover:text-ink)
   raised-fill = 들뜬 판 바탕(밝음 흰 · 어두움 흰 2% — 4-4) × .6 → 밝음 흰 60% · 어두움 흰 1.2%. 밑줄·그림 바뀜·화살표 0(그쪽 없음). */
a.am-card, .am-card { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--am-ease-ui); }
.am-card .am-card-t { transition: color .15s var(--am-ease-ui); }
.am-card:is(:hover, :active) { background-color: rgb(255 255 255 / .6); }
:is(html[data-scheme="dark"], body[data-theme="dark"]) .am-card:is(:hover, :active) { background-color: rgb(255 255 255 / .012); }
.am-card:is(:hover, :active) .am-card-t { color: var(--al-ink, var(--am-ink)); }
.am-card:focus-visible, .am-rbtn:focus-visible { outline: 2px solid var(--am-accent); outline-offset: 2px; }
/* 누름(손가락) = hover 와 같은 값 즉시 — 글 링크: 흐린 글 → 글자색 · 밑줄 100% · 화살표 2px / 원 단추: 바탕 10% / 알약: 바탕 90%·투명도 .9 */
.hb .hb2-hub:active, .hb .hb2-sub:active, .hb.hb4 .hb4-lk:active, .hb.hb4 .hb4-more .hb-lnk:active, .hb.hb4 .hb4-hubs .hb-go:active, .hb .hb5-tel:active, .hb.hb5 .hb5-not .hb-go:active, .s7x .btn-line:active, .ft.ft7 .ft-legal a:active { color: var(--al-ink); text-decoration-color: currentColor; }
.hb :is(.hb2-hub, .hb2-sub):active .hb2-ar { transform: translateX(2px); }
.hb.hb4 .hb4-q > summary:active i, .hb.hb4 .hb4-fbtn:active i, .hb.hb5 .who4 a:active i { background: var(--al-soft2); }
.ft.ft7 .ft-col li > a:active { color: var(--al-muted); }
.s7x .btn-kakao:active, .hb .hb5-pill:active { opacity: .9; }
.hb .al-ar-all:active { color: var(--al-ink); }
/* 누름 때 크기·밝기 바뀜 0(그쪽 active·scale 규칙 0) — 첫 화면 아래 단추만 덮음(home.css 공용 .btn-kakao:active scale(.98)·brightness(.95) · am-light .hb5-pill · board .hb-btn).
   첫 화면 단추는 home.css 그대로(바이트·결 그대로). */
html .s7x :is(.btn-kakao, .btn-line):active, html .hb .hb5-pill:active, html .hb .hb-btn:active { transform: none; filter: none; }
:is(.hb2-hub, .hb2-sub, .hb4-lk, .hb-lnk, .hb-go, .hb5-tel, .hb5-pill, .btn-kakao, .btn-line, .hb2-it, .hb4-fbtn) { -webkit-tap-highlight-color: transparent; }
.hb4-q > summary { -webkit-tap-highlight-color: transparent; }
/* B2 상황 목록 줄(그쪽 순찰 줄 hover 실측: 바탕 .72 → 흰 · 글 #5b6466 → #353b37 · 그림자 = 고른 줄 · .35s) — 고른 줄과 같은 결로 */
html .hb.hb2 .hb2-it:not(.is-sel):is(:hover, :active) { background: #fff; color: var(--al-ui); box-shadow: 0 12px 26px -14px rgba(116, 65, 35, .3), 0 1px 3px rgba(116, 65, 35, .1); }

/* 18:1x 리드: 밝은 바탕 명조 제목도 500 — 담당 3 획 굵기 실측(그쪽 0.0864em · 우리 500 0.0840 · 400 0.0692)으로 500 이 더 가까움 */
html .hb:is(.hb2, .hb3, .hb4) .hb-h, html .hb.hb4 .hb4-fh, html .hb .al-ar-t { font-weight: 500; }