/* appshin.app — A · Index. 시안(IndexHome/IndexSweetStack)의 CSS를 옮기고 다크 테마·스크린샷·배지·방침 본문을 더했다.
   색은 tokens.json 의 a-* 와 공용 토큰(ground/ink/muted/dot, app-*)만 쓴다. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url(fonts/InstrumentSans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url(fonts/InstrumentSans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMMono-400-latin.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/DMMono-500-latin.woff2) format("woff2")}
:root{color-scheme:light dark}
html,body{margin:0;padding:0}
.site{--ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.25,1);--gut:clamp(20px,3.75vw,48px);
  min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;font-kerning:normal}
.site *,.site *::before,.site *::after{box-sizing:border-box}
.site img{display:block;max-width:100%}
.site a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.site button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.site ul{list-style:none;margin:0;padding:0}
.site h1,.site h2,.site h3,.site p,.site figure{margin:0}
.site :focus{outline:none}
.site :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
.ic{position:relative;display:block;flex:none;border-radius:22.5%;overflow:hidden;isolation:isolate;background:var(--ic-bg,transparent)}
.ic img{width:100%;height:100%;object-fit:cover}
.ic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ic-ring);pointer-events:none}
.ph{position:relative;width:100%;aspect-ratio:var(--sr,1290/2796);border-radius:clamp(14px,8%,26px);overflow:hidden;
  background:linear-gradient(160deg,var(--t1),var(--t2));isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ic-ring);pointer-events:none}
.wide .ph{border-radius:12px}
.rail{display:flex;gap:var(--rail-gap,20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:max(var(--gut),calc((100% - 1184px)/2));padding-inline:max(var(--gut),calc((100% - 1184px)/2));
  padding-block:4px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 auto;scroll-snap-align:start}
.rail-prog{height:2px;border-radius:2px;overflow:hidden;background:var(--line)}
.rail-prog i{display:block;height:100%;width:var(--w,30%);border-radius:2px;background:var(--ink);transform:translateX(var(--x,0%))}
.io .rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.io .rv.in{opacity:1;transform:none}
.io.still .rv{opacity:1;transform:none;transition:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .site *,.site *::before,.site *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.dA{--bg:#f5f5f2;--bg-2:#ebebe6;--ink:#141414;--ink-2:#5f5f5a;--line:#d6d6cf;--dot:#e0342c;--ic-ring:rgba(20,20,20,.08);--focus:var(--ink);--nav-bg:rgba(245,245,242,.88);--wash-a:7.5%;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans)}
html,body{background:#f5f5f2}
.tone{--acc:var(--acc-l);--wash:color-mix(in srgb,var(--acc) var(--wash-a),transparent)}
/* 다크: 공용 토큰 ground/ink/muted 의 dark 값. 띠 배경과 구분선은 ink 를 ground 에 7% / 16% 섞은 값. */
@media (prefers-color-scheme:dark){
  html,body{background:#0b0b0d}
  .dA{--bg:#0b0b0d;--bg-2:#1b1b1d;--ink:#f2f2f0;--ink-2:#a1a1a8;--line:#303031;--ic-ring:rgba(255,255,255,.12);--nav-bg:rgba(11,11,13,.88);--wash-a:13%}
  .tone{--acc:var(--acc-d)}
}
.dA .lbl{font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* nav */
.dA .nav{position:sticky;top:0;z-index:20;background:var(--nav-bg);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px)}
.dA .nav-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dA .wm{display:inline-flex;align-items:baseline;font:650 25px/1 var(--sans);font-stretch:88%;letter-spacing:-.035em;padding-block:12px}
.dA .wm-dot{display:inline-block;width:.2em;height:.2em;margin-left:.08em;border-radius:50%;background:var(--dot)}
.dA .links{display:flex;gap:2px;margin-right:-12px}
.dA .links a{font:500 15px/1 var(--sans);color:var(--ink-2);padding:14px 12px;border-radius:10px;transition:color .2s}
.dA .links a:hover{color:var(--ink)}

/* hero */
.dA .hero{padding-block:clamp(40px,6.5vw,88px) clamp(64px,8vw,112px)}
.dA .h1{font:620 clamp(46px,10.6vw,136px)/.9 var(--sans);font-stretch:78%;letter-spacing:-.045em}
.dA .dot-end{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;background:var(--dot)}
.dA .hero-foot{margin-top:clamp(36px,4.5vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.dA .lede{grid-column:1/span 5;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:36ch}
.dA .lede b{font-weight:600;color:var(--ink)}
.dA .h1-2{display:block;margin-top:.42em;font-size:.5em;line-height:1;font-stretch:82%;letter-spacing:-.035em}
.dA .h1-a,.dA .h1-2{text-wrap:balance}
.dA .h1-a{display:block}
/* 아이콘 띠: 폭은 아이콘 개수로만 정해진다(캡션은 폭·높이에 관여하지 않는다).
   링크(hit 영역)는 고정 크기에 빈틈 없이 붙고, hover 변형은 안쪽 .ic 에만 준다. */
.dA .picker{grid-column:7/span 6;justify-self:end;width:max-content;max-width:100%;min-width:0}
.dA .strip{display:flex;margin-inline:-6px}
.dA .strip li{flex:0 0 72px;min-width:0}
.dA .strip a{position:relative;display:block;padding:6px 6px 20px;border-radius:14px}
.dA .strip a .ic{width:100%;height:auto;aspect-ratio:1;pointer-events:none;transition:transform .4s var(--ease)}
.dA .strip a:hover .ic{transform:translateY(-4px)}
.dA .strip a::after{content:"";position:absolute;left:50%;bottom:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .35s;pointer-events:none}
.dA .strip a.on::after{opacity:1}
.dA .cap{margin-top:10px;width:0;min-width:100%;height:63px;overflow:hidden;font-size:15px;line-height:21px}
.dA .cap-n{font-weight:600;white-space:nowrap;margin-right:10px}
.dA .cap-l{color:var(--ink-2)}
.dA .cap.swap{animation:capIn .5s var(--ease)}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* sections */
.dA .sec{padding-block:clamp(36px,5vw,64px)}
.dA .sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px 24px;align-items:end;margin-bottom:clamp(20px,3vw,32px)}
.dA .h2{font:620 clamp(40px,5.4vw,68px)/.92 var(--sans);font-stretch:80%;letter-spacing:-.04em}
.dA .sec-head .h2,.dA .sec-head .h3{grid-column:1/span 6}
.dA .sec-d{grid-column:7/span 6;justify-self:end;text-align:right;font-size:17px;color:var(--ink-2);max-width:34ch}

/* index rows */
.dA .index{border-top:1px solid var(--line)}
.dA .index>li{border-bottom:1px solid var(--line)}
.dA .row{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr) 300px 28px;grid-template-areas:"ic t m a";gap:0 28px;align-items:center;padding-block:22px;isolation:isolate}
.dA .row::before{content:"";position:absolute;inset:7px -20px;z-index:-1;border-radius:20px;background:var(--wash);opacity:0;transform:scale(.985);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.dA .row:hover::before,.dA .row:focus-visible::before{opacity:1;transform:none}
.dA .row:focus-visible{outline-offset:-2px;border-radius:20px}
.dA .row .ic{grid-area:ic;width:88px;height:88px;transition:transform .5s var(--ease)}
.dA .row:hover .ic{transform:rotate(-5deg) scale(1.04)}
.dA .row-t{grid-area:t;min-width:0}
.dA .row-n{display:block;font:600 26px/1.15 var(--sans);font-stretch:92%;letter-spacing:-.02em;transition:color .25s}
.dA .row:hover .row-n{color:var(--acc)}
.dA .row-l{display:block;margin-top:6px;color:var(--ink-2);max-width:54ch}
.dA .row-m{grid-area:m;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dA .soon{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.dA .soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot)}
.dA .row-a{grid-area:a;justify-self:end;display:grid;transition:transform .35s var(--ease)}
.dA .row:hover .row-a{transform:translateX(4px)}

/* promises */
.dA .promise{margin-top:clamp(24px,3vw,40px);background:var(--bg-2);padding-block:clamp(56px,7vw,104px)}
.dA .pr-list{margin-top:clamp(28px,3.5vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px}
.dA .pr-t{display:flex;align-items:baseline;gap:12px;font:600 24px/1.2 var(--sans);font-stretch:92%;letter-spacing:-.02em}
.dA .pr-t::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot);transform:translateY(-.14em)}
.dA .pr-p{margin-top:10px;padding-left:20px;color:var(--ink-2);max-width:34ch}

/* contact */
.dA .contact{padding-block:clamp(64px,8vw,120px)}
.dA .c-l{margin-top:18px;font-size:clamp(17px,1.6vw,20px);color:var(--ink-2)}
.dA .c-row{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}
.dA .c-mail{font:600 clamp(30px,4.8vw,60px)/1.1 var(--sans);font-stretch:84%;letter-spacing:-.035em;overflow-wrap:anywhere;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:4px;transition:background-size .45s var(--ease)}
.dA .c-mail:hover{background-size:100% 2px}
.dA .copy{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:13px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.dA .copy:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* footer */
.dA .foot{border-top:1px solid var(--line)}
.dA .foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding-block:28px 40px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.dA .foot-links{display:flex;gap:20px}
.dA .foot a{transition:color .2s}
.dA .foot a:hover{color:var(--ink)}

/* app page */
.dA .crumb{display:flex;align-items:center;gap:10px;padding-top:24px}
.dA .crumb a:hover{color:var(--ink)}
.dA .crumb [aria-current]{color:var(--ink)}
.dA .ahero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;padding-block:clamp(28px,4vw,48px) clamp(48px,6vw,88px)}
.dA .ahero-t{grid-column:1/span 6;min-width:0}
.dA .ahero-ic .ic{width:120px;height:120px;box-shadow:0 18px 36px -18px rgba(0,0,0,.4)}
.dA .h1-app{margin-top:28px;font:620 clamp(56px,7.8vw,104px)/.9 var(--sans);font-stretch:78%;letter-spacing:-.045em}
.dA .ahero-l{margin-top:18px;font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:var(--ink-2);max-width:30ch}
.dA .ahero-m{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 18px}
.dA .stores{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.dA .store{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;min-width:180px;height:60px;padding:0 22px;border-radius:14px;background:var(--ink);color:var(--bg);transition:transform .2s var(--ease)}
.dA .store-s{font-size:11px;line-height:1.1;opacity:.72}
.dA .store-n{font:600 20px/1.05 var(--sans);font-stretch:95%;letter-spacing:-.01em}
.dA .store.is-soon{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);cursor:default}
.dA .badge{display:block;height:56px;border-radius:9px}
.dA .badge img{height:100%;width:auto;max-width:none;pointer-events:none;transition:transform .2s var(--ease)}
.dA .badge:hover img{transform:translateY(-2px)}
.dA .ahero-art{grid-column:8/span 5;position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:linear-gradient(150deg,var(--t1),var(--t2));isolation:isolate}
.dA .ahero-art .ph{position:absolute;left:21%;width:58%;top:12%;box-shadow:0 40px 60px -30px rgba(0,0,0,.45);background:rgba(255,255,255,.4)}
.dA .ahero-art::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ic-ring);pointer-events:none}
.dA .ahero-art.wide{aspect-ratio:5/4}
.dA .ahero-art.wide .ph{left:7%;width:86%;top:50%;margin-top:-26.9%}
.dA .shots{padding-block:clamp(40px,6vw,80px)}
.dA .shots-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.dA .h3{font:620 clamp(30px,3.4vw,44px)/1 var(--sans);font-stretch:82%;letter-spacing:-.035em}
.dA .rail-btns{display:flex;gap:8px}
.dA .rb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,opacity .2s}
.dA .rb:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--ink)}
.dA .rb[disabled]{opacity:.35;cursor:default}
.dA .rail>*{width:clamp(208px,20.6vw,264px)}
.dA .wide .rail>*{width:clamp(300px,46vw,560px)}
.dA .rail-foot{margin-top:18px}
.dA .feats{padding-block:clamp(40px,6vw,80px)}
.dA .feat-list{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px}
.dA .feat-t{display:flex;align-items:baseline;gap:12px;font:600 23px/1.2 var(--sans);font-stretch:92%;letter-spacing:-.02em}
.dA .feat-t::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--acc);transform:translateY(-.1em)}
.dA .feat-p{margin-top:10px;padding-left:22px;color:var(--ink-2);max-width:34ch}
.dA .price-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px 24px;align-items:baseline;padding-block:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dA .price-in .lbl{grid-column:1/span 2}
.dA .price-l{grid-column:3/span 10;font:500 clamp(22px,2.6vw,34px)/1.25 var(--sans);font-stretch:90%;letter-spacing:-.02em;color:var(--ink-2)}
.dA .price-l b{font-weight:650;color:var(--ink)}
.dA .price-in+.price-in{border-top:0}
.dA .info-l{grid-column:3/span 10;font-size:clamp(17px,1.6vw,20px);color:var(--ink-2)}
.dA .info-l a,.dA .prose a{color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;overflow-wrap:anywhere}
.dA .info-l a:hover,.dA .prose a:hover{color:var(--acc,var(--ink))}
.dA .more{padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,80px)}
.dA .more .sec-head .see{grid-column:7/span 6;justify-self:end;display:inline-flex;align-items:center;gap:8px;font-weight:500;padding:10px 0}
.dA .more .sec-head .see svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.dA .more .sec-head .see:hover svg{transform:translateX(3px)}
.dA .more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;margin-inline:-14px}
.dA .mc{display:flex;align-items:center;gap:16px;padding:14px;border-radius:18px;transition:background .25s}
.dA .mc:hover{background:var(--bg-2)}
.dA .mc .ic{width:56px;height:56px}
.dA .mc b{display:block;font-weight:600;font-size:17px;line-height:1.25}
.dA .mc .k{display:block;margin-top:2px;font-size:14px;color:var(--ink-2)}

/* 방침·안내 본문 */
.dA .doc{padding-block:clamp(28px,4vw,48px) clamp(56px,7vw,96px)}
.dA .h1-doc{font:620 clamp(40px,5.4vw,68px)/.95 var(--sans);font-stretch:80%;letter-spacing:-.04em}
.dA .prose{margin-top:clamp(24px,3vw,40px);max-width:70ch;font-size:17px;line-height:1.6}
.dA .prose h2{margin-top:44px;font:620 28px/1.1 var(--sans);font-stretch:86%;letter-spacing:-.03em}
.dA .prose h3{margin-top:30px;font:600 19px/1.3 var(--sans);letter-spacing:-.01em}
.dA .prose p,.dA .prose ul{margin-top:12px}
.dA .prose ul{list-style:disc;padding-left:22px}
.dA .prose li+li{margin-top:8px}
.dA .prose .meta{color:var(--ink-2)}
.dA .doc .more-grid{margin-top:clamp(24px,3vw,40px)}
.dA .doc .back{margin-top:48px}
.dA .see{display:inline-flex;align-items:center;gap:8px;font-weight:500;padding:10px 0}
.dA .see svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.dA .see:hover svg{transform:translateX(3px)}

@media (max-width:1024px){
  .dA .row{grid-template-columns:72px minmax(0,1fr) 28px;grid-template-areas:"ic t a" "ic m a";gap:10px 22px}
  .dA .row .ic{width:72px;height:72px}
  .dA .row-m{justify-content:flex-start}
  .dA .feat-list,.dA .pr-list{grid-template-columns:1fr}
  .dA .hero-foot{grid-template-columns:1fr;gap:28px}
  .dA .lede,.dA .picker{grid-column:1/-1;justify-self:start}
}
@media (max-width:720px){
  .dA .nav-in{height:60px}
  .dA .wm{font-size:23px}
  .dA .links{margin-right:-8px}
  .dA .links a{padding:13px 8px}
  .dA .h1{font-size:54px}
  .dA .picker{justify-self:stretch;width:auto}
  .dA .strip{margin-inline:-5px;overflow-x:auto;scrollbar-width:none}
  .dA .strip::-webkit-scrollbar{display:none}
  .dA .strip li{flex:1 0 44px;max-width:66px}
  .dA .strip a{padding:5px 5px 18px}
  .dA .strip a::after{bottom:6px}
  .dA .cap{margin-top:6px;height:84px}
  .dA .cap-n{display:block;margin-right:0}
  .dA .sec-head{grid-template-columns:1fr}
  .dA .sec-head .h2,.dA .sec-head .h3,.dA .sec-d,.dA .more .sec-head .see{grid-column:1/-1;justify-self:start;text-align:left}
  .dA .row{grid-template-columns:64px minmax(0,1fr) 20px;gap:8px 16px;align-items:start;padding-block:18px}
  .dA .row .ic{width:64px;height:64px}
  .dA .row-n{font-size:21px}
  .dA .row-l{margin-top:4px;font-size:15px}
  .dA .row-a{align-self:center}
  .dA .row-m{flex-wrap:wrap;gap:4px 14px;margin-top:2px}
  .dA .row-m .lbl{font-size:11px;letter-spacing:.04em;white-space:nowrap}
  .dA .row-a svg{width:20px;height:20px}
  .dA .row::before{inset:4px -12px}
  .dA .pr-p{padding-left:20px}
  .dA .foot-in{flex-direction:column;align-items:flex-start;gap:8px;padding-block:28px 36px}
  .dA .ahero{grid-template-columns:1fr;gap:36px}
  .dA .ahero-t,.dA .ahero-art{grid-column:1/-1}
  .dA .ahero-ic .ic{width:96px;height:96px}
  .dA .ahero-art{display:none}
  .dA .h1-app{margin-top:22px}
  .dA .stores{margin-top:26px}
  .dA .store{flex:1 1 0;min-width:0;padding:0 16px;height:56px}
  .dA .store-n{font-size:17px}
  .dA .ahero-art{aspect-ratio:1/1.02}
  .dA .ahero-art .ph{left:24%;width:52%;top:11%}
  .dA .rail-btns{display:none}
  .dA .price-in{grid-template-columns:1fr;gap:10px;padding-block:24px}
  .dA .price-in .lbl,.dA .price-l,.dA .info-l{grid-column:1/-1}
  .dA .badge{height:52px}
  .dA .wide .rail>*{width:82vw}
  .dA .prose{font-size:16px}
  .dA .prose h2{font-size:24px;margin-top:36px}
  .dA .more-grid{grid-template-columns:1fr;gap:0;margin-inline:-12px}
  .dA .mc{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .dA .row:hover .ic,.dA .row:hover .row-a,.dA .strip a:hover .ic,.dA .badge:hover img,.dA .see:hover svg{transform:none}
}
/* 스킵 링크, 터치 타깃(최소 44px — 보이는 간격은 음수 여백으로 유지) */
.skip{position:absolute;left:12px;top:-60px;z-index:30;padding:12px 16px;border-radius:10px;background:#141414;color:#f5f5f2;font:500 15px/1 "Instrument Sans",system-ui,sans-serif;text-decoration:none}
.skip:focus{top:12px}
.dA .crumb a{display:inline-block;padding-block:16px;margin-block:-16px}
.dA .foot-links a{display:inline-flex;align-items:center;min-height:44px}
.dA .foot-links{margin-block:-12px}
.dA .see{padding-block:12px}
.dA .info-l a{display:inline-block;padding-block:12px 14px;margin-block:-12px -14px;background-position:0 calc(100% - 12px)}
@media (max-width:720px){
  .dA .links a{padding:15px 8px}
  .dA .copy{padding:16px 18px}
}