/* YOONMOOD — 단촐한 작업실 벽 (3차)
   기준: design/ART-DIRECTION.md 13절 — 공수규: "나무 같아 보이는, 가구 같아 보이는 디자인 다 뺍니다. 단촐하게만"
   구조 = 평면 강철선(#1E1D1A)과 종이 매트뿐. 질감·나뭇결·황동·그림자 장식 없음 · 작품 = 사진(색 얹지 않음)
   설비 = 기능별 색: 빨강 순환(Consultation · 지금 방) · 마젠타 포커스 · 노랑 로딩 · 파랑 바깥 링크 */
:root{
  --plaster:#EEEAE2; --plaster-hi:#F8F6F1; --plaster-lo:#E3DED5;
  --steel:#1E1D1A; --ink:#1E1D1A; --ink-2:#4A453E; --ink-3:#6A635A; --hair:rgba(30,29,26,.14);
  --red:#C8261F; --red-hi:#D42A20; --red-lo:#A41F19;
  --magenta:#B0306E; --magenta-dk:#EE8CBE;
  --volt:#E3AC24; --volt-l:#D39A16;
  --air-deep:#2F5FD0;
  --mat:#F7F4EE; --dark:#151311; --cream:#F1EBE1;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --m:16px; --gx:12px; --gy:32px; --top:60px; --cols:2;
  --fw:2px; --mat-w:7px; --mat-b:22px;
}
@media (min-width:768px){:root{--m:32px;--gx:20px;--gy:44px;--top:68px;--cols:3;--mat-w:9px;--mat-b:26px}}
@media (min-width:1180px){:root{--m:48px;--gx:28px;--gy:56px;--cols:4;--mat-w:11px;--mat-b:30px}}
@media (min-width:1440px){:root{--m:64px;--gx:32px;--gy:64px;--top:72px;--mat-w:12px;--mat-b:32px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--plaster)}
html:has(dialog[open]){overflow:hidden}
html[data-sun="night"]{background:#E8E3DA}
body{position:relative;margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
::selection{background:rgba(176,48,110,.2)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:50;padding:10px 14px;background:var(--steel);color:var(--cream);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1560px;margin:0 auto;padding-left:max(var(--m),env(safe-area-inset-left));padding-right:max(var(--m),env(safe-area-inset-right))}
#work{scroll-margin-top:calc(var(--top) + env(safe-area-inset-top))}

/* ── 햇빛: 시간대마다 모양이 다르다 (서울 시각). 벽에 드는 빛뿐, 물건은 그리지 않는다 ── */
body::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:0;top:calc(var(--top) - 2vh);width:min(64vw,900px);height:min(92vh,980px,170vw);opacity:.74;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496.8 560' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpattern id='p' width='69.5' height='113.5' patternUnits='userSpaceOnUse'%3E%3Crect width='62' height='106' fill='%23FFFDF7'/%3E%3C/pattern%3E%3C/defs%3E%3Cg transform='translate(226.3 0) skewX(-22)'%3E%3Crect width='270.5' height='560' fill='url(%23p)'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat;filter:blur(3px);
  -webkit-mask:linear-gradient(200deg,#000 20%,rgba(0,0,0,.35) 58%,transparent 84%);mask:linear-gradient(200deg,#000 20%,rgba(0,0,0,.35) 58%,transparent 84%)}
html[data-sun="am"] body::before{right:auto;left:0;width:min(62vw,860px);height:min(56vh,560px,110vw);top:calc(var(--top) + 3vh);opacity:.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 458.4 298' preserveAspectRatio='none'%3E%3Cg fill='%23FFFDF7' transform='skewX(28)'%3E%3Crect width='300' height='17'/%3E%3Crect y='19.5' width='300' height='20'/%3E%3Crect y='42' width='300' height='18'/%3E%3Crect y='62.5' width='300' height='23'/%3E%3Crect y='88.4' width='300' height='29'/%3E%3Crect y='121' width='300' height='33'/%3E%3Crect y='158.1' width='300' height='38'/%3E%3Crect y='200.9' width='300' height='46'/%3E%3Crect y='252.6' width='300' height='40'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask:linear-gradient(160deg,#000 22%,rgba(0,0,0,.3) 60%,transparent 88%);mask:linear-gradient(160deg,#000 22%,rgba(0,0,0,.3) 60%,transparent 88%)}
html[data-sun="night"] body::before{left:0;right:0;width:auto;height:min(80vh,820px);top:0;opacity:1;filter:none;-webkit-mask:none;mask:none;
  background:radial-gradient(42% 46% at 50% 0,rgba(255,247,230,.95),rgba(255,247,230,.35) 48%,transparent 74%)}

/* ── 헤더: 벽과 같은 면 + 강철선 한 줄 ── */
.top{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top);background:var(--plaster);border-bottom:1px solid var(--steel)}
html[data-sun="night"] .top{background:#E8E3DA}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--top)}
/* 로딩 선: 데이터를 받는 동안만 헤더 아래 선 위로 노란 신호가 지나간다 */
.conduit{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.conduit.is-live::after,.lb.is-loading .lb-volt::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,var(--volt-l) 40%,var(--volt) 62%,transparent);animation:current 1.4s linear infinite}
@keyframes current{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.logo{display:flex;align-items:baseline;gap:14px;min-width:0;text-decoration:none}
.logo b{font-weight:800;font-stretch:125%;font-size:17px;letter-spacing:.02em;line-height:1}
.logo span{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:768px){.logo b{font-size:19px}.logo span{display:block}}
@media (min-width:1180px){.logo b{font-size:20px}.logo span{font-size:11px}}

/* Consultation = 화면마다 빨간 알약 하나 (빨강 = 사람이 살롱으로 움직이는 길). 평면 */
.consult{flex:none;display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px 0 16px;border-radius:999px;text-decoration:none;background:var(--red);color:#fff;
  font-weight:600;font-stretch:112%;font-size:11px;letter-spacing:.09em;text-transform:uppercase;line-height:1;transition:background-color .18s}
.consult svg{width:12px;height:12px;transition:transform .22s var(--ease)}
.consult:hover{background:var(--red-hi)}
.consult:hover svg{transform:translateX(3px)}
.consult:active{background:var(--red-lo)}
@media (min-width:768px){.consult{height:40px;gap:10px;font-size:12.5px;letter-spacing:.1em;padding:0 18px 0 20px}.consult svg{width:13px;height:13px}}

/* ── 머리 종류: 강철선 한 줄로 나눈 칸. 지금 방 = 빨간 표시등 ── */
.cats{margin:32px calc(-1 * var(--m)) 0;padding:0 var(--m);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask:linear-gradient(90deg,transparent,#000 var(--m),#000 calc(100% - var(--m)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--m),#000 calc(100% - var(--m)),transparent)}
.cats::-webkit-scrollbar{display:none}
.cats-in{display:inline-flex;vertical-align:top;min-height:42px;border:1px solid var(--steel)}
.cats-in:empty{min-width:280px}
.cats button{flex:none;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 14px;border:0;border-left:1px solid var(--steel);background:transparent;cursor:pointer;
  font-weight:600;font-stretch:112%;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--ink-2);transition:background-color .18s,color .18s}
.cats button:first-child{border-left:0}
.cats .lamp{flex:none;width:7px;height:7px;border:1px solid var(--ink-3);transition:background-color .12s linear,border-color .12s linear}
.cats sup{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:0;color:var(--ink-3);top:-.45em}
.cats button:hover{background:var(--plaster-hi);color:var(--ink)}
.cats button:hover .lamp{border-color:var(--red)}
.cats button:focus-visible{outline-offset:-4px}
.cats button[aria-pressed="true"]{background:var(--plaster-hi);color:var(--ink);font-weight:700}
.cats button[aria-pressed="true"] .lamp{background:var(--red);border-color:var(--red)}
@media (min-width:768px){.cats{margin-top:40px}.cats-in{min-height:44px}.cats button{height:42px;font-size:12px;padding:0 18px 0 16px}}
@media (min-width:1180px){.cats{margin-top:48px}}
@media (min-width:1440px){.cats{margin-top:52px}}

/* ── 색인 줄: 방 이름 · 기록 띠(한 칸 = 한 달, 작품 수만큼 눈금) · 작품 수 ── */
.index{display:flex;align-items:baseline;gap:14px;margin:18px 0 calc(var(--gy) * .62)}
.index h2{margin:0;flex:none;max-width:70%;font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;line-height:1.1;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.index .rule{flex:1;min-width:24px;align-self:center;display:flex;align-items:flex-end;height:13px;background:linear-gradient(var(--hair),var(--hair)) 0 100%/100% 1px no-repeat}
.rule i{position:relative;flex:1;min-width:0;height:100%;display:flex;justify-content:center;align-items:flex-end}
.rule i::before{content:"";width:1px;height:3px;background:rgba(30,29,26,.28)}
.rule i[style]::before{width:2px;height:calc(3px + var(--n) * 2px);background:var(--ink-2);transform-origin:50% 100%;animation:tally .24s var(--ease) both}
.rule i.y::after{content:"";position:absolute;left:0;bottom:0;width:1px;height:13px;background:rgba(30,29,26,.22)}
@keyframes tally{from{transform:scaleY(0)}}
.index .meta{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
@media (min-width:768px){.index{margin-top:22px}.index h2{font-size:26px}.index .meta{font-size:10.5px}}
@media (min-width:1180px){.index{margin-top:26px}.index h2{font-size:28px}.index .meta{font-size:11px}}
@media (min-width:1440px){.index h2{font-size:30px}}

/* ── 벽: 얇은 강철 틀 + 종이 매트. 그 밖엔 아무것도 없다 ── */
.grid{list-style:none;margin:0;padding:0 0 72px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gy) var(--gx)}
@media (min-width:768px){.grid{padding-bottom:96px}}
@media (min-width:1180px){.grid{padding-bottom:120px}}
@media (min-width:1440px){.grid{padding-bottom:136px}}
.work{position:relative;min-width:0;animation:hang .56s var(--ease) both;animation-delay:calc(min(var(--i,0),12) * 40ms)}
@keyframes hang{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tile{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.tile:focus-visible{outline:none}
.tile:focus-visible .frame{outline:2px solid var(--magenta);outline-offset:4px}
.frame{display:block;padding:var(--mat-w) var(--mat-w) 0;border:var(--fw) solid var(--steel);background:var(--mat)}
.ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--plaster-lo)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover .ph img{transform:scale(1.02)}
.ph.is-missing img{opacity:0}
.ph.is-missing::after{content:"Image unavailable";position:absolute;inset:auto 0 0;padding:12px;font:400 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* 매트 아래 기입: 왼쪽 등록번호, 오른쪽 연도 */
.pencil{display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--mat-b);padding:2px 1px 0;font:400 9px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pencil em{font-family:var(--serif);font-size:11.5px;letter-spacing:0}
@media (min-width:768px){.pencil{font-size:9.5px}.pencil em{font-size:12.5px}}
@media (min-width:1180px){.pencil{font-size:10px}.pencil em{font-size:13.5px}}
@media (min-width:1440px){.pencil em{font-size:14px}}
@media (hover:none){.tile:hover .ph img{transform:none}}

/* 캡션: 제목(이탤릭) / 머리 종류 */
.cap{display:block;padding-top:12px}
.cap .t{text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.15;letter-spacing:.003em;overflow-wrap:anywhere}
.cap .m{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;line-height:1.45;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
@media (min-width:768px){.cap .t{font-size:18px}.cap .m{font-size:10px}}
@media (min-width:1180px){.cap .t{font-size:19px}.cap .m{font-size:10.5px}.cap{padding-top:14px}}
@media (min-width:1440px){.cap .t{font-size:21px}}

/* 로딩: 같은 틀, 매트 창 안으로 빛이 지나간다 */
.ghost{animation:none}
.ghost .tile{cursor:default}
.ghost .ph{background:linear-gradient(100deg,var(--plaster-lo) 30%,#ECE8E0 50%,var(--plaster-lo) 70%) 0 0/300% 100%;animation:pass 1.6s linear infinite}
.ghost .pencil i{display:block;width:34%;height:5px;background:var(--plaster-lo)}
.ghost .pencil i+i{width:14%}
.ghost .cap i{display:block;width:72%;height:13px;background:var(--plaster-lo)}
.ghost .cap i+i{width:48%;height:8px;margin-top:8px}
@keyframes pass{to{background-position:-150% 0}}

/* 비어 있음 · 오류 */
.msg{grid-column:1/-1;display:flex;align-items:center;gap:20px;padding:8px 0 24px}
.msg p{margin:0;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.2;color:var(--ink-2)}
.msg .void{flex:none;width:72px;aspect-ratio:4/5;border:2px solid var(--steel);background:linear-gradient(var(--plaster-lo),var(--plaster-lo)) 5px 5px/calc(100% - 10px) calc(100% - 20px) no-repeat,var(--mat)}
.msg .led{flex:none;width:9px;height:9px;border-radius:50%;background:#B8B1A6;box-shadow:0 0 0 3px rgba(211,154,22,.22)}
.msg button{margin-left:4px;height:36px;padding:0 16px;border:1px solid var(--steel);background:none;cursor:pointer;font:600 11px/1 var(--sans);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase}
.msg button:hover{background:var(--steel);color:var(--cream)}
@media (min-width:768px){.msg p{font-size:26px}}

/* ── 바닥: 강철선 한 줄 아래 연락처 다섯 칸. 글만 ── */
.foot{margin-top:auto;border-top:1px solid var(--steel)}
.foot-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;padding-top:28px;padding-bottom:calc(36px + env(safe-area-inset-bottom))}
.f{display:block;min-width:0;text-decoration:none}
.f-studio{grid-column:1/-1}
.f .tag{display:block;padding-bottom:8px;margin-bottom:11px;border-bottom:1px solid var(--hair);font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.f b{display:block;font-weight:800;font-stretch:125%;font-size:15px;letter-spacing:.03em;line-height:1}
.f p,.f .go{display:block;margin:0;font:400 11px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.f b+p{margin-top:8px}
.f .go{color:var(--ink)}
.f .go svg{display:inline-block;width:10px;height:10px;margin-left:6px;vertical-align:0;color:var(--air-deep);transition:transform .22s var(--ease)}
a.f:hover .go{text-decoration:underline;text-decoration-color:var(--air-deep);text-decoration-thickness:1px;text-underline-offset:4px}
a.f:hover .go svg{transform:translate(2px,-2px)}
@media (min-width:768px){
  .foot-in{grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 20px;padding-top:34px}
  .f{grid-column:span 2}.f-studio,.f-salon{grid-column:span 3}
}
@media (min-width:1180px){
  .foot-in{grid-template-columns:1fr 1.25fr 1fr 1fr 1fr;gap:28px;padding-top:40px;padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  .f,.f-studio,.f-salon{grid-column:auto}
  .f p,.f .go{font-size:11.5px}
}

/* ── 크게 보기: 어두운 면 위에 사진 한 장 ── */
.lb{padding:0;border:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:transparent;color:var(--cream);overflow:hidden}
.lb::backdrop{background:var(--dark)}
.lb[open]{animation:dim .24s ease both}
.lb[open] .lb-plate{animation:near .32s var(--ease) both}
@keyframes dim{from{opacity:0}to{opacity:1}}
@keyframes near{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb :focus-visible{outline-color:var(--magenta-dk)}
.lb-in:focus{outline:none}
.lb-in{position:relative;height:100%;display:flex;flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) max(var(--m),env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(var(--m),env(safe-area-inset-left))}
.lb-volt{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden}
.lb-bar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px;height:46px}
.lb-count{min-width:0;display:flex;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#A8A096;white-space:nowrap}
.lb-count [data-lb="room"]{overflow:hidden;text-overflow:ellipsis;color:var(--cream)}
.lb-close{flex:none;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 0 0 14px;border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.lb-close svg{width:12px;height:12px;transition:transform .22s var(--ease)}
.lb-close:hover svg{transform:rotate(90deg)}
.lb-fig{flex:1;min-height:0;margin:0;display:flex;align-items:center;justify-content:center}
.lb-plate{display:inline-flex;flex-direction:column;max-width:100%;margin:0}
.lb-plate img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom));object-fit:contain;touch-action:pan-y;transition:opacity .18s ease-out}
.lb.is-loading .lb-plate img:not(.is-in){opacity:0}
.lb-cap{width:0;min-width:100%;padding-top:16px}
.datum{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:#8E867C;font-variant-numeric:tabular-nums}
.datum i{flex:1;height:1px;background:rgba(241,235,225,.16)}
.lb-title{display:block;margin-top:8px;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.08;overflow-wrap:anywhere;text-wrap:balance}
.nw{white-space:nowrap}
.lb-meta,.lb-by,.lb-date{display:block;font-family:var(--mono);font-size:10.5px;line-height:1.6;letter-spacing:.07em;text-transform:uppercase;color:#A8A096}
.lb-meta{margin-top:8px;color:var(--cream)}
.lb-by{margin-top:10px;padding-top:10px;border-top:1px solid rgba(241,235,225,.14)}
.lb-date:empty{display:none}
.lb-nav{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(241,235,225,.3);background:transparent;cursor:pointer;color:var(--cream);
  transition:background-color .18s,border-color .18s}
.lb-nav svg{width:18px;height:18px}
.lb-nav:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.lb-nav:active:not(:disabled){background:var(--red-lo);border-color:var(--red-lo)}
.lb-nav:disabled{opacity:.2;cursor:default}
.lb-nav.prev{left:max(var(--m),env(safe-area-inset-left))}
.lb-nav.next{right:max(var(--m),env(safe-area-inset-right))}
@media (min-width:768px){
  .lb-in{padding-bottom:max(22px,env(safe-area-inset-bottom));padding-left:calc(var(--m) + 76px);padding-right:calc(var(--m) + 76px)}
  .lb-bar{margin:0 -76px}
  .lb-nav{top:50%;bottom:auto;translate:0 -50%;width:52px;height:52px}
  .lb-plate img{max-height:calc(100dvh - 250px)}
  .lb-title{font-size:30px}
  .lb-count,.lb-close,.lb-meta,.lb-by,.lb-date{font-size:11px}
}
@media (min-width:1024px){
  .lb-plate{flex-direction:row;align-items:flex-end;gap:32px}
  .lb-plate img{max-height:calc(100dvh - 128px);max-width:calc(100vw - 2 * var(--m) - 152px - 272px)}
  .lb-cap{width:240px;min-width:0;flex:none;padding:0 0 4px}
  .lb-title{font-size:34px}
}
@media (min-width:1440px){.lb-title{font-size:36px}}

/* ── 404: 비어 있는 틀 하나 ── */
.lost{flex:1;display:flex;justify-content:center;padding:44px 0 72px}
.lost-in{display:grid;grid-template-columns:min(100%,272px);align-content:start}
.lost-cap{padding-top:28px}
.lost-cap h1{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:40px;line-height:1.02;letter-spacing:-.005em;text-wrap:balance}
.lost-cap p{margin:10px 0 0;font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* 돌아가는 길 = 선 하나로 두른 칸 (빨간 알약은 화면마다 Consultation 하나) */
.back{display:inline-flex;align-items:center;gap:10px;height:42px;margin-top:24px;padding:0 18px 0 16px;border:1px solid var(--steel);text-decoration:none;color:var(--ink);
  font-weight:600;font-stretch:112%;font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1;transition:background-color .18s,color .18s}
.back svg{width:13px;height:13px;transition:transform .22s var(--ease)}
.back:hover{background:var(--steel);color:var(--cream)}
.back:hover svg{transform:translateX(-3px)}
@media (min-width:768px){
  .lost{padding:64px 0 96px}
  .lost-in{grid-template-columns:288px 300px;column-gap:72px;align-items:end}
  .lost-cap{padding:0 0 18px}
  .lost-cap h1{font-size:52px}
}
@media (min-width:1180px){.lost{padding:72px 0 120px}.lost-in{grid-template-columns:320px 340px;column-gap:80px}.lost-cap h1{font-size:60px}.lost-cap p{font-size:11px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .conduit.is-live::after,.lb.is-loading .lb-volt::after{animation:none;width:100%;transform:none;background:var(--volt-l)}
  .tile:hover .ph img{transform:none}
}