/* 후후 비눗방울 랜딩 — 2차 다듬기(2026-10-25). 토큰 → 기본 → 구성 요소 → 페이지 → 반응형 → 모션 순서. */
:root{
  --sky:#eaf4fb;--paper:#f6f8ef;--white:#fff;--ink:#17312a;--muted:#56665c;
  --blue:#2f6a93;--blue-deep:#245b81;--green:#2e6b3a;--line:#c7d5d3;--line-soft:#dbe5e4;
  --film-1:#7f74be;--film-2:#f2b6d6;--film-3:#fcbe9e;--film-4:#7cd9af;--film-5:#8ecff5;
  --serif:'Gowun Batang',serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --latin:'Instrument Serif',serif;
  --fs-xs:14px;
  --fs-s:clamp(15px,.9rem + .15vw,16px);
  --fs-body:clamp(17px,1rem + .1vw,18px);
  --fs-l:clamp(19px,1.1rem + .3vw,22px);
  --fs-h3:clamp(20px,1.1rem + .6vw,26px);
  --fs-h2:clamp(32px,1.6rem + 1.4vw,46px);
  --fs-display:clamp(40px,1.6rem + 3.2vw,72px);
  --space-section:clamp(72px,3.4rem + 3.6vw,112px);
  --space-band:clamp(60px,2.8rem + 3vw,96px);
  --radius-s:6px;--radius-m:14px;--radius-l:24px;
  --shadow-1:0 1px 2px rgba(23,49,42,.08);
  --shadow-2:0 1px 2px rgba(23,49,42,.06),0 12px 32px -16px rgba(23,49,42,.3);
  --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.3,.64,1);
  --dur-fast:160ms;--dur-rise:600ms;
  --header-h:80px;--wrap:1200px;--gutter:40px;
}
@property --sheen{syntax:'<angle>';inherits:true;initial-value:210deg}
*{box-sizing:border-box}
/* 비누막 광택: --sheen은 요소에서 해석되도록 각 그리는 요소에 직접 선언 */
.blow-button::before,.tiny-ring,.specimen-visual::after,.mark::before{background:conic-gradient(from var(--sheen),var(--film-1),var(--film-2),var(--film-3),var(--film-4),var(--film-5),var(--film-1))}
.observation,.specimen{transition:--sheen 400ms var(--ease)}
html{scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2{font-family:var(--serif);font-weight:700;text-wrap:balance;letter-spacing:-.03em;line-height:1.22}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.35;letter-spacing:-.02em;text-wrap:balance;font-weight:700}
p{text-wrap:pretty}
p+p{margin-top:14px}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:5px}
a,button{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit}
button:disabled{cursor:default}
:where(a,button,summary):focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
#main:focus{outline:none}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--wrap);width:calc(100% - var(--gutter)*2);margin-inline:auto}
.skip{position:absolute;z-index:40;left:20px;top:12px;padding:10px 18px;background:var(--white);border-radius:var(--radius-s);box-shadow:var(--shadow-2);transform:translateY(-200%)}
.skip:focus{transform:none}
.num,.eyebrow>span,.spec-number,.space-num,.step-number,.toc-num{font-variant-numeric:tabular-nums}

/* 헤더 */
.site-header{position:sticky;top:0;z-index:30;background:var(--sky);background:color-mix(in srgb,var(--sky) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header>.wrap{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;gap:12px;align-items:center;min-height:44px;color:inherit;text-decoration:none;flex-shrink:0}
.brand img{border-radius:11px;width:44px;height:44px}
.brand span{font-weight:700;font-size:16px;line-height:1.3;letter-spacing:-.02em}
.brand em{display:block;font-family:var(--latin);font-weight:400;font-size:18px;letter-spacing:0;color:var(--muted)}
.site-header nav{display:flex;align-items:center;gap:8px}
.site-header nav>a:not(.button){font-size:15px;font-weight:500;text-decoration:none;min-height:44px;min-width:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border-radius:var(--radius-s)}
.site-header nav>a:not(.button):hover{background:rgba(255,255,255,.55)}
.site-header nav>a[aria-current]{text-decoration:underline;text-underline-offset:7px;text-decoration-color:var(--blue)}
.header-cta{margin-left:10px}

/* 버튼·링크 */
.button{display:inline-flex;min-height:52px;gap:14px;align-items:center;justify-content:center;background:var(--blue);color:var(--white);border:1px solid var(--blue);border-radius:99px;padding:12px 26px;text-decoration:none;font-size:16px;font-weight:600;line-height:1.4;box-shadow:var(--shadow-1);transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.button:hover{background:var(--blue-deep);border-color:var(--blue-deep);box-shadow:var(--shadow-2)}
.button:active{transform:scale(.98)}
.button:focus-visible{outline-offset:3px;border-radius:99px}
.header-cta{min-height:44px;font-size:14px;padding:10px 20px;gap:10px}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:var(--fs-s);text-decoration:none;border-bottom:1px solid currentColor;transition:color var(--dur-fast) var(--ease),gap var(--dur-fast) var(--ease)}
.text-link:hover{color:var(--blue-deep);gap:14px}
.quiet-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:10px;color:var(--blue);padding:8px 18px;background:transparent;border:1px solid #6d8ca3;border-radius:99px;font-size:var(--fs-xs);font-weight:600;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.quiet-button:hover{background:rgba(255,255,255,.7);border-color:var(--blue)}
.quiet-button:active{transform:scale(.98)}
.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600;line-height:1.5;color:var(--ink)}
.eyebrow>span{margin-right:14px;color:var(--blue)}
.caption,figcaption{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.caption{margin-top:20px}
figcaption{margin-top:12px}
.lead{font-size:var(--fs-l);line-height:1.6;letter-spacing:-.02em}
kbd.ui{font-family:inherit;font-weight:600;font-size:.92em;padding:1px 8px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--white);color:var(--ink);white-space:nowrap;box-shadow:var(--shadow-1)}

/* 스크린샷 공통 — 기기 프레임 없이 실제 모서리 반경과 2겹 그림자만 */
.shot-phone{border-radius:var(--radius-l);box-shadow:var(--shadow-2),0 0 0 1px rgba(23,49,42,.1)}
.shot-phone.shot-crop-top{border-radius:var(--radius-l) var(--radius-l) var(--radius-s) var(--radius-s)}
.shot-pad{border-radius:var(--radius-m);box-shadow:var(--shadow-2),0 0 0 1px rgba(23,49,42,.1)}
.shot-watch{border-radius:22%/18%;box-shadow:var(--shadow-1)}
.shot-wide{border-radius:var(--radius-m);box-shadow:var(--shadow-2)}
.shot-crop{border-radius:var(--radius-s);box-shadow:var(--shadow-1),0 0 0 1px rgba(23,49,42,.08)}

/* 섹션 리듬 */
main>section{margin-bottom:var(--space-section)}
main>section.section-band{padding:var(--space-band) 0;background:var(--paper)}
main>section.hero{margin-bottom:var(--space-section)}
.section-heading{margin-bottom:48px}
.section-heading>.eyebrow{margin-bottom:16px}
.section-intro{margin-top:20px;max-width:600px;color:var(--muted);font-size:var(--fs-s)}

/* 히어로 */
.hero{display:grid;grid-template-columns:1.3fr 1fr;column-gap:56px;padding-top:16px}
.observation{grid-area:1 / 1 / 2 / 3;position:relative;aspect-ratio:2.8/1;overflow:hidden;border-radius:var(--radius-s);background:#a9c6d8;box-shadow:var(--shadow-2)}
.observation-photo{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.static-bubbles{position:absolute;inset:0;pointer-events:none;transform-origin:50% 56%}
.static-bubbles img{position:absolute;width:170px;top:32%;left:28%}
.static-bubbles img:nth-child(2){width:95px;top:18%;left:49%}
.static-bubbles img:nth-child(3){width:66px;top:46%;left:59%}
.static-bubbles img:nth-child(4){width:112px;top:57%;left:39%}
#bubble-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.blow-button{position:absolute;bottom:28px;right:34px;width:76px;height:76px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:var(--blue);color:var(--white);display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow-2);transition:box-shadow 140ms var(--ease),background 140ms var(--ease),transform 140ms var(--spring)}
.blow-button svg{width:32px;height:32px}
.blow-button::before{content:'';position:absolute;inset:-6px;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));opacity:0;transition:opacity 200ms var(--ease)}
.observation:hover .blow-button::before,.blow-button:focus-visible::before,.blow-button[aria-pressed=true]::before{opacity:.8}
.blow-button:hover{background:var(--blue-deep)}
.blow-button[aria-pressed=true]{box-shadow:0 0 0 5px rgba(255,255,255,.5),var(--shadow-2);background:var(--blue-deep);transform:scale(.96)}
.blow-button:focus-visible{outline:2px solid var(--white);outline-offset:3px;box-shadow:0 0 0 7px var(--ink)}
.observation-controls{grid-area:2 / 1 / 3 / 3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0 0;color:var(--muted);font-size:var(--fs-xs)}
.observation-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.observation-label .demo-tag{color:var(--muted)}
.observation-label .demo-tag::before{content:'·';margin-right:10px}
.tiny-ring{display:inline-block;flex-shrink:0;width:16px;height:16px;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));opacity:.85}
.demo-controls{display:flex;align-items:center;gap:16px}
.quiet-button{white-space:nowrap;flex-shrink:0}
.demo-controls>span{white-space:nowrap}
.hero-copy{grid-area:3 / 1 / 4 / 2;padding-top:36px}
.hero-copy>.eyebrow{margin-bottom:18px}
.hero-actions{display:flex;gap:26px;align-items:center;margin-top:28px;flex-wrap:wrap}
.price-note{font-size:var(--fs-xs);color:var(--muted);margin-top:16px}
.price-note span{display:inline-block}
.hero-aside{grid-area:3 / 2 / 4 / 3;padding-top:72px}
.hero-aside>p:nth-child(2){font-size:var(--fs-s);color:var(--muted);margin-top:14px}
.hero-ui{margin-top:28px;max-width:400px}
.hero-ui img{width:100%}
.hero-ui figcaption{margin-top:8px}

/* 01 엽서 */
.postcards{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:28px;align-items:start}
.postcard{position:relative}
.postcard:nth-child(2){margin-top:64px}
.postcard:nth-child(3){margin-top:24px}
.postcard:nth-child(4){margin-top:104px}
.postcard img{width:100%;height:240px;object-fit:cover;object-position:50% 50%;border:8px solid var(--white);border-radius:2px;box-shadow:var(--shadow-2)}
.postcard:nth-child(2) img{height:190px}
.postcard:nth-child(3) img{height:270px}
.postcard:nth-child(4) img{height:180px}
.postcard h3{font-size:19px;margin-top:18px}
.postcard p{font-size:var(--fs-s);color:var(--muted);margin-top:6px}

/* 02 도감 */
.specimen-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);background:rgba(255,255,255,.35)}
.specimen{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px;min-height:320px;display:flex;flex-direction:column;transition:background var(--dur-fast) var(--ease)}
.specimen:hover{background:rgba(255,255,255,.75)}
.specimen.giant{grid-row:span 2}
.spec-number{font-size:13px;font-weight:600;color:var(--muted)}
.specimen-visual{position:relative;height:140px;width:100%}
.specimen.giant .specimen-visual{flex:1;min-height:350px}
.specimen-visual img{max-width:none;height:auto;position:absolute;transform:translate(-50%,-50%);transition:transform var(--dur-rise) var(--ease)}
.specimen:hover .specimen-visual img{transform:translate(-50%,calc(-50% - 6px))}
.specimen-visual::after{content:'';position:absolute;left:50%;top:50%;width:120px;height:120px;border-radius:50%;transform:translate(-50%,-50%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));opacity:0;transition:opacity 300ms var(--ease);pointer-events:none}
.specimen.giant .specimen-visual::after{width:240px;height:240px}
.specimen:hover .specimen-visual::after{opacity:.6}
.spec-label{margin-top:auto}
.spec-label h3{font-size:19px}
.spec-label p{font-size:var(--fs-xs);color:var(--muted);margin-top:6px;line-height:1.6;min-height:44px}
.spec-label small{font-size:var(--fs-xs);color:var(--green);display:block;margin-top:14px;font-weight:500}

/* 03 공간 */
.space-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.space img{width:100%;aspect-ratio:2.25/1;object-fit:cover;object-position:50% 50%;border-radius:var(--radius-s);box-shadow:var(--shadow-1)}
.space figcaption{display:grid;grid-template-columns:28px 1fr auto;gap:0 14px;align-items:center;margin-top:16px;color:var(--ink)}
.space-num{font-size:13px;color:var(--muted)}
.space h3{font-size:22px}
.wind{width:56px;height:18px;color:var(--blue);justify-self:end;overflow:visible}
.wind path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.wind.left{transform:scaleX(-1)}
.space figcaption p{grid-column:2/4;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.space-how{display:grid;grid-template-columns:1fr 300px;gap:80px;align-items:center;max-width:860px;margin:72px auto 0;padding-top:48px;border-top:1px solid var(--line)}
.space-how h3{font-family:var(--serif);font-size:clamp(26px,1.4rem + 1vw,32px);margin-top:16px;letter-spacing:-.03em}
.space-how p:not(.eyebrow){font-size:var(--fs-s);color:var(--muted);margin-top:20px}
.space-how a{margin-top:20px}
.space-how figure{max-width:236px;justify-self:center}

/* 04 다섯 놀이 */
.mode-rows{border-bottom:1px solid var(--line)}
.mode-row{display:grid;grid-template-columns:1fr 320px;gap:80px;align-items:center;border-top:1px solid var(--line);padding:48px 64px;min-height:400px}
.mode-row:nth-child(even){grid-template-columns:320px 1fr}
.mode-row:nth-child(even) .mode-copy{order:2}
.mode-row h3{font-family:var(--serif);font-size:clamp(26px,1.4rem + 1.1vw,34px);margin-top:14px;letter-spacing:-.03em}
.mode-copy>p:not(.eyebrow){margin-top:20px;max-width:470px}
.mode-copy .ui-flow{font-size:var(--fs-xs);color:var(--green);background:var(--white);display:table;padding:8px 14px;border-radius:var(--radius-s);box-shadow:var(--shadow-1)}
.mode-copy .text-link{margin-top:12px}
.mode-row figure{max-width:190px;justify-self:center}
.physics-note{margin-top:48px;max-width:740px}
.physics-note h3{margin-top:14px;font-size:var(--fs-h3)}
.physics-note p:not(.eyebrow){margin-top:14px;color:var(--muted);font-size:var(--fs-s)}
.physics-note a{margin-top:12px}

/* 05 입력·기기 */
.table-wrap{width:100%}
.input-table{border-collapse:collapse;width:100%;font-size:var(--fs-s);text-align:left}
.input-table caption{text-align:left;margin-bottom:14px;color:var(--muted);font-size:var(--fs-xs)}
.input-table th,.input-table td{padding:20px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.input-table thead th{border-top:1px solid var(--ink);font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.input-table tbody th{font-size:var(--fs-body);font-weight:600}
.input-table td{color:var(--muted)}
.vision-wide{margin-top:48px}
.vision-wide img{width:100%;aspect-ratio:2/1;object-fit:cover}
.other-devices{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:center;margin-top:48px}
.other-devices>figure{max-width:300px;justify-self:center}
.watch-shots{display:flex;gap:16px;max-width:500px}
.watch-shots img{width:calc((100% - 32px)/3)}
.watch-panel h3{margin-top:28px}
.watch-panel>p{font-size:var(--fs-s);margin-top:12px}
.watch-panel>.caption{margin-top:12px}

/* 06 사용 방법 */
.quick-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;margin:0 0 44px;gap:32px}
.quick-steps li{position:relative;border-top:1px solid var(--line);padding-top:20px}
.quick-steps li::after{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,var(--film-5),var(--film-1) 30%,var(--film-2) 55%,var(--film-3) 75%,var(--film-4));opacity:.9}
.step-number{font-size:var(--fs-xs);display:block;margin-bottom:24px;color:var(--blue);font-weight:600}
.quick-steps h3{font-size:19px}
.quick-steps p{margin-top:12px;color:var(--muted);font-size:var(--fs-s)}

/* 07 소리·데이터 */
.privacy-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:72px}
.sound-flow{display:flex;align-items:center;gap:18px;padding:20px 0;border-block:1px solid var(--line);font-size:var(--fs-s);font-weight:600;margin-bottom:24px;flex-wrap:wrap}
.sound-flow span:nth-child(even){color:var(--blue)}
.privacy-layout p{font-size:var(--fs-s);color:var(--muted)}
.privacy-layout a{margin-top:14px}
.safety{border-left:1px solid var(--line);padding:4px 0 0 40px}
.safety h3{font-size:21px;margin:14px 0}
.safety p+p{margin-top:12px}
.free-line{display:flex;align-items:center;gap:72px;border-top:1px solid var(--line);margin-top:64px;padding-top:36px}
.free-line h2{font-size:var(--fs-display)}
.free-line p{font-size:var(--fs-l)}
.free-line span{font-size:var(--fs-xs);color:var(--muted);display:block;margin-top:8px}

/* 08 FAQ */
.faq-list{border-top:1px solid var(--line);margin-bottom:24px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;gap:24px;align-items:center;justify-content:space-between;cursor:pointer;min-height:76px;padding:18px 4px;font-weight:600;font-size:var(--fs-body);line-height:1.5;border-radius:var(--radius-s)}
summary::-webkit-details-marker{display:none}
summary>span{font-size:26px;font-weight:300;flex-shrink:0;min-width:24px;text-align:center;color:var(--blue);transition:transform 200ms var(--ease)}
details[open] summary>span{transform:rotate(45deg)}
details p{padding:0 48px 26px 4px;color:var(--muted);max-width:850px;font-size:var(--fs-s)}
html.js details[open] p{animation:faq-in 240ms var(--ease) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 마무리 */
.final-cta{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:center}
.final-cta>div:first-child img{width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:var(--radius-s);box-shadow:var(--shadow-2)}
.final-cta h2{margin:18px 0 30px}
.final-cta .text-link{margin-left:22px}
.final-cta .caption{max-width:420px}

/* 푸터 */
.site-footer{background:var(--ink);color:var(--paper);padding:52px 0 28px}
.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;align-items:start}
.footer-top>p{grid-column:1;font-size:var(--fs-s);color:#c9d7d0}
.footer-top .brand em{color:#c9d7d0}
.footer-links{grid-column:2;grid-row:1/3;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.site-footer a:not(.brand){color:var(--sky);font-size:var(--fs-xs);min-height:44px;padding:0 10px;display:inline-flex;align-items:center;text-decoration:none;border-radius:var(--radius-s)}
.site-footer a:not(.brand):hover{text-decoration:underline;text-underline-offset:5px}
.site-footer :focus-visible{outline-color:var(--sky)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:32px;border-top:1px solid #42564b;margin-top:32px;padding-top:12px;font-size:13px;color:#c9d7d0;flex-wrap:wrap}
.family{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.family>span{font-size:13px;margin-right:8px}

/* 모바일 하단 CTA 바(JS·≤640px에서만) */
.mobile-cta{display:none}

/* 가이드 */
.guide-cover{padding:40px 0 48px;border-bottom:1px solid var(--line)}
main>section.guide-cover{margin-bottom:0}
.guide-cover h1{margin-top:18px;font-size:clamp(40px,1.5rem + 2.8vw,64px)}
.guide-cover>.lead{margin-top:22px;max-width:640px}
.guide-toc{position:sticky;top:var(--header-h);z-index:20;background:var(--sky);background:color-mix(in srgb,var(--sky) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-bottom:24px}
.guide-toc>.wrap{display:flex;align-items:center;gap:8px;min-height:56px}
.toc-label{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-right:12px;flex-shrink:0}
.toc-toggle{display:none}
.guide-toc ol{list-style:none;display:flex;gap:2px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;flex:1}
.guide-toc ol::-webkit-scrollbar{display:none}
.guide-toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;font-size:var(--fs-xs);font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;border-radius:var(--radius-s);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.guide-toc a .toc-num{color:var(--muted);font-size:12px}
.guide-toc a:hover{color:var(--blue)}
.guide-toc a[aria-current]{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.guide-toc a[aria-current] .toc-num{color:var(--blue)}
.guide-section,.guide-modes,.device-guide,.guide-trouble,.guide-mode{scroll-margin-top:calc(var(--header-h) + 72px)}
.guide-section{display:grid;grid-template-columns:1fr 440px;gap:80px;align-items:center;padding:56px 0 64px;border-bottom:1px solid var(--line)}
main>section.guide-section,main>section.guide-modes,main>section.device-guide{margin-bottom:0}
.guide-copy h2{font-size:clamp(30px,1.4rem + 1.4vw,40px);margin:14px 0 22px}
.guide-copy p,.guide-copy li,.guide-copy dd{font-size:var(--fs-s)}
.guide-copy ol,.guide-copy ul,.guide-mode ol{padding-left:22px;margin:20px 0}
.guide-copy li+li,.guide-mode li+li{margin-top:12px}
.guide-copy strong,.guide-mode strong{font-weight:600}
.guide-visual>img{max-width:280px;margin-inline:auto}
.guide-visual>figcaption{max-width:420px;margin:16px auto 0}
.ui-recreation{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-l);padding:26px;max-width:440px;color:#17201c;box-shadow:var(--shadow-2)}
.recreation-label{font-size:var(--fs-xs)!important;color:var(--muted);margin-bottom:20px}
.ui-recreation h3{font-size:28px;font-weight:700;margin-bottom:16px;letter-spacing:-.02em}
.ui-recreation>p:not(.recreation-label){font-size:var(--fs-xs);line-height:1.65;color:var(--muted)}
.ui-item{display:flex;gap:16px;align-items:flex-start;margin-top:26px}
.ui-item strong,.ui-option strong{font-size:17px;font-weight:700;letter-spacing:-.02em}
.ui-item p{font-size:var(--fs-xs);line-height:1.6;margin-top:4px;color:var(--muted)}
.ui-symbol{font-size:24px;line-height:1.2;min-width:28px;color:#0065d1}
.ui-button{background:#0065d1;color:var(--white);font-weight:700;text-align:center;border-radius:13px;padding:12px;margin-top:28px;font-size:20px}
.tip{padding:18px 22px;border-left:2px solid var(--blue);background:rgba(255,255,255,.6);font-size:var(--fs-xs);line-height:1.7;margin-top:24px;color:var(--muted);border-radius:0 var(--radius-s) var(--radius-s) 0}
.screen-legend{margin:0}
.screen-legend>div{margin-bottom:20px}
.screen-legend dt{font-weight:600;font-size:var(--fs-s)}
.screen-legend dd{margin:4px 0 0;color:var(--muted)}
.annotated{position:relative}
.annotated>img{width:100%}
.mark{position:absolute;width:26px;height:26px;display:grid;place-items:center;font-weight:700;font-size:13px;line-height:1;color:var(--ink);background:var(--white);border-radius:50%;box-shadow:var(--shadow-1)}
.mark::before{content:'';position:absolute;inset:-3px;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));opacity:.9}
.mark-space{left:61%;top:16%}.mark-settings{right:1%;top:16%}.mark-mode{left:3%;top:54%}.mark-style{left:2%;bottom:2%}.mark-waft{right:3%;bottom:2%}.mark-input{left:43%;bottom:12%}
.ui-quote{font-size:var(--fs-xs);padding:16px;color:var(--muted);background:var(--white);margin-top:16px;border-radius:var(--radius-s);box-shadow:var(--shadow-1)}
.ui-option{position:relative;background:#f4f4f4;border-radius:12px;padding:16px 36px 16px 16px;margin-top:14px}
.ui-option p{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.6}
.ui-check{position:absolute;right:15px;top:18px;color:#0065d1;font-weight:700}
.ui-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0;font-size:var(--fs-s)}
.ui-toggle>span{width:46px;height:28px;background:var(--green);border-radius:20px;flex-shrink:0;position:relative}
.ui-toggle>span:after{content:'';position:absolute;width:24px;height:24px;top:2px;right:2px;border-radius:50%;background:var(--white)}
.ui-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
.ui-heading span{color:#0065d1;font-size:var(--fs-s);font-weight:600}
.ui-setting-row{margin-top:24px;padding:16px 0;border-bottom:1px solid #e1e6e3;font-weight:600;display:flex;justify-content:space-between}
.ui-family-label{margin-top:24px!important;font-size:var(--fs-xs)!important}
.ui-family-row{display:flex;gap:10px;justify-content:space-between;align-items:center;border-bottom:1px solid #e1e6e3;padding:14px 0;font-size:var(--fs-xs)}
.ui-family-row small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.ui-family-row>span{font-size:13px;flex-shrink:0;color:var(--muted)}
.guide-modes{padding:56px 0 64px;border-bottom:1px solid var(--line)}
.guide-mode{display:grid;grid-template-columns:300px 1fr;gap:80px;align-items:center;padding:44px 48px;border-top:1px solid var(--line)}
.guide-mode figure{max-width:200px;justify-self:center}
.guide-mode h3{font-family:var(--serif);font-size:clamp(26px,1.4rem + 1vw,32px);margin:12px 0 22px;letter-spacing:-.03em}
.guide-mode p,.guide-mode li{font-size:var(--fs-s)}
.guide-mode p{color:var(--muted)}
.guide-modes>.tip{max-width:860px}
.device-guide{padding:56px 0 64px;border-bottom:1px solid var(--line)}
.device-guide-row{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:center;margin-top:48px}
.device-guide-row figure{max-width:300px}
.device-guide-row:nth-child(2) figure{max-width:165px;justify-self:center}
.device-guide-row:last-of-type figure{max-width:235px;justify-self:center}
.device-guide-row h3{margin-bottom:18px}
.device-guide-row li,.device-guide-row p{font-size:var(--fs-s)}
.device-guide-row p{color:var(--muted)}
.guide-trouble{padding-top:64px}
.guide-trouble>p{color:var(--muted);font-size:var(--fs-s)}
.guide-trouble>.button{margin-top:24px}
.guide-trouble>.text-link{margin-left:24px}
.not-found{padding:96px 0 140px}
.not-found h1{margin:24px 0}
.not-found .button{margin-top:32px}
.not-found .text-link{margin-left:24px}

/* ───── 반응형 ───── */
@media(max-width:1050px){
  :root{--gutter:32px}
  .site-header nav{gap:4px}
  .hero{column-gap:32px}
  .hero-aside{padding-top:56px}
  .hero-actions{gap:16px}
  .observation-label{gap:2px 10px}
  .observation-label .demo-tag{flex-basis:100%;padding-left:26px}
  .observation-label .demo-tag::before{content:none}
  .postcards{gap:18px}
  .postcard img{height:205px}
  .postcard:nth-child(3) img{height:215px}
  .specimen{padding:18px;min-height:300px}
  .specimen.giant .specimen-visual{min-height:335px}
  .specimen-visual.giant img{width:155px!important}
  .mode-row{padding:36px 24px;gap:40px;grid-template-columns:1fr 230px}
  .mode-row:nth-child(even){grid-template-columns:230px 1fr}
  .other-devices{grid-template-columns:300px 1fr;gap:32px}
  .privacy-layout{gap:36px}
  .sound-flow{gap:12px}
  .safety{padding-left:24px}
  .guide-section{grid-template-columns:1fr 340px;gap:40px}
  .guide-mode{grid-template-columns:240px 1fr;gap:44px;padding:36px 16px}
  .device-guide-row{grid-template-columns:280px 1fr;gap:40px}
  .final-cta{gap:36px}
  .final-cta .text-link{margin:12px 0 0}
}
@media(min-width:761px) and (max-width:940px){
  .hero-copy{grid-area:1 / 1 / 2 / 3;padding-top:8px;margin-bottom:32px}
  .observation{grid-area:2 / 1 / 3 / 3;aspect-ratio:2.4/1}
  .observation-controls{grid-area:3 / 1 / 4 / 3}
  .hero-aside{grid-area:4 / 1 / 5 / 3;display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;padding-top:40px;align-items:start}
  .hero-aside>p:nth-child(2){grid-column:1;margin-top:8px}
  .hero-ui{grid-column:2;grid-row:1/3;margin-top:0;align-self:center}
}
@media(max-width:760px){
  :root{--header-h:72px;--gutter:28px}
  .site-header nav{gap:2px}
  .header-cta{display:none}
  .hero{grid-template-columns:1fr 1fr;column-gap:24px;padding-top:8px}
  .hero-copy{grid-area:1 / 1 / 2 / 3;padding-top:0;margin-bottom:28px}
  .observation{grid-area:2 / 1 / 3 / 3;aspect-ratio:2/1}
  .observation-controls{grid-area:3 / 1 / 4 / 3;flex-wrap:wrap;gap:8px 20px}
  .hero-aside{grid-area:4 / 1 / 5 / 3;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;padding-top:40px;align-items:start}
  .hero-aside>p:nth-child(2){grid-column:1;margin-top:8px}
  .hero-ui{grid-column:2;grid-row:1/3;margin-top:0;align-self:center}
  .postcards{grid-template-columns:1fr 1fr;gap:24px}
  .postcard:nth-child(2){margin-top:36px}
  .postcard:nth-child(3){margin-top:0}
  .postcard:nth-child(4){margin-top:44px}
  .postcard img,.postcard:nth-child(3) img{height:230px}
  .postcard:nth-child(2) img,.postcard:nth-child(4) img{height:190px}
  .specimen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specimen.giant .specimen-visual{min-height:340px}
  .space-how{gap:32px;grid-template-columns:1fr 230px}
  .mode-row,.mode-row:nth-child(even){grid-template-columns:1fr 185px;gap:32px;padding:36px 0;min-height:0}
  .mode-row:nth-child(even) .mode-copy{order:0}
  .input-table{font-size:var(--fs-xs)}
  .input-table th,.input-table td{padding:16px 8px}
  .input-table tbody th{font-size:var(--fs-s)}
  .other-devices{grid-template-columns:210px 1fr;gap:32px}
  .watch-shots{gap:10px}
  .watch-shots img{width:calc((100% - 20px)/3)}
  .quick-steps{grid-template-columns:1fr 1fr;gap:32px}
  .privacy-layout{grid-template-columns:1fr}
  .safety{border-left:0;border-top:1px solid var(--line);padding:28px 0 0;max-width:520px}
  .free-line{gap:32px}
  .final-cta{grid-template-columns:1fr 1fr;gap:28px}
  .footer-top{grid-template-columns:1fr}
  .footer-links{grid-column:1;grid-row:auto;justify-content:flex-start;margin-left:-10px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .guide-section{grid-template-columns:1fr;gap:32px}
  .guide-visual{width:100%;max-width:460px;margin-inline:auto}
  .guide-visual>img{max-width:260px}
  .guide-mode{grid-template-columns:180px 1fr;gap:36px}
  .guide-mode figure{max-width:180px}
  .device-guide-row{grid-template-columns:230px 1fr;gap:32px}
  html.js .toc-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px 0 0;background:none;border:0;font-size:var(--fs-xs);font-weight:600;color:var(--ink);text-align:left}
  html.js .toc-toggle::after{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform 200ms var(--ease)}
  html.js .toc-toggle[aria-expanded=true]::after{transform:rotate(225deg) translateY(-1px)}
  html.js .toc-label{display:none}
  html.js .guide-toc>.wrap{flex-wrap:wrap;padding:4px 0}
  html.js .guide-toc ol{display:none;flex-basis:100%;flex-wrap:wrap;gap:0 8px;padding:4px 0 12px}
  html.js .guide-toc ol.is-open{display:flex}
  .guide-toc ol{flex-wrap:wrap;gap:0 4px;padding:6px 0}
}
@media(max-width:540px){
  :root{--gutter:20px;--space-section:64px}
  body{font-size:17px}
  .site-header>.wrap{gap:12px}
  .brand{gap:9px}
  .brand span{font-size:15px}
  .brand em{font-size:16px}
  .brand img{width:38px;height:38px;border-radius:9px}
  .site-header nav>a:not(.button){font-size:14px;padding:0 10px}
  .hero{display:flex;flex-direction:column}
  .hero-copy{order:0;margin-bottom:28px}
  .hero-copy>.eyebrow{margin:8px 0 16px}
  .hero-copy h1{line-height:1.25}
  .hero-actions{gap:12px 20px;margin-top:22px}
  .hero-actions .button{min-height:48px;padding:12px 20px;font-size:15px}
  .price-note{margin-top:14px}
  .observation{order:1;aspect-ratio:4/3;width:100%}
  .static-bubbles img{width:120px;top:29%;left:14%}
  .static-bubbles img:nth-child(2){width:70px;top:12%;left:50%}
  .static-bubbles img:nth-child(3){width:48px;top:44%;left:63%}
  .static-bubbles img:nth-child(4){width:70px;top:57%;left:36%}
  .blow-button{width:64px;height:64px;right:18px;bottom:18px}
  .blow-button svg{width:28px;height:28px}
  .observation-controls{order:2;display:block;padding-top:12px}
  .demo-controls{justify-content:space-between;margin-top:10px}
  .demo-controls>span{white-space:normal}
  .hero-aside{order:3;display:block;padding-top:40px}
  .hero-ui{margin-top:20px;max-width:none}
  .section-heading{margin-bottom:32px}
  .section-intro{margin-top:16px}
  main>section.section-band{padding:var(--space-band) 0}
  .postcards{gap:26px 16px}
  .postcard img,.postcard:nth-child(3) img{height:185px;border-width:5px}
  .postcard:nth-child(2) img,.postcard:nth-child(4) img{height:150px}
  .postcard:nth-child(2),.postcard:nth-child(4){margin-top:36px}
  .postcard h3{font-size:17px;margin-top:12px}
  .specimen{padding:16px 14px;min-height:280px}
  .specimen-visual{height:124px}
  .specimen.giant .specimen-visual{min-height:330px}
  .specimen-visual.giant img{width:143px!important}
  .specimen-visual.classic img,.specimen-visual.rainbow img{width:63px!important}
  .specimen-visual.twin img,.specimen-visual.foam img{scale:.86}
  .specimen-visual::after{width:104px;height:104px}
  .specimen.giant .specimen-visual::after{width:190px;height:190px}
  .spec-label h3{font-size:17px}
  .spec-label p{min-height:0}
  .space-grid{grid-template-columns:1fr;gap:28px}
  .space img{aspect-ratio:1.9/1}
  .space figcaption{margin-top:12px}
  .space h3{font-size:20px}
  .space-how{grid-template-columns:1fr;gap:28px;margin-top:44px;padding-top:32px}
  .space-how figure{max-width:236px;justify-self:start}
  .mode-row,.mode-row:nth-child(even){display:flex;flex-direction:column;align-items:stretch;gap:26px;padding:36px 0}
  .mode-row figure{order:0;max-width:200px;align-self:center}
  .mode-copy,.mode-row:nth-child(even) .mode-copy{order:1}
  .mode-row h3{margin-top:12px}
  .mode-copy>p:not(.eyebrow){margin-top:16px}
  .physics-note{margin-top:36px}
  .input-table,.input-table tbody{display:block;width:100%}
  .input-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .input-table caption{display:block}
  .input-table tr{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;border-top:1px solid var(--line);padding:20px 0}
  .input-table th,.input-table td{display:block;padding:0;border:0}
  .input-table tbody th{grid-column:1/3;font-size:19px}
  .input-table tbody td{font-size:var(--fs-xs)}
  .input-table td:before{display:block;color:var(--muted);font-size:12px;margin-bottom:2px;letter-spacing:.03em}
  .input-table td:nth-child(2):before{content:'마이크'}
  .input-table td:nth-child(3):before{content:'불기 버튼'}
  .input-table td:nth-child(4):before{content:'스페이스바'}
  .input-table td:nth-child(5):before{content:'바람 보내기'}
  .input-table td:nth-child(6){grid-column:1/3}
  .input-table td:nth-child(6):before{content:'요구 사항'}
  .vision-wide{margin-top:32px}
  .vision-wide img{aspect-ratio:1.4/1}
  .other-devices{grid-template-columns:1fr;gap:32px;margin-top:36px}
  .other-devices>figure{max-width:236px;justify-self:start}
  .watch-shots{gap:10px}
  .watch-panel h3{margin-top:20px}
  .quick-steps{gap:28px 20px;margin-bottom:28px}
  .step-number{margin-bottom:16px}
  .quick-steps h3{font-size:17px}
  .quick-start .button,.final-cta .button{font-size:15px;padding-inline:20px}
  .privacy-layout{gap:24px}
  .sound-flow{gap:10px;padding:16px 0}
  .free-line{align-items:flex-start;gap:24px;margin-top:40px;padding-top:28px}
  .free-line h2{flex-shrink:0;font-size:48px}
  .free-line p{font-size:17px}
  summary{min-height:68px;gap:16px;padding:16px 2px}
  details p{padding:0 16px 22px 2px}
  .final-cta{display:flex;flex-direction:column;gap:28px;align-items:stretch}
  .final-cta>div:first-child img{aspect-ratio:1.6;object-position:50% 45%}
  .final-cta h2{margin:16px 0 24px}
  .final-cta .text-link{margin-left:16px}
  .site-footer{padding-top:36px}
  .footer-top{gap:12px}
  .footer-bottom{margin-top:24px;padding-top:14px}
  .family>span{width:100%;margin:0}
  .guide-cover{padding:24px 0 36px}
  .guide-cover>.lead{margin-top:16px}
  .guide-section{padding:40px 0 48px;gap:28px}
  .guide-copy h2{margin:12px 0 20px}
  .guide-visual>img{max-width:250px}
  .ui-recreation{border-radius:18px;padding:22px 20px}
  .ui-recreation h3{font-size:24px}
  .ui-item{gap:12px;margin-top:22px}
  .ui-item strong,.ui-option strong{font-size:16px}
  .tip{padding:16px 18px;margin-top:22px}
  .mark{width:24px;height:24px;font-size:12px}
  .guide-modes{padding:40px 0 48px}
  .guide-mode{display:flex;flex-direction:column;gap:24px;padding:32px 0;align-items:stretch}
  .guide-mode figure{max-width:200px;align-self:center}
  .guide-mode h3{margin:10px 0 18px}
  .device-guide{padding:40px 0 48px}
  .device-guide-row{grid-template-columns:1fr;gap:24px;margin-top:36px;padding-bottom:32px;border-bottom:1px solid var(--line)}
  .device-guide-row:last-child{border:0;padding-bottom:0}
  .device-guide-row figure,.device-guide-row:last-of-type figure{max-width:245px;justify-self:start}
  .device-guide-row:nth-child(2) figure{max-width:150px;justify-self:start}
  .device-guide-row h3{font-size:22px}
  .guide-trouble{padding-top:48px}
  .guide-trouble>.text-link{margin-left:0;margin-top:12px;display:flex;width:fit-content}
  .not-found{padding:64px 0 90px}
}
@media(max-width:640px){
  html.js .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:var(--sky);background:color-mix(in srgb,var(--sky) 96%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform 260ms var(--ease);visibility:hidden}
  html.js .mobile-cta.is-shown{transform:none;visibility:visible}
  .mobile-cta p{font-size:13px;color:var(--muted);line-height:1.4}
  .mobile-cta strong{display:block;font-size:14px;color:var(--ink);font-weight:600}
  .mobile-cta .button{min-height:44px;padding:8px 18px;font-size:14px;gap:8px;flex-shrink:0}
  html.js.has-cta-bar .site-footer{padding-bottom:calc(28px + 72px + env(safe-area-inset-bottom))}
}

/* ───── 모션 언어 「숨의 리듬」 ─────
   1) 떠오름: 등장은 아래 14px에서 위로, 600ms, 형제 70ms 간격(최대 6)
   2) 숨: 관찰 창의 정지 방울 한 무리만 7초 주기로 커졌다 작아짐(idle 1개, 화면 밖·탭 숨김·reduce 정지)
   3) 비누막: hover·포인터 각도로 도는 무지개 광택 선(불기 버튼·표본·번호 링)
   4) 바람: 공간 카드의 풍향 선, 사용 방법 단계의 비누막 선이 등장 때 한 번 그려짐(날숨 900ms) */
html.js [data-rise]{opacity:0;transform:translateY(14px);transition:opacity var(--dur-rise) var(--ease),transform var(--dur-rise) var(--ease);transition-delay:calc(var(--i,0)*70ms)}
html.js [data-rise].is-in{opacity:1;transform:none}
html.js .observation{animation:hero-in 600ms var(--ease) both}
@keyframes hero-in{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
html.js .static-bubbles{animation:breathe 7s ease-in-out infinite}
html.js .static-bubbles.is-paused{animation-play-state:paused}
@keyframes breathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.04) translateY(-5px)}}
html.js .quick-steps li::after{transform:scaleX(0);transition:transform 900ms var(--ease) calc(var(--i,0)*90ms + 200ms)}
html.js .quick-steps li.is-in::after{transform:scaleX(1)}
html.js .wind path{stroke-dasharray:70;stroke-dashoffset:70}
html.js .is-in .wind path{stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--ease) 240ms}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js [data-rise]{opacity:1;transform:none}
  html.js .wind path{stroke-dashoffset:0}
  html.js .quick-steps li::after{transform:scaleX(1)}
  .specimen:hover .specimen-visual img{transform:translate(-50%,-50%)}
  .blow-button[aria-pressed=true],.button:active,.quiet-button:active{transform:none}
}