/* Toasty Works — 사이트 공통
   화면 안쪽 치수·색은 전부 각 페이지의 인라인 스타일에 있다(도면 그대로).
   여기 있는 것은 전역 설정 · 링크 · 안 비교용 프로토타입 페이지의 틀. */

/* ── 전역 (도면 helmet 그대로) ─────────────────────────── */
html,body{margin:0;background:#FBF9F4}
body{
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:#16130F;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#D4491F;color:#fff}
@keyframes tw-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tw-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tw-pan{0%{transform:scale(1.06) translate(0,0)}50%{transform:scale(1.14) translate(-2%,-2%)}100%{transform:scale(1.06) translate(0,0)}}
@keyframes tw-sweep{0%{transform:translateX(-40%)}100%{transform:translateX(140%)}}
img{max-width:100%;display:block}

/* ── 사이트 ────────────────────────────────────────────
   cqi(컨테이너 쿼리)가 이 폭을 기준으로 계산된다.
   도면 캔버스는 1280px였고 여기서는 1440px까지 넓힌다. */
.site{
  container-type:inline-size;
  max-width:1440px;margin-inline:auto;
  background:#FBF9F4;
}

/* 도면에는 <a>가 하나도 없다(전부 onClick). 링크 색이 본문을 덮지 않게 한다 */
a{color:inherit;text-decoration:none}
.site nav a:hover{text-decoration:underline;text-underline-offset:5px}
.lnk{transition:opacity .2s ease}
.lnk:hover{opacity:.86}

/* ── 연락 폼 서비스 칩 ─────────────────────────────────── */
[data-pick]{background:rgba(22,19,15,.06);color:#4A443B}
[data-svc="s"] [data-pick="s"],
[data-svc="v"] [data-pick="v"],
[data-svc="r"] [data-pick="r"]{background:#16130F;color:#FBF9F4}

@media (prefers-reduced-motion:reduce){
  [style*="tw-marquee"],[style*="tw-pan"],[style*="tw-sweep"]{animation:none !important}
  .lnk{transition:none}
}

/* ══ 여기부터는 prototype.html 전용 ═══════════════════════
   7a·7b와 서비스 네 안을 나란히 비교하려고 남겨둔 페이지다.
   진짜 사이트 페이지에는 아래 규칙이 걸리지 않는다. */

body.proto{background:#E8E4DA}
#app{--frame-w:1280px}
#app[data-device="mobile"]{--frame-w:390px}

.page{
  height:100vh;height:100dvh;overflow:hidden;box-sizing:border-box;
  display:flex;flex-direction:column;gap:14px;
  padding:14px 16px 20px;
}
.frame{
  flex:1 1 auto;min-height:0;
  width:var(--frame-w);max-width:100%;margin-inline:auto;
  overflow:auto;overscroll-behavior:contain;
  container-type:inline-size;
  background:#FBF9F4;
  border:1px solid rgba(0,0,0,.14);border-radius:16px;
  box-shadow:0 26px 70px rgba(0,0,0,.13);
}

.tool{
  flex:none;align-self:center;max-width:100%;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  padding:9px 12px;background:#FBF9F4;
  border:1px solid rgba(0,0,0,.12);border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  font-size:11.5px;
}
.tool .brand{font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;color:#8A8377;padding-left:6px}
.tool .lbl{font:600 9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#8A8377}
.tool .div{width:1px;height:16px;background:rgba(0,0,0,.12)}
.tool .grp{display:flex;gap:2px;align-items:center}
.tool button{border:none;background:transparent;color:#4A443B;padding:6px 11px;border-radius:999px;font:500 11.5px/1 inherit;cursor:pointer}
.tool button.mono{font:600 11px/1 ui-monospace,Menlo,monospace;padding:6px 10px}
.tool .site-link{padding:6px 11px;border-radius:999px;background:#16130F;color:#FBF9F4;font-size:11.5px}

#app[data-route="home"]     .tool [data-go="home"],
#app[data-route="work"]     .tool [data-go="work"],
#app[data-route="case"]     .tool [data-go="case"],
#app[data-route="services"] .tool [data-go="services"],
#app[data-route="about"]    .tool [data-go="about"],
#app[data-route="journal"]  .tool [data-go="journal"],
#app[data-route="contact"]  .tool [data-go="contact"]{background:#16130F;color:#FBF9F4}

#app[data-variant="a"] .tool [data-set="variant:a"],
#app[data-variant="b"] .tool [data-set="variant:b"],
#app[data-slayout="1"] .tool [data-set="slayout:1"],
#app[data-slayout="2"] .tool [data-set="slayout:2"],
#app[data-slayout="3"] .tool [data-set="slayout:3"],
#app[data-slayout="4"] .tool [data-set="slayout:4"],
#app[data-device="desktop"] .tool [data-set="device:desktop"],
#app[data-device="mobile"]  .tool [data-set="device:mobile"]{background:#D4491F;color:#FBF9F4}

[data-screen],[data-v],[data-sl],[data-accbody]{display:none}
#app[data-route="home"]     [data-screen="home"],
#app[data-route="work"]     [data-screen="work"],
#app[data-route="case"]     [data-screen="case"],
#app[data-route="services"] [data-screen="services"],
#app[data-route="about"]    [data-screen="about"],
#app[data-route="journal"]  [data-screen="journal"],
#app[data-route="contact"]  [data-screen="contact"],
#app[data-variant="a"] [data-v="a"],
#app[data-variant="b"] [data-v="b"],
#app[data-slayout="1"] [data-sl="1"],
#app[data-slayout="2"] [data-sl="2"],
#app[data-slayout="3"] [data-sl="3"],
#app[data-slayout="4"] [data-sl="4"],
#app[data-open="s1"] [data-accbody="s1"],
#app[data-open="s2"] [data-accbody="s2"],
#app[data-open="s3"] [data-accbody="s3"]{display:block}

[data-sign]::before{content:"+"}
#app[data-open="s1"] [data-sign="s1"]::before,
#app[data-open="s2"] [data-sign="s2"]::before,
#app[data-open="s3"] [data-sign="s3"]::before{content:"−"}
#app[data-open="s1"] [data-acc="s1"],
#app[data-open="s2"] [data-acc="s2"],
#app[data-open="s3"] [data-acc="s3"]{background:#F1EDE3}

/* ── 폼 — 도면은 선만 그려뒀다. 실제로 입력되게 바꾼 자리 ── */
.site input,.site textarea{
  width:100%;box-sizing:border-box;
  border:none;border-bottom:1px solid #16130F;border-radius:0;
  background:transparent;color:#16130F;
  font-family:inherit;font-size:clamp(13px,1.25cqi,16.5px);
  padding:0 2px;
}
.site input{height:clamp(38px,3.4cqi,48px)}
.site textarea{height:clamp(80px,8cqi,120px);resize:vertical;padding-top:10px;line-height:1.6}
.site input:focus,.site textarea:focus{outline:none;border-bottom-color:#D4491F}
.site input::placeholder{color:#8A8377}
.site input.pill{
  height:auto;padding:9px 14px;border:1px solid rgba(22,19,15,.3);border-radius:999px;
  font-size:clamp(11px,1.1cqi,14px);
}
.site input.pill:focus{border-color:#D4491F}
[data-budget]{border:1px solid rgba(22,19,15,.24)}
[data-budget].on{border-color:#16130F;background:#16130F;color:#FBF9F4}

/* ── 아직 안 쓴 문구 자리 ─────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.todo{color:#8A8377}
.case-c4{background:#16130F}
.case-c4 main{background:#16130F}
.todo::before{
  content:"쓸 자리";
  display:inline-block;vertical-align:middle;
  margin-right:9px;padding:4px 8px;border-radius:5px;
  background:rgba(212,73,31,.12);color:#D4491F;
  font:600 9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;
}
.todo-d{color:rgba(251,249,244,.55)}
.todo-d::before{background:rgba(201,214,74,.16);color:#C9D64A}

/* div을 a로 바꾼 블록은 기본이 inline이라 높이가 먹지 않는다.
   인라인 스타일에 display가 있으면 그쪽이 이긴다 */
a.lnk{display:block}

/* 홈 케이스 컷 — 사진 비율에 맞춘다.
   도면은 620px 고정이었는데 사진이 가로로 심하게 잘렸다 */
[data-case]{aspect-ratio:16/10}
@media (max-width:640px){[data-case]{aspect-ratio:4/3}}

/* 제목 태그 — 검색·AI 크롤러가 문서 구조를 읽게 h1·h2로 바꿨다.
   보이는 모양은 인라인 스타일이 그대로 잡으므로 브라우저 기본값만 지운다 */
h1,h2,h3,h4{margin:0;font:inherit;letter-spacing:inherit;color:inherit}

/* ══ 사진 전체보기 ═══════════════════════════════════ */
.shotbox{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;gap:clamp(8px,2vw,26px);
  padding:clamp(14px,3vw,40px);
  background:rgba(12,10,8,.94);backdrop-filter:blur(6px);
}
.shotbox.on{display:flex}
.shotbox img{
  max-width:100%;max-height:calc(100vh - clamp(88px,14vw,150px));
  width:auto;height:auto;object-fit:contain;
  border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.shotbox button{
  flex:none;background:transparent;color:#FBF9F4;cursor:pointer;
  border:1px solid rgba(251,249,244,.4);border-radius:999px;
  width:44px;height:44px;font-size:15px;line-height:1;
}
.shotbox button:hover{background:rgba(251,249,244,.12)}
.shotbox button:focus-visible{outline:2px solid #C9D64A;outline-offset:2px}
.shotbox-x{position:absolute;top:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px)}
.shotbox-c{
  position:absolute;left:0;right:0;bottom:clamp(14px,2.6vw,30px);text-align:center;
  font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;color:rgba(251,249,244,.6);
}
.case-c4 main [role="button"]:focus-visible{outline:2px solid #C9D64A;outline-offset:-2px}

@media (max-width:620px){
  .shotbox-p,.shotbox-n{position:absolute;bottom:clamp(48px,9vw,64px)}
  .shotbox-p{left:clamp(12px,4vw,24px)}
  .shotbox-n{right:clamp(12px,4vw,24px)}
}