/* 카테고리와 경쟁 — 넓은 자리는 1160 본문, 760 아래는 390 지면.
   매대와 지도는 프레임 속 자리를 백분율로 옮겨 폭이 바뀌어도 같은 그림이 된다. */

:root{
  --ink:#292416;
  --ink-2:#574D3F;
  --line:#D1CFCB;
  --rule:#BBB6B1;
  --accent:#C8542E;
  --mint:#8ED1BD;
  --ko:"Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --ease:300ms ease;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#FFFFFF}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:#FFFFFF;
  color:var(--ink);
  font-family:var(--ko);
  font-weight:400;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:none}
h1,h2,h3,p,ol,ul,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}

.page{
  max-width:1208px;
  margin:0 auto;
  padding:64px 24px 96px;
}

/* ---------- 머리 ---------- */
.head{
  display:flex;flex-direction:column;gap:24px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}
.title{display:flex;flex-direction:column;gap:4px}
.title h1{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-0.56px}
.title-ko{font-size:14px;line-height:22px;color:var(--ink-2)}
.lead{display:flex;flex-direction:column;gap:8px}
.lead-1{font-size:22px;line-height:32px;font-weight:700;letter-spacing:-0.22px}
.lead-2{font-size:16px;line-height:27px;color:var(--ink-2)}

/* ---------- 구역 이름 ---------- */
.label{
  display:flex;align-items:baseline;gap:10px;
  font-size:20px;line-height:28px;font-weight:700;letter-spacing:-0.2px;
}
.label span{font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-2)}

.sec{border-bottom:1px solid var(--line)}

/* ---------- 매대 ---------- */
.shelf-sec{padding:32px 0;display:flex;flex-direction:column;gap:20px}

/* 긴 구역 안에서 매대가 멈춰 서 있는 동안 스크롤이 단계를 넘긴다 */
.track{height:calc(100vh * 3);height:calc(100svh * 3)}
.stage{
  position:sticky;top:var(--stick,0px);
  display:flex;flex-direction:column;gap:20px;
}

.shelf{
  --bottom:34.799%;
  --shadow:0 2px 6px rgba(41,36,23,.18);
  --shadow-lit:0 4px 12px rgba(41,36,23,.25);
  position:relative;
  width:min(100%, calc((100svh - 64px) * 1.5));
  margin:0 auto;
  aspect-ratio:1160 / 773;
  overflow:hidden;
  background:#B9B2A9;
}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wall{
  position:absolute;inset:0;
  background:rgba(41,36,22,.22);
  opacity:0;transition:opacity var(--ease);
  pointer-events:none;
}
.item{
  position:absolute;
  left:var(--x);width:var(--w);height:var(--h);
  bottom:var(--bottom);
  transition:opacity var(--ease);
}
.cut{
  width:100%;height:100%;object-fit:contain;object-position:bottom;
  filter:brightness(1) saturate(1) drop-shadow(var(--shadow));
  transition:filter var(--ease);
}
.item.torriden   {--x:8.621%; --w:6.638%; --h:24.709%}
.item.roundlab   {--x:17.461%;--w:11.284%;--h:43.079%}
.item.anua       {--x:31.073%;--w:9.922%; --h:47.089%}
.item.aestura    {--x:43.103%;--w:7.931%; --h:29.884%}
.item.ordinary   {--x:53.19%; --w:3.621%; --h:20.181%}
.item.milligram  {--x:58.879%;--w:7.586%; --h:32.6%}
.item.pyunkangyul{--x:67.845%;--w:11.983%;--h:43.079%}
.item.numbuzin   {--x:81.121%;--w:10.259%;--h:43.079%}

/* 하나만 밝게 */
.shelf.is-dim .wall{opacity:1}
.shelf.is-dim .item:not(.is-lit) .cut{filter:brightness(.45) saturate(.6) drop-shadow(var(--shadow))}
.shelf .item.is-lit .cut{filter:brightness(1) saturate(1) drop-shadow(var(--shadow-lit))}

/* 빈 자리 */
.tick{
  position:absolute;
  left:calc(62.672% - 1px);
  bottom:calc(var(--bottom) - 16px);
  width:2px;height:18px;
  background:var(--accent);
  opacity:0;transition:opacity var(--ease);
}
.shelf.is-empty .item.milligram{opacity:0;pointer-events:none}
.shelf.is-empty .tick{opacity:1}

.caps{display:grid}
.cap{
  grid-area:1 / 1;
  font-size:14px;line-height:24px;color:var(--ink-2);
  transition:opacity var(--ease);
}
.cap-empty{opacity:0}
.stage.is-empty .cap-empty{opacity:1}

a.item{cursor:pointer;-webkit-tap-highlight-color:transparent}
a.item:focus{outline:none}
a.item:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------- 브랜드별 코드 ---------- */
.codes{padding-top:32px}
.brand{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 32px;
  padding:32px 0;
}
.brand + .brand{border-top:1px solid var(--line)}
.brand{scroll-margin-top:24px}
.photo{
  flex:none;width:140px;height:140px;
  display:flex;justify-content:center;
}
.thumb{height:100%;width:auto}
.body{flex:1 0 0;min-width:300px;display:flex;flex-direction:column;gap:10px}
.who{display:flex;flex-direction:column;gap:10px}
.nameline{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.nameline h3{
  display:flex;align-items:flex-start;gap:2px;
  font-size:20px;line-height:28px;font-weight:700;letter-spacing:-0.2px;
}
.nameline sup{font-size:11px;line-height:14px;font-weight:500;letter-spacing:0;color:var(--ink-2);vertical-align:baseline}
.en{font-size:14px;line-height:28px;font-weight:500;color:var(--ink-2)}
.br{display:none}
.tag{
  align-self:center;
  padding:1px 6px;
  border:1px solid var(--ink-2);border-radius:2px;
  font-size:11px;line-height:16px;font-weight:500;color:var(--ink-2);
  white-space:nowrap;
}
.prod{font-size:14px;line-height:22px;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips li{
  display:flex;flex-direction:column;gap:4px;
  font-size:11px;line-height:14px;color:var(--ink-2);
}
.chip{display:block;width:56px;height:20px;border:1px solid var(--line);border-radius:2px}
.kvs{margin-top:10px;display:flex;flex-direction:column}
.kv{display:flex;align-items:flex-start;gap:24px;padding:8px 0;line-height:24px}
.kv:first-child{padding-top:0}
.kv + .kv{border-top:1px solid var(--line)}
.kv dt{flex:none;width:200px;font-size:14px;color:var(--ink-2)}
.kv dd{flex:1 1 0;min-width:0;font-size:16px;color:var(--ink)}
.kv:last-child dd{font-weight:500}

/* ---------- 관습 지도 ---------- */
.mapsec{padding:32px 0;display:flex;flex-direction:column;gap:20px}
.map{
  position:relative;
  width:100%;
  aspect-ratio:1160 / 700;
  font-size:12px;line-height:16px;
}
.map p{position:absolute;white-space:nowrap}
.conv{
  position:absolute;left:10.112%;top:23.82%;width:45.259%;height:39.286%;
  border-radius:50%;
  background:rgba(187,182,177,.18);
}
.ax{position:absolute;background:var(--line)}
.ax-h{left:10.776%;top:50%;width:78.448%;height:1px;margin-top:-1px}
.ax-v{left:50%;top:9.143%;height:81.714%;width:1px}
.al{font-weight:500;color:var(--ink-2)}
.al-l{right:89.741%;top:48.857%}
.al-r{left:90.086%;top:48.857%}
.al-t{left:50%;top:5.714%;transform:translateX(-50%)}
.al-b{left:50%;top:92%;transform:translateX(-50%)}
.conv-label{left:19.81%;top:54.891%;color:var(--ink-2)}
.gap{position:absolute;left:68.759%;top:25.863%;width:18.966%;height:18.857%}
.gap svg{display:block;width:100%;height:100%;overflow:visible}
.gap ellipse{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:6 4}
.map .gap-label{left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font-weight:500;color:var(--accent)}

.pt{
  position:absolute;left:var(--x);top:var(--y);
  width:4.828%;aspect-ratio:1;
}
.ring{
  display:flex;justify-content:center;align-items:center;
  width:100%;height:100%;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.55);
  overflow:hidden;
}
.mini{height:82%;width:auto}
.pl{
  position:absolute;top:50%;left:calc(100% + 6px);
  transform:translateY(-50%);
  white-space:nowrap;color:var(--ink);
}
.pt.left .pl{left:auto;right:calc(100% + 3px)}
.pt.torriden   {--x:35.819%;--y:52.537%}
.pt.roundlab   {--x:24.052%;--y:32.926%}
.pt.anua       {--x:60.138%;--y:42.731%}
.pt.aestura    {--x:47.586%;--y:70.514%}
.pt.ordinary   {--x:80.534%;--y:78.686%}
.pt.pyunkangyul{--x:31.897%;--y:57.44%}
.pt.numbuzin   {--x:63.276%;--y:26.389%}
.pt.now{--x:29.526%;--y:43.857%;width:1.724%}
.dot{
  display:block;width:100%;height:100%;
  border:1px solid var(--ink);border-radius:50%;
  background:var(--mint);
}
.pt.now .pl{font-weight:500}
.map-note{font-size:16px;line-height:27px;color:var(--ink)}

/* ---------- 맺음 ---------- */
.close{
  display:flex;gap:20px;
  padding:48px 0;
  border-bottom:1px solid var(--line);
}
.close .rule{flex:none;width:2px;background:var(--rule)}
.close p{
  flex:1 1 0;min-width:0;max-width:880px;
  font-size:24px;line-height:36px;font-weight:700;letter-spacing:-0.24px;
}

/* ---------- 출처 ---------- */
.sources{padding-top:32px;display:flex;flex-direction:column;gap:12px}
.sources li{
  display:flex;align-items:flex-start;gap:16px;
  padding:8px 0;
  line-height:20px;
}
.sources li + li{border-top:1px solid var(--line)}
.sources .n{flex:none;width:16px;font-size:11px;font-weight:500;color:var(--ink-2)}
.sources .s{flex:none;width:168px;font-size:14px;color:var(--ink-2)}
.sources a{
  flex:1 1 0;min-width:0;
  font-size:13px;color:var(--ink);
  text-decoration:none;
  overflow-wrap:anywhere;word-break:break-all;
}
.sources a:hover,.sources a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.sources a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.note{font-size:12px;line-height:20px;color:var(--ink-2)}

/* ---------- 390 ---------- */
@media (max-width:759px){
  .page{padding:40px 0 64px}

  .head{gap:20px;padding:0 16px 24px}
  .title h1{font-size:28px}
  .lead-1{font-size:20px;line-height:30px;letter-spacing:-0.2px}

  .label{padding:0 16px}

  .shelf-sec{padding:24px 0 32px;gap:16px}
  .track{height:calc(100vh * 2.4);height:calc(100svh * 2.4)}
  .stage{gap:16px}
  .shelf{
    --bottom:34.702%;
    --shadow:0 1px 3px rgba(41,36,23,.18);
    --shadow-lit:0 2px 6px rgba(41,36,23,.25);
    width:min(100%, calc((100svh - 80px) * .8));
    aspect-ratio:390 / 487;
  }
  .item.torriden   {--x:1.282%; --w:8.462%; --h:16.632%}
  .item.roundlab   {--x:11.436%;--w:14.308%;--h:29.158%}
  .item.anua       {--x:27.821%;--w:12.564%;--h:31.828%}
  .item.aestura    {--x:42.051%;--w:10%;    --h:20.123%}
  .item.ordinary   {--x:53.59%; --w:4.615%; --h:13.552%}
  .item.milligram  {--x:59.744%;--w:9.487%; --h:21.971%}
  .item.pyunkangyul{--x:69.962%;--w:15.205%;--h:29.158%}
  .item.numbuzin   {--x:85.641%;--w:13.077%;--h:29.158%}
  .tick{left:calc(64.487% - 1px)}
  .caps{padding:0 16px}

  .codes{padding:24px 16px 0}
  .codes .label{padding:0}
  .brand{display:block;padding:24px 0}
  .brand .photo{float:left;width:64px;height:96px;margin-right:16px}
  .body{display:contents}
  .who{
    min-height:96px;
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    overflow:hidden;
  }
  .nameline{gap:6px 8px}
  .en{font-size:13px}
  .br{display:block;flex-basis:100%;height:0}
  .tag{align-self:flex-start}
  .chips{clear:both;margin-top:16px}
  .kvs{margin-top:16px}
  .kv{flex-direction:column;gap:2px}
  .kv dt{width:auto;font-size:13px;line-height:20px}
  .kv dd{font-size:16px;line-height:24px}

  .mapsec{padding:24px 16px;gap:16px}
  .mapsec .label{padding:0}
  .map{aspect-ratio:358 / 400;font-size:11px;line-height:14px}
  .conv{left:1.427%;top:22.858%;width:55.114%;height:41.106%}
  .ax-h{left:2.235%;top:50.25%;width:95.531%}
  .ax-v{left:50%;top:7.5%;height:85.5%}
  .al-l{right:auto;left:2.235%;top:51.25%}
  .al-r{left:auto;right:2.235%;top:51.25%}
  .al-t{left:51.676%;top:7%;transform:none}
  .al-b{left:51.676%;top:90%;transform:none}
  .conv-label{display:none}
  .gap{left:73.777%;top:25.86%;width:23.464%;height:18%}
  .map .gap-label{bottom:calc(100% + 4px)}
  .pt{width:9.497%}
  .pl{left:calc(100% + 4px)}
  .pt.left .pl{right:calc(100% + 1px)}
  .pt.torriden   {--x:30.922%;--y:52.84%}
  .pt.roundlab   {--x:16.592%;--y:32.32%}
  .pt.anua       {--x:60.536%;--y:42.58%}
  .pt.aestura    {--x:45.251%;--y:71.65%}
  .pt.ordinary   {--x:85.374%;--y:80.2%}
  .pt.pyunkangyul{--x:23.911%;--y:59.97%}
  .pt.numbuzin   {--x:62.682%;--y:25.48%}
  .pt.ordinary .pl{left:auto;right:calc(100% + 4px)}
  .pt.now{--x:24.162%;--y:43.568%;width:3.911%}
  .pt.now .pl{left:calc(100% + 5px)}

  .close{gap:16px;padding:32px 16px}
  .close p{font-size:20px;line-height:30px;letter-spacing:-0.2px}

  .sources{padding:24px 16px 0}
  .sources .label{padding:0}
  .sources li{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px}
  .sources .n,.sources .s{width:auto;font-size:13px;font-weight:500;color:var(--ink-2)}
  .sources a{grid-column:1 / -1;font-size:12px;line-height:18px;position:relative}
  .sources a::after{content:"";position:absolute;inset:-13px 0}
}

/* 움직임을 줄인 자리: 멈추지도 넘기지도 않고 매대와 두 문장을 그대로 둔다 */
@media (prefers-reduced-motion:reduce){
  .track{height:auto}
  .stage{position:static}
  .cap-empty{opacity:1;grid-area:auto}
  .wall,.item,.cut,.tick,.cap{transition:none}
}