/* 디자인 방향 탐색. 넓은 자리는 1160 본문, 760 아래는 390 지면.
   넓은 자리: 세 방향을 한 표에 나란히 두고, 열을 누르면 그 열에 선이 서고 나머지 두 열은 옅어진다.
   390: 방향 하나씩 본다. 스케치 띠는 옆으로 밀리고, 고른 방향의 뿌리 스케치 다섯 장만 진하게 남는다. */

:root{
  --ink:#292416;
  --ink-2:#574D3F;
  --line:#D1CFCB;
  --tile:#E6E1D6;
  --paper:#F2F1EF;
  --accent:#C8542E;
  --ko:"Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:200ms ease;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#FFFFFF}
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{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus{outline:none}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.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)}

/* ---------- 구역 이름 ---------- */
.sec{border-bottom:1px solid var(--line)}
.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)}
.mono-label{
  font-family:var(--mono);font-weight:400;
  font-size:11px;line-height:14px;letter-spacing:0.8px;
  color:var(--ink-2);
}
.mini{display:flex;align-items:center;gap:10px;font-weight:400}
.mini-ko{font-size:14px;line-height:20px;font-weight:500}

/* ---------- 스케치 ---------- */
.sketches{padding:32px 0;display:flex;flex-direction:column;gap:16px}
.strip{position:relative}
.tiles{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:4px}
.tile{position:relative;aspect-ratio:1;transition:opacity var(--ease)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile::after{
  content:"";position:absolute;inset:0;
  border:1px solid var(--tile);
  pointer-events:none;
  transition:border-color var(--ease);
}
/* 방향 하나를 고르면 그 방향의 뿌리 다섯 장만 남는다 */
.strip.is-on .tile{opacity:.25}
.strip[data-dir="a"] .tile[data-root~="a"],
.strip[data-dir="b"] .tile[data-root~="b"],
.strip[data-dir="c"] .tile[data-root~="c"]{opacity:1}
.strip[data-dir="a"] .tile[data-root~="a"]::after,
.strip[data-dir="b"] .tile[data-root~="b"]::after,
.strip[data-dir="c"] .tile[data-root~="c"]::after{border-color:var(--ink)}

/* ---------- 나란히 보기 ---------- */
.compare{padding:32px 0;display:flex;flex-direction:column;gap:20px}
.picker{display:none}

.table{
  --name:176px;
  --gap:24px;
  --col:calc((100% - var(--name) - 3 * var(--gap)) / 3);
  position:relative;
}
.row{
  display:grid;
  grid-template-columns:var(--name) repeat(3,minmax(0,1fr));
  column-gap:var(--gap);
  align-items:start;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.cell{min-width:0;display:flex;flex-direction:column;gap:12px;transition:opacity var(--ease)}

/* 표 머리: 표를 읽는 동안 위에 붙어 있다 */
.row-head{
  position:sticky;top:0;z-index:2;
  background:#FFFFFF;
  padding:16px 0 20px;
}
.col-b{
  display:flex;flex-direction:column;align-items:flex-start;
  width:100%;text-align:left;
}
.letter{font-size:72px;line-height:80px;font-weight:700;letter-spacing:-1.5px;color:var(--accent)}
.dname{font-size:22px;line-height:32px;font-weight:700;letter-spacing:-0.22px}

.rname{display:flex;flex-direction:column;gap:4px;min-width:0}
.rname h3{font-size:14px;line-height:20px;font-weight:500}
.scene{font-size:12px;line-height:16px;color:var(--ink-2)}

/* 토너, 세럼, 크림: 라벨과 제품 두 줄이 같은 값을 쓴다 */
.seg{
  display:inline-flex;align-self:flex-start;
  padding:3px;
  border:1px solid var(--line);border-radius:999px;
  background:#FFFFFF;
}
.seg-b{
  padding:2px 10px;border-radius:999px;
  font-size:12px;line-height:20px;font-weight:500;color:var(--ink-2);
  transition:background-color var(--ease),color var(--ease);
}
.seg-b[aria-pressed="true"]{background:var(--ink);color:#FFFFFF}
.seg-b:focus-visible{outline-offset:1px}

.box{position:relative;width:100%}
.box img,.box picture{position:absolute;inset:0;width:100%;height:100%}
.box-wm{aspect-ratio:304 / 136}
.box-lh{aspect-ratio:304 / 100}
.box-wm img,.box-lh img,.box-lv img,.box-pm img{object-fit:contain}
.pair{display:grid;grid-template-columns:110fr 182fr;gap:12px}
.box-lv{aspect-ratio:110 / 96}
.box-pm{aspect-ratio:182 / 96}
.box-co{aspect-ratio:304 / 63}
.box-co img,.box-front img,.box-shelf img,.box-ig img,.box-web img{object-fit:cover}
/* 로고 구성과 활용: 그림 줄 A|B|C 아래에 그 줄의 설명이 A와 B 폭으로 선다.
   줄 높이는 내용이 정하고, 설명은 열이 옅어질 때도 그대로 진하다. */
.row-lock{grid-template-rows:repeat(8,auto);row-gap:0}
.row-lock .rname{grid-row:1 / 9}
.row-lock .cell{
  grid-row:1 / 9;
  display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);
  row-gap:0;align-items:start;
}
.row-lock .rname{grid-column:1}
.row-lock .cell[data-col="a"]{grid-column:2}
.row-lock .cell[data-col="b"]{grid-column:3}
.row-lock .cell[data-col="c"]{grid-column:4}
.row-lock .box-lh{grid-row:1}
.row-lock .pair{grid-row:4}
.row-lock .box-co{grid-row:7}
.row-lock .expl{grid-column:2 / -1;max-width:640px;margin-top:12px}
.row-lock .expl-1{grid-row:2}
.row-lock .expl-2{grid-row:5}
.row-lock .expl-3{grid-row:8}
/* 그림 묶음 사이의 가는 선: 행 이름 칸은 건드리지 않고, 열이 옅어져도 그대로 */
.lv-rule{grid-column:2 / -1;height:1px;margin:24px 0;background:var(--line)}
.lv-rule-1{grid-row:3}
.lv-rule-2{grid-row:6}
.expl{display:flex;flex-direction:column;gap:2px}
.expl-t{font-size:13px;line-height:20px;font-weight:500}
.expl-d{font-size:13px;line-height:20px;color:var(--ink-2)}

.cap{display:flex;flex-direction:column;gap:4px}
.cap-t{font-size:16px;line-height:24px;font-weight:500}
.cap-d{font-size:13px;line-height:20px;color:var(--ink-2)}

.lab{
  aspect-ratio:304 / 200;
  display:grid;place-items:center;
  background:var(--paper);
}
.lab-i{grid-area:1 / 1;height:auto;box-shadow:0 0 0 1px var(--line)}
/* 실제 크기의 비: 토너 100 mm, 세럼 45 mm, 크림 60 mm */
.lab-i.p-toner{width:86.842%}
.lab-i.p-serum{width:39.145%}
.lab-i.p-cream{width:51.974%}

.box-front{aspect-ratio:304 / 405}
.box-shelf{aspect-ratio:304 / 203}
.box-shelf picture{display:block}
.row-screen .cell{gap:8px}
.box-ig{aspect-ratio:390 / 844}
.box-web{aspect-ratio:304 / 228}

.p-serum,.p-cream{display:none}
.table[data-product="serum"] .p-toner,
.table[data-product="cream"] .p-toner{display:none}
.table[data-product="serum"] .p-serum,
.table[data-product="cream"] .p-cream{display:block}

.note{font-size:12px;line-height:16px;color:var(--ink-2)}

/* 열 하나에 선을 세운다: 열 바깥으로 12씩 */
.frame{
  position:absolute;top:0;bottom:0;z-index:3;
  width:calc(var(--col) + var(--gap));
  left:calc(var(--name) + var(--gap) / 2);
  border:1px solid var(--ink);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--ease);
}
.table[data-focus="b"] .frame{left:calc(var(--name) + var(--gap) * 1.5 + var(--col))}
.table[data-focus="c"] .frame{left:calc(var(--name) + var(--gap) * 2.5 + var(--col) * 2)}
.table.is-focus .frame{opacity:1}
.table.is-focus .cell{opacity:.6}
.table[data-focus="a"] .cell[data-col="a"],
.table[data-focus="b"] .cell[data-col="b"],
.table[data-focus="c"] .cell[data-col="c"]{opacity:1}

@media (hover:hover) and (pointer:fine){
  .row:not(.row-head) .cell{cursor:pointer}
}

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

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

  .sketches{padding:24px 0 24px 16px}
  .strip{
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .strip::-webkit-scrollbar{display:none}
  .tiles{display:flex;gap:4px;width:max-content;padding-right:16px}
  .tile{flex:none;width:48px;height:48px}

  .compare{padding:24px 16px;gap:16px}

  .picker{
    display:block;
    position:sticky;top:0;z-index:4;
    margin:-8px 0;padding:8px 0;
    background:#FFFFFF;
  }
  .pick{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    padding:2px;
    border:1px solid var(--line);border-radius:999px;
  }
  .pick-b{
    padding:8px 12px;border-radius:999px;
    font-size:14px;line-height:20px;font-weight:500;color:var(--ink-2);
    transition:background-color var(--ease),color var(--ease);
  }
  .pick-b[aria-pressed="true"]{background:var(--ink);color:#FFFFFF}

  .frame{display:none}
  .table.is-focus .cell{opacity:1}
  .row{display:flex;flex-direction:column;gap:12px;padding:20px 0}
  .row-lock{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(9,auto);row-gap:12px;
  }
  .row-lock .rname{grid-row:1;grid-column:1;padding-bottom:4px}
  .row-lock .cell,
  .row-lock .cell[data-col]{grid-row:2 / 10;grid-column:1;row-gap:12px}
  .row-lock .expl{grid-column:1;max-width:none;margin:0;padding-bottom:12px}
  .row-lock .expl-1{grid-row:3}
  .row-lock .expl-2{grid-row:6}
  .row-lock .expl-3{grid-row:9;padding-bottom:0}
  .lv-rule{grid-column:1;margin:0 0 12px}
  .lv-rule-1{grid-row:4}
  .lv-rule-2{grid-row:7}
  .row-head{position:static;padding:8px 0 16px}
  .row-head .rname{display:none}
  .table[data-pick="a"] .cell:not([data-col="a"]),
  .table[data-pick="b"] .cell:not([data-col="b"]),
  .table[data-pick="c"] .cell:not([data-col="c"]){display:none}
  .cell{width:100%}
  .col-b{pointer-events:none}

  .box-wm{aspect-ratio:358 / 150}
  .box-lh{aspect-ratio:358 / 118}
  .pair{grid-template-columns:130fr 216fr}
  .box-lv{aspect-ratio:130 / 110}
  .box-pm{aspect-ratio:216 / 110}
  .box-co{aspect-ratio:358 / 74}
  .box-shelf{aspect-ratio:358 / 448}
  .box-web{aspect-ratio:358 / 269}
}

/* 움직임을 줄인 자리: 바뀌는 것은 그대로, 넘어가는 시간만 뺀다 */
@media (prefers-reduced-motion:reduce){
  .tile,.tile::after,.cell,.seg-b,.pick-b,.frame{transition:none}
}