/* TwoDo 랜딩·가이드 공통 스타일 (2026-08-21 site-redesign · 2026-08-25 apple-face).
   **이 파일이 사이트 CSS의 유일한 원문이다.** 예전엔 index.html·en/index.html·
   download.html·site_pages.py가 각자 <style>을 들고 있어 네 벌이 따로 낡았다.

   apple-face(2026-08-25): Apple 제품 페이지 문법으로 개편 — 중앙 정렬 대형 타이포,
   유리 내비, 벤토 그리드, 스크롤 리빌([data-rv], landing.js), 서체 IBM Plex →
   Pretendard Variable(jsDelivr)·모노는 시스템(ui-monospace). 팔레트·데모 치수는 그대로다.

   팔레트는 앱 실물에서 끌어왔다 — 나=teal(app/lib/data/widget_bridge.dart의
   kDefaultAccent), 너=coral(app/lib/theme/pair_colors.dart의 kPartnerWarm),
   배경 기준색(theme/tokens.dart의 scaffoldFor). 앱이 그 색을 바꾸면 여기도 바꾼다.

   두 색을 잇는 그라데이션(--pair)이 이 사이트의 표지다. 앱이 항목 행의 왼쪽 띠와
   헤더 선에 쓰는 pairGradient와 같은 뜻이다 — 장식이 아니라 '두 사람'을 가리킨다.
   글자에 얹을 때는 --pair-ink(어두운 판)를 쓴다 — coral 원색은 흰 위 2.5:1이라
   대형 글자 AA(3:1)에도 못 미친다. */

:root{
  --paper:#FBF8F7;      /* 페이지 바탕 — tokens.dart scaffoldFor의 기준색 */
  --card:#FFFFFF;
  --ink:#14302B;        /* 본문 — 짙은 소나무색(teal 계열의 near-black) */
  --muted:#5F6E6A;
  --mine:#0F9488;       /* '나' — kDefaultAccent. 채움(띠·체크·그라데이션) 전용 */
  --mine-text:#0B7268;  /* 같은 계열의 글자·잔UI용. --mine은 흰 글자를 얹으면 3.7:1로 AA 미달 */
  --yours:#F27E6B;      /* '너' — kPartnerWarm */
  --deep:#0B4F49;       /* 마감 CTA 띠 */
  --line:#E8E2DE;       /* 바탕이 웜이라 헤어라인도 웜 */
  --wash:#F4EFEC;       /* 톤 다운한 띠 배경 */
  --pair:linear-gradient(90deg,var(--mine),var(--yours));
  --pair-ink:linear-gradient(92deg,#0B7268 8%,#C2543E 92%); /* 글자용 — 흰 위 3:1 이상 */
  --ring-both:#8A9793;  /* tokens.dart ringBoth — onSurfaceVariant @0.72 */
  --ring-mine:#0F9488;  /* ringMine — 흰 카드 위 3:1을 넘는 나의 색 */
  --ring-yours:#D4573F; /* ringYours — coral 원색은 흰 위 2:1이라 어둡게 잡는다 */
  --neutral:#77837F;    /* 완료 체크 채움 — 강조색이 아니라 중성이다 */
  --due:#4F5D59;        /* 마감 줄 */
  --maxw:1180px;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Apple SD Gothic Neo",monospace;
  --shadow:0 26px 60px -34px rgba(20,48,43,.42);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  word-break:keep-all;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
h1,h2,h3,h4{line-height:1.25;text-wrap:balance}
ul,ol{padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--mine);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 짝 그라데이션 글자 — 지원 안 하면 teal 글자색으로 떨어진다. */
.grad{color:var(--mine-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background:var(--pair-ink);-webkit-background-clip:text;background-clip:text;
        -webkit-text-fill-color:transparent}
}

/* ── 머리띠 — 유리 내비 ─────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,248,247,.72);
     -webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
     border-bottom:1px solid rgba(232,226,222,.7)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:54px;display:flex;align-items:center;gap:18px}
.mark{position:relative;display:inline-block;padding-bottom:5px;font-size:20px;font-weight:700;
      letter-spacing:-.045em;text-decoration:none;color:var(--ink);flex:none}
.mark i{font-style:normal;color:var(--mine)}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--pair)}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
/* 색은 .navlink에만 준다. 예전에 `.nav a`로 뿌렸더니 특이도(0,1,1)가 `.pill`(0,1,0)을
   이겨 머리띠 버튼 글자가 --muted로 깔렸다(1.03:1, 사실상 안 보였다). 이 절에서
   타입 선택자에 color를 얹지 말 것. */
.navlink{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .16s}
.navlink:hover{color:var(--ink)}
.lang-btn{font-size:12px;font-weight:600;letter-spacing:.06em;border:1px solid var(--line);
          border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.7);color:var(--muted);text-decoration:none}
.lang-btn:hover{border-color:var(--mine);color:var(--mine-text)}
@media (max-width:760px){
  .nav .hide-sm{display:none}
  .nav{gap:12px}
}

/* ── 버튼 ───────────────────────────────────────────────────────────────── */
.pill,.pill:hover{color:#fff}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:15px 28px;border-radius:999px;background:var(--ink);color:#fff;
      text-decoration:none;font-weight:600;font-size:16.5px;letter-spacing:-.012em;
      box-shadow:0 10px 22px -14px rgba(20,48,43,.75);
      transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.pill:hover{transform:translateY(-1px);box-shadow:0 16px 30px -16px rgba(20,48,43,.8)}
.pill svg{width:19px;height:19px;fill:currentColor;flex:none}
.pill-teal{background:#0C7A70;box-shadow:0 10px 22px -14px rgba(15,148,136,.9)}
.pill-teal:hover{background:#0A6A61}
.pill-light,.pill-light:hover{color:var(--ink)}
.pill-light{background:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.pill-sm{padding:8px 16px;font-size:14px;gap:7px}
.pill-sm svg{width:15px;height:15px}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}

/* ── 띠·절 — Apple처럼 절마다 크게 숨을 준다 ───────────────────────────── */
.band{padding:96px 0}
@media (min-width:980px){.band{padding:140px 0}}
@media (max-width:700px){.band{padding:64px 0}}
.band-wash{background:var(--wash)}
.band-deep{background:var(--deep);color:#fff;position:relative}
.band-deep::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--pair)}
.inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* 눈썹(kicker) — Apple의 컬러 아이브로. 짝 그라데이션이 곧 '두 사람'이다. */
.kicker{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--mine-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .kicker{display:table;background:var(--pair-ink);-webkit-background-clip:text;background-clip:text;
          -webkit-text-fill-color:transparent}
}
.band-deep .kicker{background:none;-webkit-text-fill-color:#8ED8CE;color:#8ED8CE;display:block}
/* 절 머리는 가운데 — 큰 제목이 축이 된다. */
.shead{max-width:46rem;margin:0 auto 60px;text-align:center}
.shead .kicker{margin:0 auto}
@media (max-width:700px){.shead{margin-bottom:36px}}
.shead h2{margin-top:14px;font-size:clamp(29px,4.5vw,54px);line-height:1.12;letter-spacing:-.04em;font-weight:700}
.shead .sub{margin-top:16px;color:var(--muted);font-size:clamp(16.5px,1.3vw,19px)}
.band-deep .shead .sub{color:rgba(255,255,255,.72)}

/* ── 히어로 — 가운데 큰 활자, 그 아래 실물 데모가 '제품 사진' 자리 ─────── */
.hero{max-width:var(--maxw);margin:0 auto;padding:64px 24px 32px;text-align:center}
@media (min-width:900px){.hero{padding:104px 24px 48px}}
.hero-copy{max-width:54rem;margin:0 auto}
.hero-copy .kicker{margin:0 auto}
.hero h1{margin-top:18px;font-size:clamp(37px,6.2vw,72px);line-height:1.07;letter-spacing:-.045em;font-weight:800}
/* 영어 제목은 같은 자수에 폭을 더 먹는다 — 마지막 단어가 외따로 떨어지지 않게 한 단계 작게. */
html[lang="en"] .hero h1{font-size:clamp(35px,5.6vw,63px)}
.hero .lead{margin:22px auto 0;max-width:36em;color:var(--muted);font-size:clamp(16.5px,1.4vw,20px)}
.hero .btnrow{margin-top:34px;justify-content:center}
.hero .note{margin-top:12px;font-size:13.5px;color:var(--muted)}
.hero .storelinks{margin-top:14px;font-size:14px;color:var(--muted)}
.hero .storelinks a{color:var(--muted);text-underline-offset:3px}
.hero .storelinks a:hover{color:var(--mine)}
/* 열리는 순서 — 활자가 먼저, 데모가 따라온다. */
.hero-copy>*{animation:rise .65s cubic-bezier(.22,.68,.28,1) both}
.hero-copy>:nth-child(2){animation-delay:.06s}
.hero-copy>:nth-child(3){animation-delay:.12s}
.hero-copy>:nth-child(4){animation-delay:.18s}
.hero-copy>:nth-child(5){animation-delay:.22s}
.hero-copy>:nth-child(6){animation-delay:.26s}

/* ── 히어로 데모: 목록 행 + 상대 폰 잠금 위젯 ──────────────────────────────
   **여기는 꾸며 내는 자리가 아니다.** 치수·색·상태는 앱 실물에서 그대로 옮겼다.

     행   app/lib/screens/list_row_preview.dart (+ theme/list_text_scale.dart 100%)
          카드 radius 19 · 여백 8/16/8/14 · 행 간격 6 · 체크 원 30 테두리 2.4 ·
          원→글자 14 · 제목 16/1.25 · 마감줄 위 2, 시계 13, 간격 3, 글자 12 w500 ·
          압정 22 · 담당자 배지 26(면 16%, 테두리 1.3@70%, 글자 11 w800)
     완료 list_screen.dart _CheckCircle — 채움은 **강조색이 아니라 중성**,
          흰 체크는 원의 2/3, 행 전체 opacity 0.75(kDoneFade), 제목 취소선
     담당자 assignee_circle.dart — '둘 다'는 배지를 아예 그리지 않는다
     위젯 lock_screen_preview.dart _rectWidget — **배경 카드가 없다.** 벽지 위에
          목록 이름 11 bold, 줄마다 ○ 8 + 배지 글자 9 bold + 제목 11(투명도 .9),
          최대 3줄. 잠금화면은 단색이라 담당자를 색이 아니라 글자로 말한다.

   앱이 저 값을 바꾸면 여기도 바꾼다 — 어긋나는 순간 이 그림은 거짓말이 된다. */
.demo{position:relative;margin:60px auto 0;max-width:680px;display:grid;text-align:left}
@media (max-width:700px){.demo{margin-top:44px}}
.applist{position:relative;z-index:2}
.applist-head{display:flex;align-items:center;gap:5px;padding:0 4px 10px;
              font-size:17px;font-weight:600;letter-spacing:-.02em}
.applist-head svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
                  stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}

.row{display:flex;align-items:center;background:var(--card);border-radius:19px;
     padding:8px 16px 8px 14px;box-shadow:0 1px 2px rgba(20,48,43,.06),0 6px 16px -12px rgba(20,48,43,.28)}
.row.done{opacity:.75}
/* 히트 구역은 앱과 같이 왼쪽 띠 전체다(원만 누르게 하면 30px밖에 안 된다). */
.ck-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-7px 0 -7px -7px;
        padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.ck{width:30px;height:30px;border-radius:50%;border:2.4px solid var(--ring-both);
    display:grid;place-items:center;transition:background .15s,border-color .15s}
.ck.mine{border-color:var(--ring-mine)}
.ck.yours{border-color:var(--ring-yours)}
.ck svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;
        stroke-linejoin:round;opacity:0;transition:opacity .15s}
.row.done .ck{background:var(--neutral);border-color:var(--neutral)}
.row.done .ck svg{opacity:1}
.row-body{flex:1;min-width:0;padding-left:14px}
.row-title{font-size:16px;line-height:1.25;letter-spacing:-.01em}
.row.done .row-title{text-decoration:line-through}
.row-due{display:flex;align-items:center;gap:3px;margin-top:2px;font-size:12px;font-weight:500;
         color:var(--due)}
.row-due svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
             stroke-linecap:round;stroke-linejoin:round}
.badge{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
       font-size:11px;font-weight:800;line-height:1}
.badge.mine{color:var(--mine-text);background:rgba(15,148,136,.16);border:1.3px solid rgba(11,114,104,.7)}
.badge.yours{color:#B44A34;background:rgba(242,126,107,.16);border:1.3px solid rgba(180,74,52,.7)}
.pin{flex:none;width:22px;height:22px;margin-left:10px;fill:none;stroke:var(--ring-both);
     stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.hint{padding:0 4px;font-size:13px;color:var(--muted);line-height:1.55}

.phone{position:relative}
.phone-tag{position:absolute;top:-24px;right:4px;font-size:12.5px;color:var(--muted)}

/* 히어로가 가운데 축이 되면서 데모는 그 아래에 목록+폰이 나란히 앉는다.
   좁을 땐 폰과 설명이 한 줄로 묶인다 — 폰만 가운데 두면 정렬 흐름이 끊긴다.
   **미디어 블록은 기본 규칙보다 뒤에 온다.** `.phone-tag`를 앞에 두었더니
   같은 특이도라 순서로 이겨서 모바일에서 계속 절대배치였던 사고가 있다. */
@media (min-width:640px){
  .demo{grid-template-columns:minmax(0,1fr) 186px;gap:0 30px;align-items:end}
  .applist{grid-area:1/1}
  .phone{grid-area:1/2;width:186px}
  .hint{grid-area:2/1/3/3;margin-top:24px;text-align:center}
}
@media (max-width:639px){
  .demo{grid-template-columns:auto minmax(0,1fr);gap:0 20px;align-items:start}
  .applist{grid-area:1/1/2/3}
  .phone{grid-area:2/1;width:150px;margin-top:26px}
  /* 좁을 땐 설명이 바로 옆에서 '상대 폰'이라고 이미 말한다 — 꼬리표는 뺀다. */
  .phone-tag{display:none}
  .hint{grid-area:2/2;margin:26px 0 0;max-width:22rem}
}

.phone-body{border-radius:36px;padding:8px;background:linear-gradient(158deg,#33433F,#141E1C);
            box-shadow:0 34px 62px -30px rgba(11,49,44,.66),inset 0 0 0 1px rgba(255,255,255,.07)}
.lock{position:relative;border-radius:29px;padding:24px 14px 18px;min-height:344px;
      display:flex;flex-direction:column;color:#fff;overflow:hidden;
      background:radial-gradient(118% 82% at 80% 6%,rgba(242,126,107,.44),transparent 56%),
                 linear-gradient(168deg,#0B3E3A 0%,#0F4B46 48%,#2B443F 100%)}
.lock::after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
             width:56px;height:15px;border-radius:999px;background:rgba(0,0,0,.55)}
.lock-date{margin-top:14px;font-size:11px;text-align:center;opacity:.85}
.lock-time{font-size:52px;font-weight:300;letter-spacing:-.045em;line-height:1.02;text-align:center}
/* 사각 위젯 — 배경도 테두리도 없다. 벽지 위 글자뿐이다. */
.lw{margin-top:auto;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.lw-name{font-size:11px;font-weight:700;line-height:1.3}
.lw-list{list-style:none;margin:0;padding:0}
.lw-list li{display:flex;align-items:center;gap:3px;margin-top:2px;font-size:11px;
            line-height:1.3;opacity:.9;min-width:0}
/* 넘치는 제목은 잘라내지 말고 말줄임한다 — 앱이 maxLines:1 + ellipsis다.
   그냥 overflow:hidden만 두면 영문 제목이 단어 중간에서 끊긴다. */
.lw-list span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
                    border:1.2px solid currentColor}
.lw-list b{font-size:9px;font-weight:700;opacity:1}
.lw-empty{margin-top:3px;font-size:10.5px;opacity:.75}
.lw.sync{animation:sync .75s ease}
@keyframes sync{
  0%{opacity:.35}
  40%{opacity:1}
  100%{opacity:1}
}
.row,.phone{animation:rise .6s cubic-bezier(.22,.68,.28,1) both}
.rows li:nth-child(1) .row{animation-delay:.24s}
.rows li:nth-child(2) .row{animation-delay:.31s}
.rows li:nth-child(3) .row{animation-delay:.38s}
.rows li:nth-child(4) .row{animation-delay:.45s}
.phone{animation-delay:.52s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── 스크롤 리빌 — landing.js가 [data-rv]에 .rv를 붙이고 보이면 .on을 준다.
   클래스는 JS만 붙인다(JS 없으면 아무것도 안 숨는다). reduced-motion이면
   JS가 아예 건너뛴다. ── */
.rv{opacity:0;transform:translateY(26px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.22,.68,.28,1)}
.rv.on{opacity:1;transform:none}
.feat>.rv:nth-child(2),.gal>.rv:nth-child(2),.steps>.rv:nth-child(2){transition-delay:.08s}
.feat>.rv:nth-child(3),.gal>.rv:nth-child(3),.steps>.rv:nth-child(3){transition-delay:.16s}
.feat>.rv:nth-child(4){transition-delay:.24s}
.feat>.rv:nth-child(5){transition-delay:.08s}
.feat>.rv:nth-child(6){transition-delay:.16s}

/* ── 기능 — 벤토 그리드: 테두리 대신 낮은 그림자, 큰 라운드 ───────────── */
.feat{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:700px){.feat{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){
  .feat{grid-template-columns:repeat(4,1fr)}
  .feat .big{grid-column:span 2}
}
.fcard{position:relative;overflow:hidden;background:var(--card);
       border-radius:28px;padding:30px 28px 32px;
       box-shadow:0 1px 2px rgba(20,48,43,.05),0 20px 44px -32px rgba(20,48,43,.25)}
@media (max-width:700px){.fcard{padding:24px 22px 26px;border-radius:24px}}
.fcard h3{font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.25}
/* 카드 안에 무엇이든 중첩될 수 있으므로 본문에 타입 선택자를 쓰지 않는다.
   `.fcard.big p`(0,2,1)가 안에 넣은 `.fdemo .lw-name`(0,2,0)을 이겨 위젯 그림이
   회색 문단으로 깔렸다 — 머리띠 버튼과 같은 종류의 사고다. */
.fcard-body{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.7}
/* 여섯 중 둘이 기둥이다 — 제목을 짝 그라데이션 잉크로 쓰는 것으로만 그 차이를 말한다. */
.fcard.big{padding:36px 34px 38px}
@media (max-width:700px){.fcard.big{padding:26px 22px 28px}}
.fcard.big h3{font-size:clamp(23px,2.2vw,27px);letter-spacing:-.035em;color:var(--mine-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fcard.big h3{display:table;background:var(--pair-ink);-webkit-background-clip:text;
                background-clip:text;-webkit-text-fill-color:transparent}
}
.fcard.big .fcard-body{font-size:16.5px;margin-top:12px}
/* 기둥 카드의 그림. 왼쪽은 잠금 위젯을 그 규칙 그대로 축소한 것,
   오른쪽은 페어링 코드다. 코드 알파벳엔 헷갈리는 I·O·0·1이 없다(0002). */
.fdemo{margin-top:22px;max-width:276px;border-radius:16px;padding:14px 15px;
       background:linear-gradient(158deg,#0B3E3A,#123F3B 55%,#2B443F);color:#fff}
.fdemo .lw-name{font-size:11px;font-weight:700}
.fdemo .lw-list li{display:flex;align-items:center;gap:3px;margin-top:2px;font-size:11px;
                   line-height:1.3;opacity:.9;min-width:0}
.fdemo .lw-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
                           border:1.2px solid currentColor}
.fdemo .lw-list b{font-size:9px;font-weight:700}
.fcode{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fcode-chip{font-family:var(--mono);font-size:23px;font-weight:500;letter-spacing:.22em;
            text-indent:.22em;padding:12px 16px;border-radius:14px;background:var(--paper);
            border:1px solid var(--line);color:var(--ink)}
.fcode-note{font-size:13px;color:var(--muted);flex:1;min-width:11rem}

/* ── 갤러리 — 원본 캡처(스토어 캡션이 안 박힌 것)를 히어로와 같은 베젤에 넣는다.
   예전엔 스토어용 완성본을 썼는데, 이미 "공유 목록이 잠금화면에" 같은 문구가 이미지
   안에 박혀 있어 바로 위 h2와 같은 말을 두 번 하고 배경색 넷이 서로 부딪쳤다. */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1040px;margin:0 auto}
.gal figure{margin:0;max-width:312px;justify-self:center}
.gal .dev{border-radius:32px;padding:6px;background:linear-gradient(158deg,#33433F,#141E1C);
          box-shadow:0 30px 56px -30px rgba(11,49,44,.6),inset 0 0 0 1px rgba(255,255,255,.07)}
.gal img{border-radius:27px}
.gal figcaption{margin-top:18px;font-size:14px;color:var(--muted);text-align:center;line-height:1.5}
.gal figcaption b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
@media (max-width:820px){.gal{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (max-width:560px){
  /* 화면 밖으로 이어지게 좌우로 빼되, **여백은 padding으로 주지 않는다** —
     flex 스크롤 컨테이너에서 첫 장이 padding-left를 못 받아 x=0에 붙어 잘렸고
     오른쪽 padding은 스크롤 끝에서 아예 사라진다. 양끝을 spacer로 만든다. */
  .gal{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
       gap:16px;margin:0 -24px;padding:0 0 16px;-webkit-overflow-scrolling:touch;
       scroll-padding-left:24px}
  .gal::before,.gal::after{content:"";flex:0 0 8px}
  .gal figure{flex:0 0 min(66%,228px);margin:0;scroll-snap-align:start}
  .gal figcaption{margin-top:12px;font-size:13px}
}

/* ── 단계 (진짜 순서라 번호를 붙인다) ──────────────────────────────────────── */
.steps{display:grid;gap:30px;list-style:none;margin:0;padding:0;max-width:1000px;margin-inline:auto}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:36px}}
.step{position:relative;padding-top:28px;border-top:1px solid #DCD4CF}
.step .n{position:absolute;top:0;left:0;transform:translateY(-50%);padding-right:12px;
         background:var(--wash);font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--mine-text)}
.step h3{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.3}
.step p{margin-top:8px;color:var(--muted);font-size:15.5px}

/* ── 쓰는 사람 ──────────────────────────────────────────────────────────── */
.who-list{list-style:none;margin:0 auto;padding:0;display:grid;gap:0;max-width:900px;
          border-top:1px solid var(--line)}
@media (min-width:760px){.who-list{grid-template-columns:1fr 1fr;column-gap:48px}}
.who-list li{padding:18px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.who-list b{flex:none;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--mine-text);min-width:6.4em}
.who-list span{color:var(--muted);font-size:15.5px}

/* ── 가이드 ─────────────────────────────────────────────────────────────── */
.guides{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
        border-radius:24px;overflow:hidden;max-width:900px;margin:0 auto}
.guides a{display:block;background:var(--card);padding:24px 28px;text-decoration:none;
          position:relative;transition:background .18s}
.guides a:hover{background:#FFFDFC}
@media (max-width:700px){
  .guides a{padding:20px}
  .guides a::after{right:18px;top:21px}
  .guides strong{padding-right:24px}
}
.guides strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.025em;
               line-height:1.35;padding-right:28px}
.guides span{display:block;margin-top:5px;color:var(--muted);font-size:14.5px}
.guides a::after{content:"→";position:absolute;right:24px;top:24px;color:var(--mine-text);
                 opacity:.45;transition:transform .2s,opacity .2s}
.guides a:hover::after{transform:translateX(4px);opacity:1}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line);max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:22px 44px 22px 0;
             font-size:18px;font-weight:600;letter-spacing:-.025em;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:8px;top:50%;
  background:var(--mine);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.faq summary::before{width:14px;height:2px;margin-top:-1px}
.faq summary::after{width:2px;height:14px;margin-top:-7px;margin-right:6px}
.faq details[open] summary::after{transform:scaleY(0);opacity:0}
.faq details p{padding:0 44px 24px 0;color:var(--muted);font-size:16px}

/* ── 마감 CTA·바닥 ──────────────────────────────────────────────────────── */
.cta-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;text-align:center}
.cta-in h2{margin-top:14px;font-size:clamp(30px,4.6vw,54px);line-height:1.1;letter-spacing:-.04em;font-weight:700}
.cta-in .kicker{margin:0 auto}
.cta-in .sub{margin:18px auto 0;max-width:34rem;color:rgba(255,255,255,.75);font-size:17px}
.cta-in .btnrow{margin-top:36px;justify-content:center}
.cta-in .note{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.68)}
.foot{padding:44px 0 56px;border-top:1px solid var(--line)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;gap:14px 26px;
         align-items:center;font-size:14px;color:var(--muted)}
.foot-in a{color:var(--muted);text-decoration:none;text-underline-offset:3px}
.foot-in a:hover{color:var(--ink);text-decoration:underline}
.foot-in .spacer{margin-left:auto}
.foot-copy{width:100%;font-size:12.5px;color:var(--muted);opacity:.75}

/* ── 가이드·문서 페이지 ─────────────────────────────────────────────────── */
.doc{max-width:720px;margin:0 auto;padding:44px 24px 96px}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--mine-text)}
.doc h1{margin-top:18px;font-size:clamp(28px,4vw,44px);line-height:1.12;letter-spacing:-.04em;font-weight:700}
.doc .lead{margin-top:16px;color:var(--muted);font-size:18px}
.doc .meta{margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.prose{margin-top:16px}
.prose h2{margin:52px 0 12px;font-size:25px;line-height:1.25;letter-spacing:-.03em;font-weight:700}
.prose h3{margin:30px 0 8px;font-size:17.5px;font-weight:600;letter-spacing:-.02em}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:6px 0}
.prose strong{font-weight:600}
.prose a{color:var(--mine-text);text-underline-offset:3px}
.prose .tip{margin:18px 0;padding:16px 20px;border-radius:16px;background:var(--card);
            border:1px solid var(--line);border-left:3px solid var(--mine);
            color:var(--muted);font-size:15.5px}
.prose .shot{max-width:250px;width:100%;height:auto;border-radius:20px;margin:18px 0;
             box-shadow:0 22px 44px -28px rgba(20,48,43,.5)}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:0 0 18px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.prose th{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;
          text-transform:uppercase;color:var(--muted)}
.wide{overflow-x:auto}
.doc-cta{margin-top:56px;padding:30px 30px 32px;border-radius:24px;background:var(--card);
         border:1px solid var(--line);position:relative;overflow:hidden}
.doc-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--pair)}
.doc-cta h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.03em}
.doc-cta p{margin-top:10px;color:var(--muted);font-size:15.5px}
.doc-cta .pill{margin-top:20px}
.more{margin-top:52px}
.more h2{font-size:12px;font-family:var(--mono);font-weight:500;letter-spacing:.16em;
         text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.more a{display:block;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;
        letter-spacing:-.02em;font-weight:600;line-height:1.4}
.more a small{display:block;margin-top:3px;color:var(--muted);font-size:14px;font-weight:400;letter-spacing:0}
.more a:hover{color:var(--mine-text)}

/* ── /download ──────────────────────────────────────────────────────────── */
.dl{max-width:520px;margin:0 auto;padding:76px 24px 88px;text-align:center}
.dl .mark{font-size:34px;padding-bottom:7px}
.dl .sub{margin-top:16px;color:var(--muted);font-size:17px}
.dl .btnrow{margin-top:36px;flex-direction:column;gap:12px}
.dl .pill{width:100%}
.code-card{display:none;margin:8px 0 20px;padding:22px;border-radius:20px;background:var(--card);
           border:1px solid var(--line);position:relative;overflow:hidden}
.code-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--pair)}
.code-card .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.code-card .code{margin-top:10px;font-family:var(--mono);font-size:32px;font-weight:500;
                 letter-spacing:.26em;text-indent:.26em;font-variant-numeric:tabular-nums}
.code-card a.openapp{display:block;margin-top:14px}
.code-card button{margin-top:10px;width:100%;padding:13px 16px;border-radius:999px;cursor:pointer;
                  border:1px solid var(--line);background:var(--card);color:var(--ink);
                  font-weight:600;font-size:15px;transition:border-color .18s,color .18s}
.code-card button:hover{border-color:var(--mine);color:var(--mine-text)}
.how{margin-top:46px;padding:24px 26px;text-align:left;border-radius:20px;
     background:var(--card);border:1px solid var(--line)}
.how h2{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
        text-transform:uppercase;color:var(--muted)}
.how ol{margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:15px}
.how li{margin:7px 0}
.redir{margin-top:18px;font-size:13.5px;color:var(--muted);min-height:1.2em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
}