/* 한태희: 문구 너머의 사람. Layout and art direction sit above reusable UI primitives. */
:root {
  --bg: #fff;
  --text: #211c29;
  --muted: #6c6576;
  --line: #e2dfe7;
  --surface-soft: #f5f3f7;
  --ink: #6f42c1;
  --paper-purple: #f0eaf8;
  --page-gutter: clamp(24px, 5vw, 88px);
  --font-body: 17px;
}
html { scroll-padding-top: 88px; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #ffb800; color: #211c29; }
main { width: 100%; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:hover { outline: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 6px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -4px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-header { padding: 16px var(--page-gutter); min-height: 76px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: none; gap: 32px; }
.brand-logo { width: 56px; height: auto; }
.top-nav { gap: 20px; }
.header-action { border: 0; border-radius: 4px; padding: 0 16px; min-height: 40px; }
.content-section, .content-section--auto, .contact-section { min-height: 0; padding: 120px var(--page-gutter); scroll-margin-top: 76px; }
.content-section--auto .split-content-section, .content-section--auto .feature-section-group { transform: none; }
.section-copy { margin: 0; }
.tds-top--section { --section-title-size: clamp(34px, 3.8vw, 54px); }
.tds-top--section .tds-top__title { font-weight: 800; letter-spacing: -.055em; word-break: keep-all; }
.tds-top--section .tds-top__subtitle--bottom { color: var(--muted); margin-top: 24px; max-width: 480px; word-break: keep-all; }
.text-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; background: transparent; border-radius: 0; border-bottom: 1px solid currentColor; padding: 8px 0; font-weight: 700; color: var(--ink); min-height: 44px; text-decoration: none; }
.text-action:hover { background: transparent; color: var(--text); }
.text-action span { transition: transform .2s ease; }
.text-action:hover span { transform: translate(3px,-3px); }

/* Scene title: 강점 씬의 큰 제목(문서화의 달인 / 인간 카피바라 / 쇠뿔도 단김에).
   크기·굵기·아래 여백은 여기 토큰에서만 정한다. 씬별로는 색만 바꾼다. */
:root {
  --scene-title-size: clamp(56px, 6.2vw, 88px);
  --scene-title-gap: 32px;
  /* 강점 씬 세 개의 좌우 여백. 인간 카피바라 우측 여백(1440px에서 120px)이 기준 */
  --scene-inset: var(--scene-gutter);
}
.scene-title { margin: 0; font-weight: 800; letter-spacing: -.07em; word-break: keep-all; }
.scene-title em { color: var(--ink); font-style: normal; }
.scene-title + * { margin-top: var(--scene-title-gap); }
@media (max-width: 980px) { :root { --scene-title-size: clamp(50px, 9vw, 70px); } }
@media (max-width: 760px) { :root { --scene-title-gap: 24px; --scene-inset: var(--page-gutter); } }
@media (max-width: 600px) { :root { --scene-title-size: clamp(44px, 11vw, 58px); } }

/* One interaction, one name. */
.hero-section { min-height: calc(100svh - 76px); padding: 72px var(--page-gutter) 120px; background: #fff; }
.hero-inner { max-width: 1100px; width: 100%; transform: translateY(-2vh); }
#heroTitle { font-weight: 800; letter-spacing: -.065em; }
/* An earlier no-shimmer version of this rule used to force background/color back to opaque here
   (background:none; color:var(--text); -webkit-text-fill-color:currentColor), which silently
   nulled the background-clip:text gradient the shine effect depends on (styles.css) - the text
   never went transparent so the gradient never had anything to clip through, and the shimmer
   was invisible. Removed; that gradient/color pair is owned entirely by styles.css now. */
.hero-title-highlight { transform: rotate(-4deg); padding: .02em .12em .06em; border-radius: 0; margin-right: .03em; }
.hero-name { display: inline-block; }
.hero-scroll-cue { bottom: var(--space-8); color: var(--ink); width: var(--control-height); height: var(--control-height); }
.hero-scroll-cue svg { width: var(--space-6); height: var(--space-6); }
.hero-scroll-cue path { stroke-width: 3; }
.hero-scroll-cue.is-visible { opacity: 1; animation: none; }
@keyframes name-arrive { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.is-intro-locked body { user-select: none; }
.paper-invitation { position: absolute; z-index: 5; bottom: 28px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 24px; background: var(--text); color: white; box-shadow: 0 5px 24px #211c2920; }
.paper-invitation > span:first-child { font-weight: 700; }
.paper-invitation button { grid-column: 2; grid-row: 1 / 3; padding: 4px 12px; background: white; color: var(--ink); min-height: 44px; }
.paper-invitation button:disabled { opacity: .5; cursor: wait; }
.paper-invitation { pointer-events: auto; }
.paper-invitation__hint { color: #d7cfe3; }

/* A quiet editorial spread follows the paper pile. */
#intro { padding-block: var(--section-space); }
#intro .split-content-section { grid-template-columns: minmax(0, .85fr) minmax(0,1.15fr); gap: var(--layout-gap); align-items: start; max-width: 1260px; }
#intro .split-content-section__title { max-width: 360px; letter-spacing: -.055em; word-break: keep-all; }
.checklist { gap: 16px; padding-top: 12px; }
.checklist li { color: var(--muted); padding-left: 24px; word-break: keep-all; }
.checklist li::before { border: 0; background: none; color: var(--ink); left: 0; width: 12px; height: auto; border-radius: 0; }

/* Three different silhouettes, connected by paper, ink and the same voice. */
#solution { padding: 0; }
.strength-scene { position: relative; padding: 80px var(--page-gutter); }
.strength-copy { position: relative; z-index: 2; }
.strength-copy > p { color: var(--muted); word-break: keep-all; }
.strength-copy > .text-action { margin-top: 24px; }
.strength-scene--documents { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); align-items: center; min-height: 760px; background: var(--paper-purple); }
.document-composition { position: relative; height: 490px; width: 100%; container-type: inline-size; --race-from: 72cqw; --race-to: -24cqw; }
.document-sheet { position: absolute; top: 45px; left: 18%; width: 270px; height: 354px; padding: 28px; background: white; border: 1px solid #d8cfe4; box-shadow: 4px 14px 22px #3b235010; display: flex; flex-direction: column; justify-content: space-between; transition: transform .65s cubic-bezier(.2,.7,.3,1), background .4s; transform-origin: 50% 85%; }
.document-sheet > span { letter-spacing: .08em; }
.document-sheet b { font-weight: 700; letter-spacing: -.06em; }
.document-sheet i { border-bottom: 1px solid var(--line); height: 14px; }
.document-sheet--back { transform: translate(-50px,-24px) rotate(-13deg); background: #e0d3f3; color: #6c548e; }
.document-sheet--middle { transform: translate(72px,-20px) rotate(11deg); background: #fbf9fe; color: #a08ab9; }
.document-sheet--front { transform: rotate(-4deg); z-index: 1; color: var(--ink); }
.document-sheet--front strong { display: block; font-weight: 800; letter-spacing: -.08em; }
.document-sheet--front strong small { margin-left: var(--space-2); font-weight: 700; }
.document-caption { position: absolute; bottom: 6px; left: 18%; color: var(--muted); }
.document-composition.is-organized .document-sheet--back { transform: translate(20px,-20px); }
.document-composition.is-organized .document-sheet--middle { transform: translate(10px,-10px); }
.document-composition.is-organized .document-sheet--front { transform: none; }
.strength-scene--capybara { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 700px; align-items: center; padding-block: 100px 80px; }
.strength-scene--capybara .strength-copy { padding-left: var(--space-9); }
.capybara-portrait { position: relative; margin: var(--space-9) -64px 0 -96px; }
.capybara-portrait img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.capybara-portrait figcaption { text-align: right; padding-right: var(--space-10); margin-top: var(--space-3); color: var(--muted); }
.strength-scene--dozer { background: var(--ink); color: white; padding-block: 40px 32px; overflow: hidden; }
.dozer-topline, .dozer-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dozer-bottomline { border-top: 1px solid #ffffff40; padding-top: 24px; }
.dozer-bottomline .text-action { color: white; }

/* The numbers are proof: open, steady, unanimated. */
#achievements { padding-block: 128px; }
#achievementsTop { display: flex; justify-content: space-between; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--grid-gap); margin-top: var(--space-9); }
.proof-card { padding: 32px 0 40px; background: transparent; border-radius: 0; box-shadow: none; border-top: 1px solid var(--text); }
.proof-icon { display: none; }
.proof-number { color: var(--ink); font-weight: 800; letter-spacing: -.065em; font-variant-numeric: lining-nums tabular-nums; }
.proof-label { margin-top: 12px; font-weight: 700; letter-spacing: -.03em; }
.proof-desc { max-width: 390px; margin-top: 16px; color: var(--muted); word-break: keep-all; }

/* A compact, tactile trajectory; existing 3D mechanics remain intact. */
#career { background: #f5f3f7; grid-template-columns: .9fr 1.1fr; align-items: center; padding-block: var(--section-space); gap: var(--layout-gap); overflow: hidden; }
#careerTop .tds-top__title { max-width: 390px; }
#careerTop .tds-top__subtitle--bottom { max-width: 290px; }
.career-context { margin-top: 28px; color: var(--text); word-break: keep-all; }
.career-instruction { margin-top: 12px; color: var(--muted); }
.career-carousel { min-width: 0; width: 100%; gap: 16px; }
.carousel-stage { height: 400px; }
.carousel-track { height: 330px; }
.carousel-card { border-radius: 4px 8px 8px 4px; padding: 24px; align-items: flex-start; text-align: left; justify-content: flex-start; gap: 20px; color: var(--ink); background: #fff; border: 1px solid #ded6e9; border-left: 9px solid var(--ink); box-shadow: 5px 6px 0 #e5dfed, 8px 9px 0 #fefefe, 10px 16px 24px #211c2912; }
.carousel-card::before { content: '한태희의 작업 기록'; color: var(--muted); padding-bottom: 20px; border-bottom: 1px solid var(--line); width: 100%; }
.carousel-card strong { letter-spacing: -.04em; word-break: keep-all; }
.carousel-card span { color: var(--muted); }
.carousel-card p { margin-top: auto; color: var(--text); }
.carousel-arrow { z-index: 2; flex-shrink: 0; background: white; border: 1px solid #d9d2e2; }

/* The working surface is the visual climax, and always stays usable. */
#projects { padding: 116px var(--page-gutter) 88px; background: var(--paper-purple); }
#projectsTop .tds-top__title { color: var(--ink); }
#projectsTop .tds-top__title-row { align-items: flex-end; gap: 32px; }
#projectsTop .tds-top__right { flex-shrink: 0; }
#projectTabList .tds-tab { background: transparent; }
.project-detail { margin-top: 60px; grid-template-columns: minmax(210px,.29fr) minmax(0,.71fr); gap: var(--space-9); align-items: start; }
.project-brief { background: transparent; border-radius: 0; box-shadow: none; padding: 16px 0; }
.project-brief .badge { padding: 0; background: transparent; color: var(--ink); border-radius: 0; }
.project-brief h3 { margin-top: 16px; letter-spacing: -.045em; word-break: keep-all; }
.project-brief > p { margin-top: 24px; color: var(--muted); word-break: keep-all; }
.project-brief .project-outcome { padding-block: 24px; color: var(--text); border-bottom: 1px solid #d5c9e5; }
.project-outcome strong { display: block; letter-spacing: -.04em; margin-top: 4px; color: var(--ink); }
.demo-shell { border-radius: 8px; box-shadow: 0 16px 40px #42226810; border: 1px solid #ddd3ea; min-width: 0; }
/* 9:16 세로형 폰 화면 비율(첨부 스크린샷 기준) - 카드 프레임은 demo-shell이 아니라 .chat-window
   자체가 갖는다(전화기 한 대가 놓인 모습), 그래서 chat 탭의 demo-shell은 카드 장식을 걷어내고
   중앙 정렬 컨테이너 역할만 한다. 영업구역 지도 탭(.zone-demo)은 그대로 영향받지 않는다. */
#project-chatbot .demo-shell { display: flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; border: 0; padding: 20px; }
.chat-demo { padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.chat-window {
  /* 데스크톱 크기는 design-system.css가 잡는다(섹션 높이에 맞춰 비율 그대로 확대).
     여기서는 세로로 쌓이는 좁은 화면(≤980px)의 기본 폭과 프레임 장식만 맡는다 */
  width: min(100%, 340px);
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px #42226825;
  border: 1px solid #ddd3ea;
}
.chat-messages { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Readable quotes, manually explored. No empty portraits or automatic conveyor. */
#workstyle { padding: 112px 0 100px; overflow: hidden; background: #f5f3f7; }
#workstyleTop { padding-inline: var(--page-gutter); }
.review-controls { padding: 0 var(--page-gutter); margin-top: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.review-controls > span { color: var(--muted); }
.review-controls > div { display: flex; gap: 8px; }
.review-controls button { width: 46px; min-height: 46px; border: 1px solid var(--line); border-radius: 50%; }
.review-controls button:disabled { color: #c0b9c8; cursor: default; }
.testimonial-marquee { display: block; margin-top: 36px; padding: 16px var(--page-gutter) 24px; overflow-x: auto; overscroll-behavior-x: contain; mask-image: none; -webkit-mask-image: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-gutter); scrollbar-width: thin; scrollbar-color: #cfc4e1 transparent; }
.testimonial-track { width: max-content; gap: 24px; align-items: stretch; animation: none; transform: none; }
.testimonial-card { width: min(430px,76vw); aspect-ratio: auto; min-height: 260px; padding: 28px 24px; border: 0; border-radius: 20px; box-shadow: 0 1px 2px rgba(31,26,43,.06), 0 8px 24px rgba(31,26,43,.09); background: white; grid-template-rows: auto 1fr auto; gap: 16px; scroll-snap-align: start; }
.testimonial-quote { letter-spacing: -.035em; font-weight: 700; color: var(--text); word-break: keep-all; align-self: start; }
.testimonial-author { font-weight: 500; text-align: right; color: var(--muted); margin-top: 16px; }

/* A printed ticket is the reward, not another UI card. */
#scratch { background: #f6f3fa; padding-block: 88px 112px; align-items: center; }
#scratchTop { width: 100%; text-align: center; }
#scratchTop .tds-top__subtitle--bottom { max-width: none; }
.scratch-ticket { width: min(1020px,100%); padding: 28px 36px 16px; background: #ffb800; margin-top: 48px; transform: rotate(-2deg); box-shadow: 10px 14px 0 #dfd4ef; }
.ticket-heading, .ticket-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ticket-heading { padding-bottom: 24px; border-bottom: 1px dashed #5c421e80; }
.ticket-heading > span:first-child { font-weight: 700; }
.ticket-heading > span:last-child { letter-spacing: .04em; }
.scratch-card { width: 100%; margin: 24px 0 8px; aspect-ratio: 2.7; min-height: 270px; border-radius: 0; box-shadow: none; background: #6f42c1; }
.scratch-content { padding: 32px 48px; background: #fff5d4; color: var(--text); }
.scratch-content p { display: grid; gap: 16px; justify-items: center; }
.scratch-content strong { letter-spacing: -.06em; color: var(--ink); }
.scratch-content p > span { max-width: 580px; word-break: keep-all; }
.scratch-content small { margin-top: 0; }
.scratch-canvas { transition: opacity .45s; }
.scratch-card.is-revealed .scratch-canvas { opacity: 0; pointer-events: none; }
.ticket-footer .text-action { color: var(--text); border-bottom: 0; }
.ticket-footer .text-action:disabled { opacity: .65; cursor: default; }

/* The ending returns to conversation. */
#coffeechat { padding-block: var(--section-space); grid-template-columns: .9fr 1.1fr; gap: var(--layout-gap); }
#coffeechatTop .tds-top__title { max-width: 470px; }
#coffeechatTop .tds-top__subtitle--bottom { max-width: 350px; }
.coffeechat-form { background: transparent; border-radius: 0; padding: 0; box-shadow: none; min-width: 0; }
.coffeechat-form > *, .form-field-row > * { min-width: 0; }
.coffeechat-form .tds-text-field__control, .coffeechat-form .tds-text-area__control, .coffeechat-form .field-input { border-radius: 4px; background: #f5f3f7; }
.form-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-actions .solid-button { border-radius: 4px; min-height: 52px; min-width: 140px; }
#faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--layout-gap); padding-block: var(--section-space); }
#faqTop .tds-top__subtitle--bottom { max-width: 240px; }
.faq-list { margin: 0; width: 100%; }
.faq-item { border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.faq-item:first-child { border-top: 1px solid var(--text); }
.faq-item button { min-height: 80px; padding: 20px 0; gap: 20px; background: transparent; word-break: keep-all; }
.faq-answer { color: var(--muted); }
.faq-item.is-open .faq-answer { padding: 0 32px 28px 0; }
/* 토글임을 알 수 있게 글자(⌄) 대신 선으로 그린 쉐브론을 쓴다. */
.faq-item b { width: 32px; height: 32px; }
.faq-item b::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.faq-item button:hover b { color: var(--text); }
#contact { padding-top: 76px; padding-bottom: 72px; border-top: 1px solid var(--line); }
#contactTop .tds-top__subtitle--bottom { max-width: none; }
.contact-actions { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-actions button, .contact-actions a { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; min-height: 88px; background: transparent; color: var(--ink); border-radius: 0; border-top: 1px solid var(--ink); letter-spacing: -.04em; font-weight: 700; text-decoration: none; }
.contact-actions button:hover, .contact-actions a:hover { color: var(--text); }
#kpi { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--layout-gap); padding-block: var(--section-space); background: #f5f3f7; align-items: center; }
#kpi { border-bottom: 1px solid var(--line); }
#kpiTop .tds-top__subtitle--bottom { margin-top: 8px; max-width: 320px; }
.kpi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin: 0; }
.kpi-grid article { background: none; padding: 0; box-shadow: none; border-radius: 0; text-align: left; align-items: start; }
.kpi-grid article strong { letter-spacing: -.05em; color: var(--text); }
.site-footer { padding: 40px var(--page-gutter); background: white; margin: 0; border: 0; }
.footer-grid { margin-top: 16px; justify-content: space-between; gap: 20px; }
.copyright { margin-top: 24px; }

@media (min-width: 1600px) {
  :root { --page-gutter: max(80px,calc((100vw - 1440px)/2)); }
}
@media (max-width: 1050px) {
  .site-header { gap: 16px; }
  .strength-scene--documents { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); min-height: 690px; }
  .document-sheet { width: 235px; height: 330px; left: 16%; }
  .document-sheet--back { transform: translate(-24px,-20px) rotate(-10deg); }
  .document-sheet--middle { transform: translate(38px,-15px) rotate(9deg); }
  .document-caption { left: 10%; }
  .strength-scene--capybara .strength-copy { padding-left: 0; }
  #projectsTop .tds-top__title-row { flex-wrap: wrap; align-items: flex-start; }
  #projectsTop .tds-top__right { width: 100%; }
  .project-detail { grid-template-columns: minmax(190px,.3fr) minmax(0,.7fr); gap: 32px; }
  #coffeechat { gap: var(--layout-gap); }
}
@media (max-width: 760px) {
  :root { --page-gutter: 24px; }
  .site-header { min-height: 68px; padding-block: 8px; grid-template-columns: 1fr auto; }
  .brand-logo { width: 47px; }
  .top-nav { display: none; }
  .header-action { min-height: 42px; }
  .content-section, .content-section--auto, .contact-section { padding-block: 80px; scroll-margin-top: 68px; }
  .hero-section { min-height: calc(100svh - 68px); padding-block: 80px 120px; }
  .hero-inner { transform: translateY(-2vh); }
  .hero-title-highlight { padding-inline: .1em; }
  .hero-scroll-cue { bottom: var(--space-8); }
  .paper-invitation { gap: 4px 12px; padding: 12px; bottom: 22px; }
  .paper-invitation__hint { max-width: 160px; }
  .paper-invitation button { padding-inline: 8px; }
  #intro { padding-block: 84px 96px; }
  #intro .split-content-section { grid-template-columns: 1fr; gap: 32px; }
  #intro .split-content-section__title { max-width: 290px; }
  .checklist { gap: 16px; }
  #solution { padding: 0; }
  .strength-scene { padding: 60px var(--page-gutter); }
  .strength-copy > .text-action { margin-top: 16px; }
  .strength-scene--documents { grid-template-columns: 1fr; gap: 36px; min-height: 0; }
  .document-composition { width: min(100%,420px); margin: 0 auto; height: 390px; --race-from: 60cqw; --race-to: -60cqw; }
  .document-sheet { width: 220px; height: 290px; top: 25px; left: calc(50% - 110px); padding: 24px; }
  .document-sheet--back { transform: translate(-26px,-6px) rotate(-9deg); }
  .document-sheet--middle { transform: translate(26px,-8px) rotate(7deg); }
  .document-caption { left: 0; width: 100%; text-align: center; bottom: 0; }
  .strength-scene--capybara { grid-template-columns: 1fr; min-height: 0; gap: 0; padding-block: 72px 56px; }
  .capybara-portrait { margin: var(--space-5) -16px 0 var(--space-4); }
  .capybara-portrait figcaption { padding-right: 24px; margin-top: 0; }
  .strength-scene--dozer { padding-block: 32px; }
  .dozer-topline { align-items: flex-start; flex-direction: column; gap: 16px; }
  .dozer-bottomline { align-items: flex-start; flex-direction: column; gap: 16px; padding-top: 20px; }
  #achievements { padding-block: 88px 72px; }
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 40px; }
  .proof-card { padding-block: 24px 32px; }
  .proof-number { letter-spacing: -.065em; }
  .proof-label { word-break: keep-all; }
  #career { grid-template-columns: 1fr; padding-block: 56px 32px; gap: 32px; }
  #careerTop .tds-top__title { max-width: 290px; }
  .career-carousel { max-width: 540px; justify-self: center; }
  .carousel-stage { height: 380px; }
  #projects { padding-block: 76px; }
  #projectsTop .tds-top__title-row { gap: 24px; }
  #projectsTop .tds-top__subtitle--bottom { margin-top: 16px; }
  .project-detail { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .project-brief h3 { margin-top: 8px; }
  .project-brief > p { margin-top: 16px; }
  .project-brief .project-outcome { display: flex; align-items: baseline; justify-content: space-between; padding-block: 8px 16px; }
  #project-chatbot .demo-shell { padding: 8px; }
  .chat-window { width: min(100%, 300px); }
  #workstyle { padding-block: 76px; }
  .testimonial-track { gap: 24px; }
  .testimonial-card { width: 80vw; min-height: 320px; }
  #scratch { padding-block: 72px 80px; }
  .scratch-ticket { margin-top: 36px; padding: 16px 16px 8px; transform: rotate(-1.5deg); box-shadow: 6px 8px 0 #dfd4ef; }
  .ticket-heading { padding-bottom: 16px; }
  .ticket-heading > span:last-child { display: none; }
  .scratch-card { min-height: 260px; aspect-ratio: auto; margin-top: 16px; }
  .scratch-content { padding: 24px 20px; }
  .ticket-footer { align-items: flex-start; flex-direction: column; gap: 0; padding-top: 8px; }
  #coffeechat { grid-template-columns: minmax(0, 1fr); padding-block: 88px 56px; gap: 40px; }
  .form-field-row { grid-template-columns: minmax(0, 1fr); }
  #coffeechatTop .tds-top__title { max-width: 320px; }
  #faq { grid-template-columns: 1fr; gap: 32px; padding-block: 56px 80px; }
  #faqTop .tds-top__subtitle--bottom { max-width: none; }
  .faq-item button { min-height: 74px; }
  #contact { padding-block: 60px; }
  .contact-actions { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .contact-actions button, .contact-actions a { min-height: 90px; }
  #kpi { grid-template-columns: 1fr; padding-block: 32px; gap: 24px; }
  .kpi-grid { gap: 16px; }
  .footer-grid { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 380px) {
  :root { --page-gutter: 20px; }
  .form-field-row { grid-template-columns: 1fr; }
  .proof-grid { gap: 0 16px; }
  .document-sheet { width: 202px; left: calc(50% - 101px); }
  .document-sheet--back { transform: translate(-13px,-6px) rotate(-7deg); }
  .document-sheet--middle { transform: translate(11px,-8px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-scroll-cue.is-visible { opacity: 1; }
}

/* UX restoration: original controls, individually sized scenes, content-driven long sections. */
:root { --header-height: 76px; --scene-height: calc(100svh - var(--header-height)); }
html { scroll-padding-top: 0; }
[data-section], [data-scene] { scroll-margin-top: var(--header-height); }
#solution { scroll-margin-top: var(--header-height); }
#kpi { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--space-10); background: var(--paper-purple); border: 0; }
#kpiTop .tds-top__subtitle--bottom { max-width: 600px; margin-top: 24px; }
.kpi-grid { width: 100%; gap: var(--grid-gap); }
.kpi-grid article { border-top: 1px solid #b6a2d3; padding-top: 20px; }
.kpi-grid article strong { color: var(--ink); }
.kpi-grid article:last-child strong { color: var(--text); text-decoration: underline; text-decoration-color: #ffb800; text-underline-offset: .08em; text-decoration-thickness: .07em; }
/* Plain typographic experience stage; retain navigation and drag behavior, remove 3D metaphor. */
#career { background: white; grid-template-columns: .8fr 1.2fr; gap: var(--layout-gap); }
.career-instruction { color: var(--ink); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.carousel-stage { perspective: none; height: auto; min-width: 0; }
.carousel-track { width: 100%; height: auto; transform: none; transform-style: flat; display: grid; min-width: 0; }
.carousel-card { position: static; grid-area: 1 / 1; width: 100%; min-height: 320px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; backface-visibility: visible; display: none; user-select: none; gap: 24px; }
.carousel-card.is-current { display: flex; }
.carousel-card::before { content: none; }
.carousel-card span { order: -1; color: var(--muted); }
.carousel-card strong { color: var(--ink); }
.carousel-card p { margin-top: 0; }
.carousel-arrow { background: transparent; border: 0; }
.testimonial-card { grid-template-rows: auto 1fr auto; gap: 16px; min-height: 0; }
.testimonial-rating { color: var(--secondary); margin-bottom: 12px; }
.review-controls button { border-radius: 8px; width: 44px; }
.review-controls #reviewAutoplay { width: auto; padding: 0 16px; }
/* Values restored from styles.css / bc741d2, including transparent hit-area borders. */
.header-action { min-height: 36px; padding: 0 16px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-radius: 8px; font-weight: 700; background-clip: padding-box; }
.form-actions .solid-button { min-height: 44px; min-width: 0; padding: 0 16px; border-radius: 8px; }
.contact-actions button, .contact-actions a { min-height: 74px; padding: 0 16px; border-radius: 8px; }
.text-action { border: 0; padding: 0 16px; min-height: 44px; border-radius: 8px; font-weight: 700; }
.text-action:hover { background: var(--primary-10); color: var(--primary-100); }
.dozer-bottomline .text-action:hover { background: #ffffff20; color: white; }
.site-footer { background: var(--surface-soft); min-height: 120px; padding: 32px var(--page-gutter) 40px; }
.site-footer .copyright { margin: 0; width: 100%; }
.site-footer .footer-grid { width: 100%; margin: 0 0 12px; justify-content: flex-start; }
@media (min-width: 981px) {
  #hero, #intro, .strength-scene, #kpi, #career, #scratch { min-height: var(--scene-height); }
  /* 데스크톱에서는 모든 섹션이 한 화면을 채운다. 연락처는 푸터(120px)와 합쳐 한 화면. */
  #coffeechat { min-height: var(--scene-height); align-content: center; padding-block: 60px; }
  /* FAQ는 다섯 개를 모두 펼쳐도 한 화면 안에 들어오게 한다. 가운데 정렬이면 여닫을 때마다
     목록 전체가 위아래로 움직여서, 위쪽 고정 + 펼친 높이만큼 아래 여백을 두는 방식으로 둔다. */
  #faq { height: var(--scene-height); min-height: 0; grid-template-columns: .45fr 1.55fr; gap: var(--layout-gap); align-content: start; padding-block: max(var(--faq-offset, var(--space-11)), var(--space-11)) 0; }
  #faq .section-copy { margin-top: 0; }
  .faq-item button { min-height: 0; padding: clamp(12px,1.9vh,20px) 0; }
  .faq-answer { word-break: keep-all; }
  .faq-item.is-open .faq-answer { padding: 0 48px clamp(12px,1.9vh,20px) 0; margin-top: -4px; }
  #contact { min-height: calc(var(--scene-height) - 120px); justify-content: center; padding-block: 60px; }
  #intro, .strength-scene, #kpi, #career, #scratch { padding-block: var(--space-8); }
  #intro { justify-content: center; }
  #intro .split-content-section { align-items: center; }
  .strength-scene--documents { gap: var(--layout-gap); }
  .document-composition { height: clamp(350px,57vh,490px); }
  .strength-scene--capybara .capybara-portrait { margin-top: 0; }
  .capybara-portrait img { max-height: calc(var(--scene-height) - 100px); object-fit: contain; }
  .strength-scene--dozer { display: flex; flex-direction: column; justify-content: space-between; }
  .dozer-topline, .dozer-bottomline { width: 100%; }
  #scratch { justify-content: center; }
  #scratchTop .tds-top__subtitle--bottom { margin-top: 12px; }
  .scratch-ticket { margin-top: 28px; padding-top: 20px; }
  .scratch-card { min-height: 220px; height: clamp(220px,34vh,340px); aspect-ratio: auto; margin-top: 16px; }
  .ticket-heading { padding-bottom: 16px; }
  #projects { min-height: var(--scene-height); padding-block: 24px; }
  #projectsTop .tds-top__subtitle--bottom { margin-top: 8px; }
  .project-detail { margin-top: 20px; grid-template-columns: minmax(210px,.29fr) minmax(0,.71fr); gap: 32px; }
  .project-brief h3 { margin-top: 8px; }
  .project-brief > p { margin-top: 16px; }
  .project-brief .project-outcome { padding-block: 16px; }
  #workstyle { padding-block: 44px; min-height: var(--scene-height); justify-content: center; }
  .review-controls { margin-top: 20px; }
  .testimonial-marquee { margin-top: 40px; }
}
@media (max-width: 980px) {
  #career { grid-template-columns: minmax(0,1fr); }
  .carousel-card { min-height: 260px; }
  .carousel-stage { height: auto; }
  #kpi { padding-block: 72px; gap: 40px; }
}
@media (max-width:640px) {
  .header-action { padding: 0 8px; }
  .review-controls { flex-wrap: wrap; }
}

/* Focused refinement, 2026-09-08. */
.paper { cursor: grab; }
.paper:active { cursor: grabbing; }
#heroTitle.is-revealed { animation: hero-reveal-fade .32s ease-out both, hero-title-shine .38s ease-out .54s both; }
#heroTitle.is-revealed .hero-title-highlight { animation: hero-block-jerk .5s steps(1, end) both; }
@keyframes hero-reveal-fade { from { opacity: .55; } to { opacity: 1; } }
@keyframes hero-block-jerk {
  0%, 20% { transform: rotate(0deg); }
  45% { transform: rotate(-5deg); }
  72% { transform: rotate(-3.5deg); }
  100% { transform: rotate(-4deg); }
}
@keyframes hero-title-shine {
  0%, 100% { text-shadow: none; }
  34% { text-shadow: 0 0 13px #bca7df70; }
  62% { text-shadow: 0 0 5px #bca7df40; }
}
.checklist li { padding-left: 40px; }
.checklist li::after { top: 3px; }
.intro-reading-mark { display: flex; flex-direction: column; align-items: flex-start; margin-top: 44px; letter-spacing: -.04em; font-weight: 500; color: #b1a7bc; }
.intro-reading-mark > span { text-decoration: line-through; text-decoration-thickness: 1px; }
.intro-reading-mark i { height: 20px; }
.intro-reading-mark b { color: var(--ink); font-weight: 700; border-bottom: 3px solid var(--ink); transform: rotate(-3deg); }
.kpi-grid article:last-child strong { color: #c63c4c; text-decoration: none; }
.kpi-grid { align-items: start; }
.kpi-grid article strong { margin-top: 24px; }
.contact-actions button, .contact-actions a { border-top: 0; }

/* The original angular drag model now moves an open field of type, without card surfaces. */
#career { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
#career > .section-copy { display: grid; grid-template-columns: 1.25fr 1fr auto; align-items: end; gap: 28px; }
#careerTop .tds-top__subtitle--bottom { max-width: 380px; }
.career-context { margin: 0; }
.career-instruction { margin: 0; }
.career-carousel { display: block; width: 100%; }
.carousel-stage { height: clamp(340px,48vh,470px); overflow: hidden; margin-inline: calc(-1 * var(--page-gutter)); }
.carousel-track { position: relative; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.carousel-track.is-dragging { cursor: grabbing; }
.carousel-card, .carousel-card.is-current { position: absolute; display: flex; width: min(52vw,660px); min-height: 0; height: auto; left: 50%; top: 16%; padding: 0 24px; gap: 16px; transform-origin: 50% 100%; transform: translateX(calc(-50% + var(--career-offset,0) * 90%)) translateY(calc(var(--career-distance,0) * 45px)) rotate(calc(var(--career-offset,0) * 7deg)) scale(calc(1 - min(var(--career-distance,0),2) * .16)); opacity: calc(1 - min(var(--career-distance,0),2) * .36); transition: transform .45s ease, opacity .45s ease; }
.carousel-track.is-dragging .carousel-card { transition: none; }
.carousel-card[aria-hidden=true] { visibility: hidden; }
.carousel-card::before { content: attr(data-career-number); position: absolute; inset: -30px auto auto -10px; z-index: -1; width: auto; border: 0; padding: 0; font-weight: 800; color: #eee9f7; }
.carousel-card p { max-width: 520px; }
.carousel-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }

/* Original linear duplicated-set marquee, at a readable constant 96px/sec. */
.testimonial-marquee { overflow-x: auto; scroll-snap-type: none; scrollbar-width: none; }
.testimonial-marquee::-webkit-scrollbar { display: none; }
.testimonial-track { animation: testimonial-flow var(--review-duration,55s) linear infinite; }
@keyframes testimonial-flow { to { transform: translateX(calc(-1 * var(--review-loop))); } }
@media (min-width:981px) {
  #achievements { min-height: var(--scene-height); padding-block: var(--space-7); justify-content: center; }
  .proof-grid { margin-top: var(--space-5); gap: 0 var(--grid-gap); }
  .proof-card { padding: 16px 0; }
  .proof-label { margin-top: 8px; }
  .proof-desc { margin-top: 8px; max-width: 500px; }
  #career { justify-content: center; padding-block: 32px; }
}
@media (max-width:980px) {
  #career > .section-copy { grid-template-columns: 1fr auto; gap: 24px; }
  #careerTop { grid-column: 1 / -1; }
  .carousel-card, .carousel-card.is-current { width: min(68vw,560px); }
  .carousel-stage { height: 360px; }
}
@media (max-width:640px) {
  .intro-reading-mark { margin-top: 28px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .intro-reading-mark i { display: none; }
  .carousel-card, .carousel-card.is-current { width: 78vw; padding-inline: 16px; }
  .carousel-stage { height: 350px; }
  .kpi-grid { gap: var(--grid-gap); }
}
@media (prefers-reduced-motion:reduce) {
  .testimonial-track { animation: none; }
  .testimonial-track > [aria-hidden=true] { display: none; }
  .carousel-card { transition: none; }
}
@media (min-width:981px) {
  /* Keep the restored demo intact; put the showcase heading beside it to reclaim vertical space.
     Generalized to whichever panel is active (not just #project-polygon) so the tab/menu control
     in #projectsTop sits at the same spot for both 영업구역 and 챗봇 - only #project-polygon's own
     position was tuned by design, so 챗봇 is made to match it rather than the other way round. */
  /* align-content:stretch - 두 행(제목/설명)이 남는 세로 공간을 나눠 가지면서 그리드 전체가
     섹션 높이를 꽉 채운다. 데모 패널은 두 행을 통째로 span하므로 그대로 섹션 높이만큼
     늘어나고(높이가 콘텐츠가 아니라 섹션에서 오므로 두 탭이 항상 같은 높이다),
     왼쪽 제목(행 1 하단 정렬)과 설명(행 2 상단 정렬)은 서로 붙은 채 세로 가운데에 놓인다. */
  #projects:has(.project-detail.is-active) { display: grid; grid-template-columns: minmax(210px,.29fr) minmax(0,.71fr); grid-template-rows: auto auto; gap: 12px 32px; padding-block: calc(var(--header-height) + var(--space-4)) var(--space-4); align-content: stretch; }
  #projects:has(.project-detail.is-active) #projectsTop { grid-column: 1; align-self: end; }
  #projects:has(.project-detail.is-active) #projectsTop .tds-top__title-row { display: block; }
  #projects:has(.project-detail.is-active) #projectsTop .tds-top__right { margin-top: 20px; }
  .project-detail.is-active { display: contents; }
  /* 두 탭의 설명 줄 수가 달라도 왼쪽 칼럼 높이가 같아야 제목이 제자리에 있는다.
     기준값은 main.js가 영업구역 패널 기준으로 --project-brief-min-height에 넣어 준다 */
  .project-detail.is-active .project-brief { grid-column: 1; padding: 0; align-self: start; min-height: var(--project-brief-min-height, 0px); }
  /* 헤더 아래 영역을 세로로 꽉 채운다. 지도는 그 안에서 남는 높이를 전부 가져가고
     (design-system.css의 .zone-demo 1fr 행), 폰 목업은 같은 높이에 비율을 맞춘다 */
  .project-detail.is-active .demo-shell { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
}

/* Passive motion refinement: existing composition, purpose-specific responses. */
.paper { box-shadow: 0 0 0 15px var(--surface), 0 3px 9px 16px rgba(25,31,40,.10); }
.hero-title-highlight { transform: rotate(0deg); }
.hero-scroll-cue { width: var(--control-height); height: var(--control-height); border-width: 2px; }
.hero-scroll-cue svg { width: var(--space-6); height: var(--space-6); }
.hero-scroll-cue.is-visible { animation: scroll-cue-bounce 2s ease-in-out infinite; }
#intro { background: #f0e9fa; }
.checklist li { transition: color .35s ease, border-color .35s ease; }
.checklist li.is-reading { color: var(--ink); }
.checklist li.is-reading::after { color: var(--ink); }
body { overflow-x: clip; }
#capybara { display: block; height: calc(var(--scene-height) * 1.8); min-height: 0; padding: 0; }
.capybara-sticky { position: sticky; top: var(--header-height); height: var(--scene-height); padding: 36px var(--page-gutter); display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; background: #f0e9fa; transition: background-color .35s ease; overflow: clip; }
#capybara .capybara-portrait { margin-block: 0; }
#capybara .capybara-portrait img { animation: none; filter: none; }
.dozer-bottomline { align-items: end; }
#dozer .dozer-bottomline .text-action { padding-block: 16px; border-bottom: 3px solid currentColor; color: #ffe16b; font-weight: 800; }
.kpi-grid article:last-child strong { color: #ed394b; font-weight: 800; }
.testimonial-marquee .testimonial-track, .testimonial-marquee:hover .testimonial-track, .testimonial-marquee:focus-within .testimonial-track { animation-play-state: running; }
@media (prefers-reduced-motion:no-preference) {
  .testimonial-marquee { overflow-x: hidden; }
  .carousel-track.is-snapping .carousel-card { transition-duration: .8s; }
}
@media (max-width:980px) {
  .capybara-sticky { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 8px; padding-block: 32px; }
  #capybara .strength-copy > .text-action { margin-top: 8px; }
  #capybara .capybara-portrait { align-self: center; min-height: 0; }
  #capybara .capybara-portrait img { max-height: calc(var(--scene-height) - 280px); object-fit: contain; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-scroll-cue.is-visible { animation: none; }
  .capybara-sticky, .checklist li { transition: none; }
  .testimonial-marquee .testimonial-track { animation: none; }
}

/* Keep the workstyle scene within one snap viewport on short desktop screens. */
@media (min-width:981px) {
  #workstyle { height: var(--scene-height); min-height: var(--scene-height); padding-block: 36px; }
}
@media (min-width:981px) and (max-height:760px) {
  #workstyle { height: var(--scene-height); min-height: var(--scene-height); padding-block: 16px; }
  #workstyleTop .tds-top__subtitle--bottom { margin-top: 8px; }
  .review-controls { margin-top: 8px; }
  .testimonial-marquee { margin-top: 28px; padding-bottom: 0; }
  .testimonial-card { width: min(400px,76vw); padding: 24px 24px; gap: 8px; }
  #workstyle .testimonial-card { min-height: 240px; }
  .testimonial-author { margin-top: 8px; }
}

/* 카드는 화면 높이를 다 채우지 않고 고정 높이를 쓴다(내용보다 여유는 있되 빈 칸이 과하지 않게).
   마퀴는 남은 높이 안에서 세로 중앙에 놓이고, 세로 스크롤은 원천 차단해 섹션 스냅을 지킨다.
   트랙의 stretch 덕에 후기 길이가 달라도 카드 높이는 서로 같다. */
#workstyle .testimonial-marquee { display: flex; flex: 0 1 auto; min-height: 0; overflow-y: hidden; align-items: safe center; }
#workstyle .testimonial-track { align-items: stretch; }
#workstyle .testimonial-card { grid-template-rows: auto 1fr auto; min-height: 270px; aspect-ratio: auto; }

@media (max-width:980px) {
  #workstyle { height: var(--scene-height); min-height: var(--scene-height); padding-block: 20px; justify-content: center; }
  /* 좁은 폭에서는 후기가 두어 줄이라 카드도 같이 낮춰야 빈 칸이 과하지 않다 */
  #workstyle .testimonial-card { min-height: 260px; }
  .review-controls { margin-top: 16px; }
  .testimonial-marquee { margin-top: 28px; padding-bottom: 0; }
  /* 좁은 폭에서는 멘트가 26px까지만 커지므로 별점도 같이 낮춰 위계를 유지한다 */
  .testimonial-card { padding: 24px 24px; }
}

@keyframes scroll-cue-bounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }

#dozer .dozer-bottomline .text-action { border-radius: 0; padding-inline: 0; }