/* 다크 테마 + 좌측 사이드바. 과도한 카드나 장식을 쓰지 않는다.
   초기에는 흰색 기반이었으나 사용자가 제시한 레이아웃에 맞춰 바꿨다. */
:root {
  --bg: #0a0a0a; --panel: #111111; --fg: #ededed; --muted: #a8a8a8;
  --line: #2c2c2c; --line-strong: #414141;
  /* 보조 문구용. 대비가 낮으면 설명이 장식으로 보인다 — 읽으라고 쓴 글이다. */
  --accent: #ededed; --on-accent: #0a0a0a;
  --soft: #141414; --danger: #ff6b6b;
  --radius: 8px; --sidebar: 272px;
  /* 로고. 톱니는 어두운 배경에서 묻히지 않게 **밝은 회색**으로 올린다 —
     원본의 진회색(#3f4650)은 밝은 배경용이라 여기선 형태가 안 보인다.
     초록 조각은 밝기를 맞춰 조금만 낮춘다. */
  --logo-idle: #b6bcc6; --logo-live: #34c26e;
  /* 진행을 나타내는 유일한 색. 로고의 살아 있는 초록과 같은 값이다 —
     화면에 색이 둘이면 어느 쪽이 '지금'인지 눈이 나뉜다. */
  --go: #34c26e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
               "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
/* ── 앱 셸 ────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

/* 사이드바는 **살짝 떠 있는 판**으로 둔다. 배경과 같은 색으로 칠하면 선
   하나로만 갈리는데, 옅게 띄우면 메뉴가 본문 위에 얹힌 것처럼 읽힌다.
   랜딩에서는 본문을 덮으며 나타나므로 뒤가 실제로 비쳐 보인다. */
.side {
  border-right: 1px solid var(--line-strong); padding: 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh;
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
}
.side .account {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px;
  font-size: 17px; font-weight: 600;
}
.side .avatar { width: 31px; height: 31px; flex: none; display: block; }
.side .avatar svg { width: 100%; height: 100%; display: block; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side-sep { height: 0; margin: 12px 11px; border: 0;
            border-top: 1px solid var(--line-strong); }
.side a {
  display: flex; align-items: center; gap: 12px; padding: 10px 11px;
  border-radius: var(--radius); color: var(--muted); text-decoration: none;
  font-size: 17px; transition: background .12s, color .12s;
}
.side a:hover { background: rgba(255,255,255,.05); color: var(--fg); }
.side a.on { background: rgba(255,255,255,.08); color: var(--fg); font-weight: 550; }
/* 글리프가 아니라 그림이다 — ▤ ＋ ▦ 처럼 서로 다른 글꼴에서 온 문자를 쓰면
   굵기도 크기도 맞지 않는다. 색은 글자색을 물려받아 선택 상태를 따라간다. */
.side a .ico { width: 20px; height: 20px; flex: none; opacity: .8;
               display: flex; align-items: center; justify-content: center; }
.side a .ico svg { width: 100%; height: 100%; display: block; }
.side a .soon { margin-left: auto; font-size: 11.5px; color: var(--muted); opacity: .7; }

.main { min-width: 0; display: flex; flex-direction: column; }

/* ── 본문 위 띠 ───────────────────────────────────────────────────────
   선 하나가 화면을 잡아준다 — 이게 없으면 제목이 허공에서 시작한다.
   왼쪽은 비우고 오른쪽에 지금 누구로 보고 있는지만 적는다. */
.topbar {
  flex: none; display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; height: 52px; padding: 0 28px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 13px; color: var(--muted);
  background: rgba(255, 255, 255, .022);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
}
.topbar-who { color: var(--fg); }
.topbar-dot { opacity: .45; }
.topbar-link { color: var(--muted); text-decoration: none; padding: 5px 11px;
               border-radius: 999px; border: 1px solid var(--line); }
.topbar-link:hover { color: var(--fg); border-color: var(--line-strong); }

/* 넓은 화면에서 본문이 왼쪽에 몰리지 않게 가운데로 둔다. */
.main > .inner { max-width: 860px; margin-inline: auto;
                 width: 100%; padding: 56px 40px 30vh; }

/* 대화 화면은 읽기 폭을 좁게 유지한다 */
.main > .inner.narrow { max-width: 640px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  /* 가로 띠로 눕힌다. **줄바꿈을 막아야 한다** — 안 막으면 항목마다 글자가
     세로로 쪼개져 "견 적 하 기"가 된다. 넘치면 옆으로 밀어서 본다. */
  .side-sep { width: 0; height: 20px; margin: 0 6px;
              border-top: 0; border-left: 1px solid var(--line-strong); }
  .side { position: static; height: auto; flex-direction: row; align-items: center;
          gap: 2px; padding: 6px 8px; overflow-x: auto; flex-wrap: nowrap;
          border-right: none; border-bottom: 1px solid var(--line-strong);
          scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .side .account { display: none; }
  .side .level-pick { display: none; }
  .side .side-note { display: none; }
  .side nav { flex-direction: row; gap: 2px; flex: none; }
  .side a { flex: none; white-space: nowrap; padding: 8px 12px; font-size: 14.5px; }
  .side a .ico { display: none; }
  .side a .soon { display: none; }
  .main > .inner { padding: 24px 20px 30vh; }
}

.wrap { max-width: 720px; margin: 0 auto; padding: 32px 24px 96px; }

header.top {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 20px;
}
.brand { font-weight: 650; letter-spacing: -0.02em; font-size: 15px; }
.step-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.bar { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }

h1 { font-size: 22px; font-weight: 620; letter-spacing: -0.02em; margin: 44px 0 6px; }
.desc { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.q-title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 48px 0 8px; }

figure.diagram {
  margin: 24px 0 0; padding: 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--soft); text-align: center;
}
figure.diagram .art { display: flex; justify-content: center; color: var(--fg); }
/* **width·height 없는 inline SVG는 사파리에서 높이가 0이 된다.** 크롬은
   viewBox로 비율을 추론하지만 사파리는 그러지 않는다 — 파일에 고유 크기를
   박아 두고(diagrams/*.svg), 여기서는 그 비율대로 줄인다. */
figure.diagram svg { display: block; width: 100%; max-width: 320px;
                     height: auto; margin: 0 auto; }
figure.diagram figcaption {
  margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5;
}

.options { display: grid; gap: 8px; margin-top: 24px; }
.options.grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opt-group {
  margin: 18px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--muted);
}
.opt-group:first-child { margin-top: 4px; }

button.opt {
  width: 100%; text-align: left; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 15px 17px; font: inherit; font-size: 16px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
button.opt:hover { border-color: var(--accent); background: var(--soft); }
button.opt.card { text-align: center; padding: 20px 12px; }
.thumb {
  height: 72px; margin-bottom: 10px; border-radius: 6px; background: var(--soft);
  border: 1px dashed var(--line-strong); display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 11px;
}
button.unknown {
  /* 선택지 아래 가운데. 오류가 아니라 정상적인 답이므로 눈에 띄되 강조하지는 않는다. */
  display: block; margin: 18px auto 0; border: none; background: none;
  color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 8px 12px;
}
button.unknown:hover { color: var(--fg); }

.field { display: flex; gap: 8px; align-items: center; margin-top: 24px; }
input[type=text], input[type=number], input[type=email], input[type=tel] {
  flex: 1; padding: 13px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
  color: var(--fg); min-width: 0;
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.unit { color: var(--muted); font-size: 14px; }
textarea {
  width: 100%; margin-top: 24px; padding: 13px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); resize: vertical; min-height: 120px;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

button.primary {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 13px 22px; font: inherit; font-size: 15px;
  font-weight: 550; cursor: pointer;
}
button.primary:disabled { opacity: .4; cursor: not-allowed; }
button.ghost {
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 12px 18px; font: inherit; font-size: 14px; cursor: pointer; color: var(--fg);
}
.back {
  display: block; margin-top: 44px; background: none; border: none;
  color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 6px 0;
}
.back:hover { color: var(--fg); }

.summary { margin-top: 28px; border-top: 1px solid var(--line); }
.summary .row {
  display: grid; grid-template-columns: 160px 1fr; gap: 16px;
  padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.summary .row dt { color: var(--muted); font-size: 14px; margin: 0; }
.summary .row dd { margin: 0; }
.summary .row dd.unknown { color: var(--muted); font-style: italic; }

.actions { display: flex; gap: 10px; margin-top: 32px; }
.error {
  margin-top: 18px; padding: 12px 14px; border-radius: var(--radius);
  background: rgba(255,107,107,.08); color: var(--danger); font-size: 14px;
  border: 1px solid rgba(255,107,107,.25);
}
.files { margin-top: 18px; display: grid; gap: 6px; }
.files .file {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; background: var(--soft);
}
.done { text-align: center; padding: 80px 0; }
.done .num {
  font-size: 26px; font-weight: 650; letter-spacing: -0.02em; margin: 18px 0 8px;
  font-variant-numeric: tabular-nums;
}
.htmx-request .bar > i { opacity: .5; }


/* ── 대화 스레드 ──────────────────────────────────────────────────────── */
/* 한 페이지에서 끝난다. 대화가 위에서 아래로 이어지고, 입력창만 아래 고정이다.
   선택지 카드도 대화 안에 있다 — 아래 고정칸에 넣으면 대화가 거기서 끊긴다. */

.main > .inner.chat {
  max-width: 780px; margin-inline: auto;
  height: calc(100vh - 52px); height: calc(100dvh - 52px);
  padding: 24px 32px 0; display: flex; flex-direction: column;
}
.chat-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex: none; }
.chat-head h1 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.02em; }
.chat-head #counter { margin-left: auto; color: var(--muted); font-size: 13.5px;
                      font-variant-numeric: tabular-nums; }

#thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0 24px;
       scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.log::-webkit-scrollbar { width: 8px; }
.log::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* 말풍선 — 질문은 왼쪽, 고객이 답한 것은 오른쪽. */
.msg { display: flex; gap: 10px; margin: 16px 0; }
.msg.me { justify-content: flex-end; }
/* flex 자식이라 폭이 내용에 맞춰 줄어든다. 그러면 안쪽 카드 그리드가 한 줄로
   무너지므로 남는 폭을 차지하게 둔다. */
.msg .col { flex: 1 1 auto; min-width: 0; max-width: 92%; }

.who { flex: none; width: 29px; height: 29px; margin-top: 2px; display: block; }
.who svg { width: 100%; height: 100%; display: block; }
.who-name { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

.bubble {
  display: inline-block; max-width: 100%; padding: 13px 17px; border-radius: 14px;
  font-size: 16.5px; line-height: 1.6; word-break: break-word;
}
.msg.them > .bubble { background: var(--panel); border: 1px solid var(--line);
                      border-top-left-radius: 4px; color: var(--fg); }
.msg.them .col .bubble { background: var(--panel); border: 1px solid var(--line);
                         border-top-left-radius: 4px; }
.msg.me .bubble { background: var(--accent); color: var(--on-accent);
                  border-top-right-radius: 4px; font-weight: 500; }

.bubble .q-title { font-size: 18.5px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.bubble .desc { margin: 7px 0 0; font-size: 14.5px; color: var(--muted); }
.bubble .diagram { margin: 12px 0 0; }

a.bubble.said, button.bubble.said {
  text-decoration: none; color: var(--on-accent);
  display: inline-flex; align-items: baseline; gap: 12px;
  font: inherit; font-size: 15px; font-weight: 500;
  border: none; cursor: pointer; text-align: left;
}
a.bubble.said .edit, button.bubble.said .edit {
  font-size: 11px; opacity: 0; transition: opacity .12s; white-space: nowrap;
}
a.bubble.said:hover .edit, button.bubble.said:hover .edit { opacity: .55; }
a.bubble.said .muted, button.bubble.said .muted { opacity: .55; font-style: italic; }

/* 고른 카드. 답한 뒤에도 선택지는 남고, 고른 것만 밝게 나머지는 흐리게. */
.cat.on { border-color: var(--fg); background: var(--soft); color: var(--fg); }
.cat.on .cat-art { opacity: 1; }
.cat.on .cat-desc { color: var(--fg); opacity: .75; }
.options.done .cat:not(.on) { opacity: .38; }
.options.done .cat:not(.on):hover { opacity: .8; }

/* 선택지 — 질문 바로 아래, 대화 안에 놓인다. */
.col .options { display: grid; gap: 8px; margin-top: 10px; }
.col .options.as-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.col .inflow { margin-top: 10px; }
.attached { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* 입력창 — 화면 아래 고정. */
.composer { flex: none; padding: 10px 0 20px; background: var(--bg); }
.chat-input {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 8px 8px 8px 16px; background: var(--panel);
  transition: border-color .12s;
}
.chat-input:focus-within { border-color: var(--muted); }
.chat-input input[name=value] { font-size: 16px;
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--fg); font: inherit; font-size: 15px; padding: 6px 0;
}
.chat-input input[name=value]::placeholder { color: var(--muted); }
.chat-input .send {
  flex: none; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: none;
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.chat-input .send:disabled { background: var(--soft); color: var(--muted); cursor: default; }

@media (max-width: 860px) {
  .main > .inner.chat { padding: 14px 16px 0; }
  .msg .col { max-width: 100%; }
}


/* ── 페이지 공통 ──────────────────────────────────────────────────────── */
/* ── 입구 화면 ────────────────────────────────────────────────────────
   견적하기와 주문하기는 **같은 자리에서 갈라지는 두 길**이다. 머리글을
   다르게 두면 두 개의 다른 서비스처럼 보인다. 가운데로 모으고 크게 쓴다. */
.start-head { margin: 6vh auto 40px; max-width: 620px; text-align: center; }
.start-head h1 { margin: 0 0 12px; font-size: 38px; font-weight: 750;
                 letter-spacing: -.04em; }
.start-head p { margin: 0; font-size: 16px; line-height: 1.75;
                color: var(--muted); word-break: keep-all; }

/* 입구의 제품 카드. 대화 중에 뜨는 작은 선택지와 다른 자리라 크게 놓는다. */
.cat-grid.is-start { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-grid.is-start .cat { flex-direction: column; align-items: flex-start;
                          gap: 12px; padding: 18px 18px 16px; border-radius: 14px; }
.cat-pic { flex: none; width: 48px; height: 48px; display: block; }
.cat-grid.is-start .cat-body strong { font-size: 17px; }

@media (max-width: 560px) {
  .start-head { margin: 3vh auto 28px; }
  .start-head h1 { font-size: 27px; }
  .start-head p { font-size: 14.5px; }
  .cat-grid.is-start { grid-template-columns: repeat(2, 1fr); }
  .cat-grid.is-start .cat { padding: 14px 13px 12px; gap: 9px; }
  .cat-pic { width: 38px; height: 38px; }
}

.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.02em; }
.page-head p { color: var(--muted); font-size: 14px; margin: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; background: var(--panel);
}
.card .k { color: var(--muted); font-size: 13px; }
.card .v { font-size: 26px; font-weight: 600; margin-top: 6px; letter-spacing: -.02em;
           font-variant-numeric: tabular-nums; }

.empty {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 72px 24px; text-align: center;
}
.empty .mark {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px;
  background: radial-gradient(circle at 35% 30%, #3a3a3a, #0f0f0f 70%);
  border: 1px solid var(--line-strong);
}
.empty h2 { font-size: 17px; margin: 0 0 8px; }
.empty p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th {
  text-align: left; color: var(--muted); font-weight: 500; font-size: 13px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
table.list td { padding: 14px 12px; border-bottom: 1px solid var(--line); }
table.list tr:hover td { background: var(--soft); }
.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line-strong); color: var(--muted);
}
.pill.done { color: #7ee787; border-color: rgba(126,231,135,.3); }


/* ── 견적 의뢰서 ──────────────────────────────────────────────────────── */
/* 서류 이름. 가운데에 두어 이것이 문서 제목임을 먼저 알린다.
   위가 붙으면 페이지가 잘린 것처럼 보여 여백을 준다. */
.doc-title {
  font-size: 30px; margin: 0 0 22px; letter-spacing: -.03em;
  padding-top: 50px; text-align: center;
}
/* 아래 왼쪽에 누구 건인지, 오른쪽에 번호. */
.doc-head { display: flex; justify-content: space-between; align-items: flex-start;
            gap: 24px; }
.doc-head p { color: var(--muted); font-size: 13px; margin: 0; }
.doc-meta { margin: 0; font-size: 13px; }
.doc-meta div { display: flex; gap: 16px; justify-content: flex-end; }
.doc-meta dt { color: var(--muted); margin: 0; }
.doc-meta dd { margin: 0; font-variant-numeric: tabular-nums; }

table.strip {
  width: 100%; border-collapse: collapse; margin: 24px 0 26px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden;
  font-size: 13px; text-align: center;
}
table.strip th {
  background: var(--soft); color: var(--muted); font-weight: 500;
  padding: 9px 10px; border-right: 1px solid var(--line);
}
table.strip td { padding: 13px 10px; border-right: 1px solid var(--line); border-top: 1px solid var(--line-strong); }
table.strip th:last-child, table.strip td:last-child { border-right: none; }

/* 도해가 왼쪽, 값이 오른쪽. 그림을 먼저 보고 숫자를 확인하는 순서다. */
.doc-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 40px; margin-bottom: 8px; }
@media (max-width: 780px) { .doc-grid { grid-template-columns: 1fr; } }

.doc-h {
  font-size: 16px; margin: 0 0 14px; padding-left: 11px;
  border-left: 3px solid var(--accent); line-height: 1.25;
}
table.kv { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 24px; }
table.kv th {
  /* 라벨은 짧다("용도" · "원단"). 42%를 주면 빈 칸이 절반을 먹고, 값이
     오른쪽 끝에 떨어져 나가 둘이 한 줄로 안 읽힌다. */
  text-align: left; font-weight: 400; color: var(--muted);
  width: 1%; white-space: nowrap; padding: 10px 14px 10px 12px;
  background: var(--soft); border-bottom: 1px solid var(--line);
}
table.kv td { padding: 10px 12px; border-bottom: 1px solid var(--line); }

/* 도해는 "무엇을 재는가"를 보여주는 그림이다. 실측 도면이 아니라 크게
   그릴 이유가 없다 — 커질수록 오른쪽 사양표와 높이가 어긋난다.
   치수 규격을 이 칸 아래에 두어 양쪽 높이를 맞춘다. */
.doc-figure { display: block; }
.doc-svg { display: block; width: 100%; max-width: 260px; margin: 0 auto 20px;
           color: var(--fg); }

.doc-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.9; color: var(--fg); }
.doc-list li::marker { color: var(--muted); }

table.reply { width: 100%; border-collapse: collapse; font-size: 13px; }
table.reply td { padding: 9px 10px; border: 1px solid var(--line); }
table.reply td.n { width: 30px; text-align: center; color: var(--muted); }
table.reply td.blank { width: 40%; background: var(--soft); }

.doc-foot { margin-top: 28px; text-align: center; color: var(--muted); font-size: 12.5px; }
code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .92em; color: var(--muted); }


/* ── 제품군 카드 ──────────────────────────────────────────────────────── */
/* 도식은 왼쪽에 작게, 이름과 설명은 오른쪽에. 실물 사진을 쓰지 않고 형태만
   선으로 그린다 — 같은 롤이라도 아이마크 유무처럼 특징 하나로 구분된다. */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cat-grid form { display: contents; }

.cat {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 15px 17px; background: var(--panel); color: var(--fg); font: inherit;
  text-decoration: none;
  cursor: pointer; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .12s, background .12s;
}
.cat:hover { border-color: var(--line-strong); background: var(--soft); }

/* 도식은 mask로 칠한다. <img>로 넣으면 SVG가 별도 문서라 currentColor가
   검정으로 떨어져 어두운 배경에서 보이지 않는다. mask면 색을 CSS가 준다. */
.cat-art {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  background-color: var(--fg); opacity: .7;
  -webkit-mask-image: var(--art);        mask-image: var(--art);
  -webkit-mask-repeat: no-repeat;        mask-repeat: no-repeat;
  -webkit-mask-position: center;         mask-position: center;
  -webkit-mask-size: contain;            mask-size: contain;
  transition: opacity .12s;
}
.cat:hover .cat-art { opacity: 1; }

.cat-body { display: block; min-width: 0; }
.cat-body strong { display: block; font-size: 15.5px; font-weight: 550; }
.cat-desc { display: block; margin-top: 4px; font-size: 13.5px; word-break: keep-all; color: var(--muted); line-height: 1.5; }


/* 부가 정보가 있는 선택지는 제품군 카드와 같은 모양으로 그린다. */
.options.as-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }


/* 접어둔 상세 — 적층 구조처럼 아는 사람에게만 필요한 정보. */
.more {
  margin-top: 10px; padding: 0; background: none; border: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}
.more:hover { color: var(--fg); }

dialog.sheet {
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 22px 24px;
  background: var(--panel); color: var(--fg); max-width: 420px; width: calc(100% - 40px);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, .6); }
dialog.sheet h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
dialog.sheet dl { margin: 0 0 20px; display: grid; gap: 10px; }
dialog.sheet dl > div { display: flex; justify-content: space-between; gap: 16px;
                        padding-bottom: 10px; border-bottom: 1px solid var(--line); }
dialog.sheet dl > div:last-child { border-bottom: none; padding-bottom: 0; }
dialog.sheet dt { margin: 0; font-size: 14px; }
dialog.sheet dd { margin: 0; font-size: 13px; color: var(--muted); text-align: right; }
dialog.sheet form { display: flex; justify-content: flex-end; }


/* ── 주문 폼 ──────────────────────────────────────────────────────────── */
/* 규격을 아는 사람을 위한 빠른 입력. 설명 없이 칸만 늘어놓는다 —
   대화 화면과 같은 질문을 쓰지만 한 화면에서 끝난다. */
.grid-form { max-width: 720px; }
.gf-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.gf-head strong { font-size: 15px; font-weight: 600; }
.gf-head .more { margin: 0; margin-left: auto; }

.gf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.gf-cell { display: block; }
/* [hidden]은 display:block에 덮인다 — 명시해야 실제로 숨는다. */
.gf-cell[hidden], .gf-known[hidden] { display: none; }
.gf-label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.gf-label i { font-style: normal; opacity: .7; }

/* 연락처를 받는 자리에 붙는 고지. **입력칸 아래, 버튼 위다** — 적기 전에
   보이면서도 라벨보다 뒤라 읽는 순서를 흐트러뜨리지 않는다. */
.gf-note { font-size: 12px; color: var(--muted); margin: 7px 0 0; line-height: 1.6; }
.gf-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.gf-note a:hover { color: var(--fg); }
/* 대화 화면에서는 입력창 바로 위에 눕는다. */
.composer-note { margin: 0 0 8px; padding: 0 4px; }

.gf-cell input, .gf-cell select, .gf-section input[type=text],
.gf-section input[type=email], .gf-section textarea {
  width: 100%; background: var(--soft); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; font: inherit; font-size: 14px; outline: none;
}
/* 화살표를 직접 그린다. 기본 화살표는 다크에서 잘 안 보인다. */
.gf-cell select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.gf-cell select:hover { border-color: var(--line-strong); }
.gf-cell input:focus, .gf-cell select:focus, .gf-section input:focus { border-color: var(--muted); }

.gf-section { margin-top: 28px; }
.gf-checks { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.gf-check { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.gf-check input { accent-color: var(--fg); }
.gf-section input[type=file] { font-size: 13px; color: var(--muted); }


/* ── 주문 목록 · 진행 트랙 ────────────────────────────────────────────── */
.orders { display: grid; gap: 12px; }
.order {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  background: var(--panel);
}
.order.fresh { border-color: var(--line-strong); background: var(--soft); }
.order-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.order-head strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.order-product { font-size: 13px; color: var(--muted); }
.order-date { margin-left: auto; font-size: 12.5px; color: var(--muted);
              font-variant-numeric: tabular-nums; }

/* 단계는 지난 것까지 채우고 현재 단계에 표시를 준다. */
/* 진행 단계. **탭과 같은 모양으로 두면 안 된다** — 바로 위에 탭이 있어
   같은 줄무늬가 두 번 나오면 어느 쪽이 지금 자리인지 읽히지 않는다.
   점과 선으로 그려 성격을 가른다. */
.track { display: flex; list-style: none; margin: 0; padding: 0; }
.track li { flex: 1; display: flex; flex-direction: column; align-items: center;
            gap: 9px; font-size: 12px; color: var(--muted); position: relative;
            white-space: nowrap; }
.track li i {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong); z-index: 1;
}
/* 점 사이를 잇는 선. 지나온 구간만 밝다. */
.track li::before {
  content: ""; position: absolute; top: 4.5px; right: 50%; left: -50%;
  height: 2px; background: var(--line);
}
.track li:first-child::before { display: none; }
/* **지나온 길에 색을 준다.** 전 구간이 회색이면 어디까지 왔는지 점을 세어야
   알 수 있다 — 색이 칠해진 길이가 그 말을 대신한다. 이 화면에서 고객이 가장
   먼저 보는 것이 "지금 어디까지 왔나"라, 페이지의 유일한 색을 여기에 쓴다. */
.track li.on i { background: var(--go); border-color: var(--go); }
.track li.on::before { background: var(--go); }
.track li.on span { color: #c9c9c9; }

/* 지금 자리. 채운 점 위에 링과 옅은 번짐을 얹는다. **크기는 안 키운다** —
   점이 커지면 그 칸의 글자만 아래로 밀려 줄이 어긋난다. */
.track li.now i {
  background: var(--go); border-color: var(--go);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--go) 22%, transparent),
              0 0 16px color-mix(in srgb, var(--go) 55%, transparent);
}
.track li.now span { color: var(--fg); font-weight: 700; letter-spacing: -.01em; }

/* 아직 안 온 구간은 더 죽인다 — 대비가 있어야 칠해진 쪽이 읽힌다. */
.track li:not(.on) i { border-color: var(--line-strong); }
.track li:not(.on)::before { background: var(--line); }
.track li:not(.on) span { color: #7c7c7c; }

.gf-known { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.gf-known b { font-weight: 500; font-size: 14px; }
.gf-known .more { margin: 0; font-size: 12.5px; }





/* 여러 건을 한 번에 — 사양 블록을 줄로 쌓는다. */
.lines { display: grid; gap: 12px; }
.line { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
        margin: 0; background: var(--panel); }
.line-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.line-no {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-variant-numeric: tabular-nums;
  background: var(--soft); color: var(--muted); border: 1px solid var(--line);
}
.line-head .more { margin: 0 0 0 auto; }
.add-line {
  margin-top: 12px; padding: 10px 14px; width: 100%;
  background: none; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.add-line:hover { color: var(--fg); border-color: var(--muted); }

.order-lines { display: grid; gap: 6px; margin-bottom: 16px; }
a.order-line { text-decoration: none; color: inherit; border-radius: 8px;
               padding: 6px 8px; margin: -6px -8px; transition: background .12s; }
a.order-line:hover { background: var(--soft); }

.order-line { display: flex; gap: 12px; align-items: baseline; font-size: 13px; }
/* 눌러서 들어가는 자리는 늘 보여야 한다. hover에만 뜨면 아무도 못 찾는다. */
.ol-go { margin-left: auto; font-size: 12px; color: var(--muted); }
a.order-line:hover .ol-go { color: var(--fg); }
.ol-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.order-head .pill { font-size: 11px; padding: 2px 8px; }

.gf-section textarea { resize: vertical; line-height: 1.6; }


/* ── 담당자 화면 ──────────────────────────────────────────────────────── */
.main > .inner.wide { max-width: 1100px; }

/* ── 목록 머리글 ──────────────────────────────────────────────────────
   왼쪽에 제목, 오른쪽에 할 일 하나. 설명은 그 아래로 내린다 — 제목과
   버튼이 한 줄에 서야 "이 화면에서 무엇을 하는가"가 바로 읽힌다. */
.list-head { display: flex; align-items: center; justify-content: space-between;
             gap: 16px; margin-bottom: 6px; }
.list-head h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.btn-lead {
  flex: none; padding: 9px 17px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-size: 13.5px; font-weight: 650; white-space: nowrap;
}
.btn-lead:hover { filter: brightness(.92); }
.list-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

/* 거르개 셋을 3열로. **위에 이름을 달지 않는다** — 고른 값이 "전체 상태"처럼
   무엇을 거르는지 이미 말하고 있어, 라벨을 붙이면 같은 말이 두 번 보인다. */
.filter-row { display: grid; grid-template-columns: repeat(3, 1fr);
              gap: 10px; margin-bottom: 20px; }
.filter-row select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 13.5px;
  color: var(--fg); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
}
.filter-row select:focus { outline: none; border-color: var(--line-strong); }

@media (max-width: 640px) {
  .filter-row { grid-template-columns: 1fr; }
  .list-head h1 { font-size: 22px; }
}

.ops-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  padding: 7px 13px; border-radius: 999px; font-size: 13px; text-decoration: none;
  color: var(--muted); border: 1px solid var(--line); background: var(--panel);
}
.chip:hover { color: var(--fg); border-color: var(--line-strong); }
.chip.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

table.ops { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ops th {
  text-align: left; font-weight: 500; font-size: 12.5px; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
table.ops td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.ops tr:hover td { background: var(--soft); }
table.ops .num { font-variant-numeric: tabular-nums; }
table.ops .right { text-align: right; }
table.ops .sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.step-form select {
  appearance: none; cursor: pointer; min-width: 130px;
  background: var(--soft); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 30px 7px 11px;
  font: inherit; font-size: 13px; outline: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.step-form select:hover { border-color: var(--line-strong); }


/* 담당자 전용 패널. 고객 화면에는 없다. */
.ops-panel { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.ops-status { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ops-status .gf-label { margin: 0; }
.ops-status select {
  appearance: none; cursor: pointer; min-width: 150px;
  background: var(--soft); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 30px 8px 12px;
  font: inherit; font-size: 13.5px; outline: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.doc-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.ops-history { margin-top: 26px; }
.ops-old { padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ops-old b { font-weight: 550; margin-right: 10px; }
.ops-old span { color: var(--muted); font-size: 12px; }
.ops-old p { margin: 6px 0 0; color: var(--muted); line-height: 1.7; }

.ops-link { color: var(--fg); text-decoration: none; }
.ops-link:hover { text-decoration: underline; text-underline-offset: 3px; }
table.ops .right .ops-link { color: var(--muted); font-size: 12.5px; }

.files-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.files-list li { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px;
                 padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.files-list li:last-child { border-bottom: none; }
.files-list a { color: var(--fg); text-decoration: none; }
.files-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.files-list span { margin-left: auto; color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .track { flex-wrap: wrap; gap: 8px 0; }
  .track li { flex: 0 0 25%; }
}


/* ── 상세 구획 ───────────────────────────────────────────────────────── */
/* 문서를 나누지 않고 구획을 켜고 끈다. 번호가 붙어 어디까지 왔는지 읽힌다. */
/* 이름 + 지금 단계. 줄무늬만 있으면 무엇을 나타내는지 읽히지 않는다.
   구획 하나만큼의 자리를 준다 — 위로 탭, 아래로 요청 내용에 끼어 눌렸다. */
.track-head { font-size: 17px; font-weight: 600; margin: 46px 0 20px;
              letter-spacing: -.02em; }
.doc-track { margin: 0 0 46px; }
/* 구획은 서로 다른 이야기다. 26px로 붙여두면 한 덩어리로 읽혀 답답하다. */
.part { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); }
.part:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.part-h {
  display: flex; align-items: center; gap: 12px;
  font-size: 23px; font-weight: 600; margin: 0 0 28px; letter-spacing: -.02em;
}
.part-h span {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 14px;
  background: var(--soft); color: var(--muted); border: 1px solid var(--line);
}
.part .doc-h { font-size: 17px; margin: 34px 0 16px; }
.part .doc-h:first-child { margin-top: 0; }

.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.log-list li { display: flex; gap: 14px; font-size: 13px; color: var(--fg); }
.log-at { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

.ops-panel { border-top-color: var(--line-strong); }

/* 옵션은 사양이다 — 표에서 눈에 띄어야 공장이 지나치지 않는다. */
table.kv tr.mark th, table.kv tr.mark td { background: var(--soft); }
table.kv tr.mark td { font-weight: 550; }

table.ops tr.fresh td { background: var(--soft); }
table.ops td .sub { margin-top: 2px; }

/* 정정된 값. 원본을 지우지 않고 옆에 남긴다. */
.fixed { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.ops-fix { margin-bottom: 26px; }

.ops-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ops-top .ops-status { margin: 0; }
.ops-top form { margin: 0; }

.ops-fix textarea, .ops-fix select { width: 100%; }
.ops-fix .gf-cell select {
  appearance: none; cursor: pointer; padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.ops-work { margin-bottom: 26px; }
.hint-inline { font-size: 12px; color: var(--muted); }
button.primary:disabled { opacity: .4; cursor: default; }


/* 오퍼레이터 탭. 보는 일과 고치는 일을 가른다. */
.doc-tabs { display: flex; gap: 4px; margin: 20px 0 4px; border-bottom: 1px solid var(--line); }
.doc-tabs a {
  padding: 10px 16px; font-size: 13.5px; text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.doc-tabs a:hover { color: var(--fg); }
.doc-tabs a.on { color: var(--fg); border-bottom-color: var(--fg); font-weight: 550; }

.share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.share .gf-label { margin: 0; flex: none; }
.share input { flex: 1; min-width: 260px; }
.share .more { margin: 0; }

.ops-work .gf-cell select {
  appearance: none; cursor: pointer; padding-right: 32px; width: 100%;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* 대화 안의 다중 선택. 체크하고 한 번에 보낸다. */
.col .fields { display: grid; gap: 10px; margin-top: 10px; max-width: 420px; }
.sub-field { display: grid; gap: 5px; }
.sub-field > span { font-size: 12.5px; color: var(--muted); }
.col .fields .actions { display: flex; gap: 8px; align-items: stretch; margin-top: 4px; }
.col .fields .actions > * { flex: none; width: auto; margin: 0; white-space: nowrap; }

.col .multi { margin-top: 10px; }
.col .multi .actions { margin-top: 14px; }

/* 복수 선택은 선택지 카드와 같은 모양으로 그린다. 네이티브 체크박스는
   대화 흐름에서 눌러야 할 곳으로 안 보인다 — 카드 전체가 과녁이다. */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pick {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 14px 16px; background: var(--panel); color: var(--fg);
  cursor: pointer; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .12s, background .12s;
}
.pick:hover { border-color: var(--line-strong); background: var(--soft); }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick-box {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border: 1px solid var(--line-strong); border-radius: 5px;
  transition: background .12s, border-color .12s;
}
.pick-box::after {
  content: ""; display: block; width: 9px; height: 5px; margin: 4px auto 0;
  border: 2px solid var(--bg); border-top: 0; border-right: 0;
  transform: rotate(-45deg); opacity: 0; transition: opacity .12s;
}
.pick:has(:checked) { border-color: var(--fg); background: var(--soft); }
.pick:has(:checked) .pick-box { background: var(--fg); border-color: var(--fg); }
.pick:has(:checked) .pick-box::after { opacity: 1; }
/* 키보드로 옮겨 다닐 때 어디에 있는지 보여야 한다. */
.pick:focus-within { border-color: var(--fg); }
/* 이미 답한 자리는 고른 것만 남기고 물린다 — 선택지 카드와 같은 규칙이다. */
.picks.done .pick:not(:has(:checked)) { opacity: .38; }
.picks.done .pick:not(:has(:checked)):hover { opacity: .8; }


/* 요청과 반영을 나란히. 한쪽 말만 적혀 있으면 소통이 아니다. */
table.pair { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.pair th, table.pair td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); font-size: 14.5px;
}
table.pair thead th {
  font-size: 12.5px; font-weight: 550; color: var(--muted);
  border-bottom-color: var(--line-strong);
}
table.pair td:first-child { width: 52%; }
table.pair td.waiting { color: var(--muted); }
table.pair input[type=text] { width: 100%; padding: 8px 10px; font-size: 14px; }
.ops-notes { margin-top: 26px; }


/* 계산식이 낸 값. 담당자가 넣은 값과 구분된다 — 고치면 그 값이 남는다. */
[data-computed] { border-style: dashed; color: var(--muted); }
[data-computed]:focus { border-style: solid; color: var(--fg); }


/* 도면과 감리는 나란히. 둘 다 "주고받은 자료"라 한 줄씩 차지할 이유가 없다. */
/* 나란히 놓은 두 구획. 각자 위쪽 선과 여백을 들고 있으면 높이가 어긋나
   오른쪽이 아래로 밀린다 — 선은 묶음이 하나만 긋고 안쪽은 붙인다. */
.doc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
            padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); }
.doc-pair .part { padding-top: 0; margin-top: 0; border-top: none; }
@media (max-width: 760px) { .doc-pair { grid-template-columns: 1fr; } }

table.pair th { color: var(--muted); font-weight: 500; }
table.pair thead th { width: auto; }


/* 고객 정보. 문서 머리말 왼쪽에 가로로 눕힌다 — 표로 세우면 세 줄을
   차지하는데, 담을 값은 짧고 개수도 적다. 안 적은 항목은 아예 빼서
   "입력하지 않음"이 자리를 먹지 않게 한다. */
.doc-who { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; }
.doc-who > div { display: flex; align-items: baseline; gap: 8px; }
.doc-who dt { font-size: 12.5px; color: var(--muted); }
.doc-who dd { margin: 0; font-size: 14px; }


/* 치수는 도해에 붙은 값이다. 표로 세우지 않고 그림 아래에 한 줄로 눕힌다. */
.doc-dims { display: flex; flex-wrap: wrap; justify-content: center;
            gap: 8px 24px; margin: 0; font-size: 14px; }
.doc-dims i { font-style: normal; color: var(--muted); margin-right: 4px; }


/* 묶음 제목. 필드 라벨과 같은 크기·색이면 어디서 묶음이 갈리는지 안 보인다. */
.gf-group {
  font-size: 15px; font-weight: 600; color: var(--fg);
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.gf-section + .gf-section .gf-group { margin-top: 8px; }

/* 그리드 안에서는 묶음 제목이 한 줄을 통째로 차지한다. */
.gf-grid > .gf-group { grid-column: 1 / -1; margin-top: 18px; }
.gf-grid > .gf-group:first-child { margin-top: 0; }


/* 레벨 전환. **인증이 아니라 자리 표시**라 눈에 띄되 크지 않게 둔다.
   로그인이 붙으면 이 자리는 계정 메뉴가 된다. */
.level-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0 10px; }
.level-pick select { padding: 5px 8px; font-size: 13px; }
.level-pick span { font-size: 11px; color: var(--muted); }

.side-note { margin: 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* 목록 안의 버튼은 링크처럼 보인다 — 표 한 칸에 버튼 모양이 서면 무겁다. */
form.inline { display: inline; }
button.ops-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }


/* ── 좁은 화면의 선택지 — **파일 맨 끝이어야 한다** ────────────────────────────────────────────────
   데스크톱에서 넉넉하던 크기가 폰에서는 선택지 하나가 화면 절반을 먹는다.
   "3열 · 5열 · 6열" 중 하나 고르는데 스크롤을 해야 했다.

   **짧은 선택지는 눕히고, 설명이 붙은 카드는 납작하게 만든다.**

   이 블록을 파일 중간에 두면 안 된다. CSS는 특정도가 같으면 **나중 규칙이
   이기므로**, 뒤에 오는 `.cat { padding: 15px 17px }` 한 줄에 통째로 덮인다.
   미디어 쿼리라고 더 세게 적용되지 않는다 — 실제로 그렇게 안 먹었다. */
@media (max-width: 560px) {
  /* 짧은 것들("3열" · "있습니다")은 한 줄에 여러 개 놓는다. */
  .col .options:not(.as-cards) {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .col .options:not(.as-cards) button.opt,
  .col .options:not(.as-cards) a.opt {
    width: auto; flex: 1 1 auto; min-width: 92px;
    text-align: center; padding: 12px 14px; font-size: 15px;
  }

  /* 설명이 붙은 카드도 **두 개씩** 놓는다. 한 줄씩 쌓으면 원단 7가지가
     화면 두 장을 넘어가 스크롤해야 고를 수 있다.

     좁아진 만큼 아이콘을 뺀다 — 원단은 어차피 같은 그림이고, 제품군은
     이름만으로 구분된다. 그 자리를 글자에 준다. */
  .col .options.as-cards,
  .col .picks,
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .cat, .pick { padding: 11px 12px; gap: 8px; border-radius: 10px; }
  .cat-art { display: none; }
  .cat-body strong { font-size: 14px; }
  .cat-desc { margin-top: 3px; font-size: 12px; line-height: 1.35;
              word-break: keep-all; }

  /* 질문 자체도 조금 줄인다. 제목이 두 줄을 넘기면 선택지가 화면 밖으로 밀린다. */
  .bubble .q-title { font-size: 16.5px; }
  .bubble .desc { font-size: 13.5px; }
  .bubble { padding: 11px 14px; font-size: 15px; }
  figure.diagram { padding: 12px; }
  .doc-svg { max-width: 190px; margin-bottom: 12px; }
}


/* =====================================================
   선언문 히어로 · 생산 인프라 — /intro
   =====================================================
   Apple 교육 페이지의 흐름을 따른다.
     ① 풀스크린 선언문이 스크롤로 넘어간다
     ② 마지막에 **폭이 줄며 라운드 카드**가 되고 실제 사진이 드러난다
     ③ 그 아래로 공백이 넉넉한 카드들이 이어진다

   **AI 이미지를 쓰지 않는다.** 만들어낸 그림으로 분위기를 깔면서
   "생산 현장이 신뢰를 증명한다"고 말할 수는 없다. 선언문은 검은 화면에
   글자만으로 세우고, 증거는 실물 사진 한 장으로 댄다. */

.inner:has(.decl) { max-width: none; padding: 0; }

.decl { position: relative; width: 100vw; height: 600vh;
        margin-left: calc(50% - 50vw); background: #fff; }

.decl-stage {
  position: sticky; top: 0;
  width: 100%; height: 100vh; height: 100dvh;
  overflow: hidden; background: #000;
  transition: width .8s cubic-bezier(.22,.61,.36,1),
              height .8s cubic-bezier(.22,.61,.36,1),
              border-radius .8s cubic-bezier(.22,.61,.36,1);
}
/* 마지막 스크롤에서 폭이 줄어든다. 이야기가 끝나고 화면이 물러나는 자리다. */
.decl-stage.is-card {
  width: min(1240px, 88%); height: min(78vh, 700px);
  margin: 6vh auto 0; border-radius: 28px;
}

/* 장면마다 사진이 바뀐다. 스크롤이 논증의 진행이므로 그림도 같이 넘어간다. */
.decl-fields, .decl-field { position: absolute; inset: 0; }
.decl-field {
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.05);
  transition: opacity .7s ease, transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.decl-field.is-active { opacity: 1; transform: scale(1); }
.decl-field.is-video { transform: none; }
.decl-field.is-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 사진 위에 글자를 얹으려면 눌러야 한다. 사진마다 밝기가 달라 대비가
   들쭉날쭉해지는 것을 막는다. */
.decl-fields::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.56) 40%, rgba(0,0,0,.76) 100%),
    radial-gradient(circle at center, rgba(0,0,0,.2) 0%, rgba(0,0,0,.62) 100%);
}

.decl-body {
  position: relative; z-index: 6; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 46px; text-align: center; padding: 0 40px; box-sizing: border-box;
  transition: opacity .5s ease;
}
/* 카드가 되면 선언문은 물러나고 마무리 문구가 그 자리를 받는다. */
.decl-stage.is-card .decl-body { opacity: 0; pointer-events: none; }

/* **네 문장 모두 같은 세기로 친다.** 예전에는 첫 장면을 55% 회색으로 깔고
   뒤로 갈수록 또렷해지게 했는데, 하필 그 첫 문장이 이 페이지에서 가장 센
   말이다 — 통념을 부정하는 자리를 들러리로 만들면 안 된다. */
/* **선언문의 무게는 장식이 아니라 크기·대비·여백에서 나온다.** 번호표도
   형광펜도 붙여 봤지만 둘 다 겉도는 부속이었다. 남긴 것은 셋뿐이다 —
   글자를 화면 폭까지 키우고, 행간을 조이고, 여백을 넓혔다.

   폭을 vw로 잡아 화면이 좁아지면 글자도 같이 준다. 고정 px로 두면 큰
   화면에서는 작고 작은 화면에서는 넘친다. 1067px 위에서 한 줄로 떨어지고
   화면 폭의 90% 남짓을 차지한다 — 이 자리에서 딴 데를 볼 수 없게. */
/* 네 표제를 한 칸에 겹친다. 설명 줄과 같은 이유로 grid다 — flex는 자식
   사이의 공백을 지운다. */
.decl-labels { display: grid; align-items: center; justify-items: stretch;
               width: 100%; }
.decl-label {
  grid-area: 1 / 1;
  margin: 0; font-size: clamp(38px, 5vw, 80px); font-weight: 800;
  /* 행간이 넓으면 문장이 흩어진다. 조여야 한 덩어리로 선언이 된다. */
  line-height: 1.12;
  letter-spacing: -.05em; word-break: keep-all; color: #fff;
  text-shadow: 0 4px 40px rgba(0,0,0,.55);
  text-wrap: balance;
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.decl-label.is-active { opacity: 1; transform: none; }

/* 번호 · 진행선 · 딱지. 표제와 한 덩어리라 따로 묶어 간격을 좁게 준다 —
   본문 gap(32px)을 그대로 받으면 딱지가 표제에서 떨어져 나와 별개의 문구로
   읽힌다. */
/* 네 줄을 한 자리에 겹쳐 놓고 **활성 한 줄만** 보인다. 흐린 세 줄을 같이
   깔아두면 "왜 써놨는지 모를 글"이 셋 생긴다.

   **grid로 겹치고, flex는 쓰지 않는다** — flex 컨테이너는 자식 사이의 공백을
   지운다. 문장 안에 <em>이 있으면 그 앞뒤 띄어쓰기가 통째로 사라져
   "견적만으로는생산"이 된다. grid 자식은 블록이라 글이 정상으로 흐른다.

   가로는 stretch다. center로 두면 칸이 글 길이에 맞춰 줄어들어 820px 제한이
   풀리고 긴 문장이 화면 밖으로 나간다. 세로만 가운데 — 한 줄짜리와 두 줄짜리가
   같은 자리에서 바뀌게. */
/* 폭은 표제(58px)와 이 줄(40px)이 **둘 다 한 줄로 떨어지는** 값이다.
   높이는 한 줄 기준만 잡는다 — 좁은 화면에서 줄이 늘면 칸이 알아서 커지고,
   네 문장이 같은 칸에 겹쳐 있어 그 높이를 같이 쓴다. */
.decl-lines { position: relative; display: grid;
              align-items: center; justify-items: stretch;
              width: min(1100px, 100%); min-height: 64px; }
.decl-line {
  grid-area: 1 / 1; margin: 0;
  /* 표제의 약 70%. 절반까지 줄이면 부제가 아니라 각주로 읽혀서, 정작 반박의
     내용을 담은 문장이 눈에 안 들어온다. */
  font-size: 40px; font-weight: 600; line-height: 1.5;
  letter-spacing: -.03em; word-break: keep-all; text-wrap: balance;
  /* 표제가 커진 만큼 이쪽은 눌러 위계를 만든다. 둘 다 세면 둘 다 안 읽힌다. */
  color: rgba(255,255,255,.8); text-shadow: 0 2px 24px rgba(0,0,0,.5);
  /* 천천히, 멀리서 올라온다. 빨리 튀어나오면 광고 문구가 되고, 느리면
     읽는 사람이 문장 하나에 머무를 시간이 생긴다. */
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.decl-line.is-active { opacity: 1; transform: none; }

/* 카드가 됐을 때만 보인다. 선언이 끝난 자리에 할 일을 둔다. */
.decl-close {
  position: absolute; inset: auto 0 0 0; z-index: 8;
  padding: 0 0 54px; text-align: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease .2s, transform .6s ease .2s;
}
.decl-stage.is-card .decl-close { opacity: 1; transform: translateY(0); }
.decl-close p { margin: 0 0 18px; font-size: 14px; letter-spacing: .04em;
                color: rgba(255,255,255,.72); }

.decl-cta {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  background: #fff; color: #0a0a0a; text-decoration: none;
  font-size: 16px; font-weight: 650; white-space: nowrap;
}

.decl-dots { position: absolute; right: 28px; bottom: 26px; z-index: 10;
             display: flex; gap: 8px; transition: opacity .4s ease; }
.decl-stage.is-card .decl-dots { opacity: 0; }
.decl-dots span { width: 6px; height: 6px; border-radius: 50%;
                  background: rgba(255,255,255,.3); transition: .25s; }
.decl-dots span.is-active { width: 22px; border-radius: 999px; background: var(--logo-live); }


/* ── 랜딩 섹션 — /intro ────────────────────────────────────────────────
   히어로 아래로 네 덩이가 이어진다.

     ① 영상   흰 바탕 · 회색 띠 카드      실제 운영되는 공장
     ② 카드   흰 바탕 · 2열 4장          무엇을 하는가
     ③ 숫자   검은 바탕 · 3장            얼마나 하는가
     ④ 장비   흰 바탕 · 가로 스크롤      무엇으로 하는가

   **비율은 토큰 하나로 묶는다.** 섹션마다 여백과 모서리를 따로 적으면
   금방 어긋난다 — 라운드 24, 안여백 40, 카드 사이 20, 사진 16:10을
   네 섹션이 같이 쓴다. 폰에서는 값만 줄고 관계는 그대로다. */

.lp {
  --lp-max: 1120px;   /* 본문 폭 */
  --lp-side: 28px;    /* 좌우 여백 */
  --lp-pad: 120px;    /* 섹션 상하 여백 */
  --lp-gap: 20px;     /* 카드 사이 */
  --lp-r: 24px;       /* 카드 모서리 */
  --lp-in: 40px;      /* 카드 안여백 */
  padding: var(--lp-pad) 0;
}
.lp-inner { max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-side); }

/* 다크 사이트 안의 밝은 섹션이다. 전역 변수를 쓰면 두 벌이 섞이므로
   섹션이 자기 색을 직접 들고 있게 한다. */
.lp-light { background: #fff;  color: #1d1d1f;
            --lp-card: #f5f5f7; --lp-sub: #6e6e73; --lp-shot: #e6e6eb; }
.lp-dark  { background: #000;  color: #f5f5f7;
            --lp-card: #141414; --lp-sub: #a1a1a6; --lp-shot: #1e1e20; }
/* 강점 섹션. **위아래와 바탕을 달리해 한 덩이로 묶는다** — 흰 바탕이 계속
   이어지면 어디서 논지가 시작하고 끝나는지 알 수 없다. 베이지 한 톤이면 된다. */
.lp-warm  { background: #f7f3ec; color: #1d1d1f;
            --lp-card: #fffdfa; --lp-sub: #6b6862; --lp-shot: #e9e3d8; }
/* 마무리. 흰색과 베이지 사이의 회색 — 페이지를 조용히 닫는다. */
.lp-soft  { background: #f5f5f7; color: #1d1d1f;
            --lp-card: #fff; --lp-sub: #6e6e73; --lp-shot: #e6e6eb; }

.lp-title { margin: 0 0 48px; font-size: 40px; font-weight: 700;
            letter-spacing: -.035em; line-height: 1.25; word-break: keep-all; }
.lp-title em { font-style: normal; color: var(--logo-live); }
.lp-title.is-center { text-align: center; margin-bottom: 22px; }
.lp-lead { max-width: 660px; margin: 0 auto 56px; text-align: center;
           font-size: 17px; line-height: 1.8; color: var(--lp-sub);
           word-break: keep-all; }
.lp-head { display: flex; align-items: baseline; justify-content: space-between;
           gap: 20px; margin-bottom: 48px; }
.lp-head .lp-title { margin: 0; }
.lp-more { font-size: 15px; font-weight: 550; color: var(--logo-live);
           text-decoration: none; white-space: nowrap; }

/* 사진이 들어올 자리. 지금은 비어 있고, img 한 줄만 넣으면 덮인다. */
.lp-shot { position: relative; background: var(--lp-shot); }
.lp-shot[data-label]::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 12px; letter-spacing: .1em; color: var(--lp-sub); opacity: .65;
}
.lp-shot img { position: relative; z-index: 1;
               display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── ① 영상 ── 가로로 긴 띠 하나. 왼쪽 말, 오른쪽 화면. */
.lp-band {
  display: grid; grid-template-columns: 1fr minmax(0, 42%);
  align-items: center; gap: 56px;
  padding: 56px; border-radius: 28px; background: var(--lp-card);
}
.lp-band-text { padding-left: 32px; }

.lp-band h2 { margin: 0 0 18px; font-size: 38px; font-weight: 700;
              letter-spacing: -.04em; line-height: 1.28; word-break: keep-all; }
.lp-band-text p { margin: 0 0 16px; font-size: 16px; line-height: 1.8;
                  color: var(--lp-sub); word-break: keep-all; }
.lp-play { display: inline-flex; align-items: center; gap: 9px;
           font-size: 15px; color: var(--logo-live); text-decoration: none; }
.lp-soon { margin: 0; font-size: 14px; color: var(--lp-sub); }
.lp-play span { display: grid; place-items: center; width: 20px; height: 20px;
                border-radius: 50%; background: var(--logo-live);
                color: #fff; font-size: 8px; padding-left: 2px; }
/* 유튜브로 보내는 줄. **알약 세 개를 가로로 두면 2+1로 접힌다** — 이 칸은
   오른쪽을 영상이 차지해 400px밖에 안 된다. 세로 목록이 칸을 안 다툰다. */
.lp-clips { list-style: none; display: grid; margin: 22px 0 0;
            padding: 0; max-width: 420px; }
.lp-clips a { display: flex; align-items: baseline; justify-content: space-between;
              gap: 12px; padding: 12px 2px; font-size: 15px; color: inherit;
              text-decoration: none;
              border-bottom: 1px solid color-mix(in srgb, var(--lp-sub) 20%, transparent);
              transition: color .15s, border-color .15s; }
.lp-clips li:first-child a {
  border-top: 1px solid color-mix(in srgb, var(--lp-sub) 20%, transparent); }
.lp-clips a::before { content: "▸"; margin-right: -4px; font-size: 11px;
                      color: var(--logo-live); }
.lp-clips a > span { flex: 1; }
.lp-clips b { font-weight: 400; font-size: 13px; color: var(--lp-sub);
              font-variant-numeric: tabular-nums; }
.lp-clips a:hover, .lp-clips a:focus-visible {
  color: var(--logo-live); border-color: var(--logo-live); }

.lp-frame { position: relative; aspect-ratio: 16 / 9;
            border-radius: 14px; overflow: hidden; background: var(--lp-shot); }
.lp-frame > * { position: absolute; inset: 0; width: 100%; height: 100%;
                border: 0; object-fit: cover; display: block; }

/* ── ② 카드 ── 2열 4장. 사진이 카드 위쪽을 꽉 채운다. */
.lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lp-gap); }
.lp-card { display: flex; flex-direction: column;
           border-radius: var(--lp-r); overflow: hidden; background: var(--lp-card); }
.lp-card > .lp-shot { aspect-ratio: 16 / 10; }
.lp-card-body { padding: var(--lp-in); }
.lp-card h3 { margin: 0 0 14px; font-size: 28px; font-weight: 700;
              letter-spacing: -.03em; line-height: 1.3; word-break: keep-all; }
.lp-card h3 em { font-style: normal; color: var(--logo-live); }
.lp-card p { margin: 0; font-size: 15px; line-height: 1.75;
             color: var(--lp-sub); word-break: keep-all; }

/* ── ③ 규모 ── 아이콘 · 라벨 · 문장. 숫자만 크게 두면 "그래서?"가 남는다. */
.lp-scale-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lp-gap); }
.lp-scale-card { padding: 46px 40px 44px; border-radius: 28px; background: var(--lp-card); }
.lp-ico { display: block; margin-bottom: 46px; color: var(--logo-live); }
.lp-ico svg { display: block; }
.lp-ico img { display: block; width: 64px; height: 64px; }
.lp-eyebrow { margin: 0 0 12px !important; font-size: 12.5px; font-weight: 700;
              letter-spacing: .11em; color: var(--logo-live); }
.lp-scale-card h3 { margin: 0 0 18px; font-size: 26px; font-weight: 700;
                    letter-spacing: -.035em; line-height: 1.35; word-break: keep-all; }
.lp-scale-card p { margin: 0; font-size: 15px; line-height: 1.8;
                   color: var(--lp-sub); word-break: keep-all; }

/* ── ④ 장비 ── 옆으로 민다. 공정은 원래 순서가 있는 것이다. */
.lp-track {
  display: flex; gap: var(--lp-gap); overflow-x: auto;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  /* 본문 폭에 맞춰 시작하되, 오른쪽으로는 화면 끝까지 흘러나간다. */
  padding: 4px max(var(--lp-side), calc((100% - var(--lp-max)) / 2 + var(--lp-side)));
  scroll-padding-left: max(var(--lp-side), calc((100% - var(--lp-max)) / 2 + var(--lp-side)));
  scrollbar-width: none;
}
.lp-track::-webkit-scrollbar { display: none; }
.lp-rail-card { flex: 0 0 min(440px, 82vw); scroll-snap-align: start;
                display: flex; flex-direction: column;
                border-radius: var(--lp-r); overflow: hidden; background: var(--lp-card); }
.lp-rail-card > .lp-shot { aspect-ratio: 16 / 10; }
.lp-rail-card .lp-card-body { display: flex; flex-direction: column; flex: 1; }
.lp-rail-card .lp-card-body { padding: 36px 34px 34px; }
.lp-rail-card h3 { margin: 0 0 10px; font-size: 26px; font-weight: 700;
                   letter-spacing: -.035em; line-height: 1.3; word-break: keep-all; }
.lp-rail-card p { margin: 0; font-size: 15.5px; line-height: 1.8;
                  color: var(--lp-sub); word-break: keep-all; }
/* 사양은 문장이 아니라 값이다. 문장과 같은 크기로 적으면 둘 다 문장으로 읽힌다. */
.lp-spec { margin: 0 0 18px !important; font-size: 14px; font-weight: 700;
           letter-spacing: .01em; color: var(--logo-live);
           font-variant-numeric: tabular-nums; }

.lp-arrows { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.lp-arrows button { width: 38px; height: 38px; border: 0; border-radius: 50%;
                    background: var(--lp-card); color: inherit;
                    font-size: 18px; line-height: 1; cursor: pointer; }
.lp-arrows button:hover { filter: brightness(.94); }

/* ── 사이드바 접기 ─────────────────────────────────────────────────────
   랜딩은 메뉴를 접고 시작한다. **없애지는 않는다** — 없애면 랜딩에서
   어디로도 못 간다. 여기 선택자는 폰 규칙(.side)보다 구체적이라
   파일 어느 위치에 있든 이긴다. */
.side-open { display: none; }
.shell.bare { grid-template-columns: 1fr; }
.shell.bare .topbar { display: none; }
.shell.bare .side {
  position: fixed; z-index: 60; top: 0; left: 0;
  width: var(--sidebar); height: 100vh; padding: 16px 12px;
  flex-direction: column; flex-wrap: nowrap; overflow: visible;
  border-right: 1px solid var(--line); border-bottom: 0;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.shell.bare.side-on .side { transform: none; }

/* 넓은 화면에서는 **덮지 않고 자리를 만든다.** 메뉴가 카드를 가리면
   읽던 것이 잘린다. 선언문 구간은 높이가 그대로라(600vh) 폭만 바뀌므로
   나타나는 순간 스크롤이 튀지 않는다. */
@media (min-width: 901px) {
  .shell.bare.side-on { grid-template-columns: var(--sidebar) 1fr; }
  .shell.bare.side-on .side { position: sticky; }
  .shell.bare.side-on .decl { width: 100%; margin-left: 0; }
  .shell.bare.side-on .side-open { display: none; }
}
.shell.bare .side-open {
  display: grid; opacity: 0; pointer-events: none;
  transition: opacity .3s ease, left .28s cubic-bezier(.22,.61,.36,1); place-items: center; position: fixed; z-index: 70;
  top: 18px; left: 18px; width: 42px; height: 42px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.42); backdrop-filter: blur(10px);
  color: #fff; font-size: 15px; line-height: 1;
}
/* 선언문이 끝나야 메뉴가 나타난다. 감성으로 데려오는 자리에
   메뉴를 띄우면 그냥 앱 화면이 된다. */
.shell.bare.nav-ready .side-open { opacity: 1; pointer-events: auto; }
.shell.bare.side-on .side-open { left: calc(var(--sidebar) + 18px); }

/* ── 좁은 화면 ────────────────────────────────────────────────────────
   값만 줄인다. 여백·모서리·사진 비율의 관계는 그대로 간다. */
@media (max-width: 900px) {
  .lp { --lp-pad: 84px; --lp-in: 28px; --lp-r: 18px; --lp-gap: 14px; --lp-side: 20px; }
  .lp-title { font-size: 30px; margin-bottom: 32px; }
  .lp-band { grid-template-columns: 1fr; gap: 24px; }
  .lp-band-text { padding-left: 0; }
  .lp-band h2 { font-size: 24px; }
  .lp-cards { grid-template-columns: 1fr; }
  .lp-card h3 { font-size: 22px; }
  .shell.bare .side { width: min(272px, 82vw); }
  .shell.bare.side-on .side-open { left: auto; right: 18px; }
}
@media (max-width: 560px) {
  .decl-body { gap: 30px; padding: 0 24px; }
  .decl-label { line-height: 1.2; }
  .decl-lines { min-height: 80px; }
  .decl-line { font-size: 24px; line-height: 1.55; }
  .decl-stage.is-card { width: 92%; height: 74vh; border-radius: 18px; margin-top: 4vh; }
  .decl-close { padding-bottom: 36px; }
  .decl-close p { font-size: 12.5px; }
  .decl-cta { font-size: 15px; padding: 12px 24px; }
}


/* ── ⑤ 주문 방법 ──────────────────────────────────────────────────────
   왼쪽 글, 오른쪽 화면. 화면은 잘리지 않게 통째로 보여준다 — 잘라내면
   "바로 견적이 나온다"는 말의 증거가 반쪽이 된다. */
.lp-order-grid { display: grid; grid-template-columns: 1fr 1.15fr;
                 align-items: center; gap: 64px; }
.lp-order-text .lp-title { margin-bottom: 32px; }
.lp-steps { list-style: none; margin: 0 0 36px; padding: 0;
            counter-reset: step; }
.lp-steps li { position: relative; padding: 0 0 26px 46px; counter-increment: step; }
.lp-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-size: 13px; font-weight: 700; color: var(--logo-live);
  font-variant-numeric: tabular-nums;
}
.lp-steps strong { display: block; font-size: 19px; font-weight: 650;
                   letter-spacing: -.025em; }
.lp-steps span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.75;
                 color: var(--lp-sub); word-break: keep-all; }
.lp-cta { display: inline-block; padding: 14px 30px; border-radius: 999px;
          background: #1d1d1f; color: #fff; text-decoration: none;
          font-size: 16px; font-weight: 650; }
/* 화면 셋이 같은 틀에서 갈아 끼워진다. 틀 높이를 비율로 고정해야
   장면이 바뀔 때 페이지가 들썩이지 않는다. */
.lp-shots-frame { position: relative; aspect-ratio: 16 / 10;
                  border-radius: var(--lp-r); overflow: hidden;
                  background: #0a0a0a; box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.lp-shot-slide { position: absolute; inset: 0; margin: 0;
                 opacity: 0; transition: opacity .22s ease; }
.lp-shot-slide.is-on { opacity: 1; }
.lp-shot-slide img { display: block; width: 100%; height: 100%; object-fit: cover;
                     object-position: top center; }
.lp-shot-slide figcaption {
  position: absolute; inset: auto 0 0 0; padding: 44px 26px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.82) 100%);
}
.lp-shot-slide figcaption b { display: block; font-size: 15px; font-weight: 650;
                              color: #fff; }
.lp-shot-slide figcaption span { display: block; margin-top: 4px; font-size: 13.5px;
                                 color: rgba(255,255,255,.72); word-break: keep-all; }

.lp-shot-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.lp-shot-dots button { width: 7px; height: 7px; padding: 0; border: 0; cursor: pointer;
                       border-radius: 50%; background: rgba(0,0,0,.18);
                       transition: width .25s ease, background .25s ease; }
.lp-shot-dots button.is-on { width: 24px; border-radius: 999px; background: var(--logo-live); }

/* ── ⑥ 연결 ──────────────────────────────────────────────────────────
   마지막 화면은 밝게 닫는다. 어둡게 끝내면 문이 닫힌 것처럼 보이는데,
   여기는 **다음으로 넘기는 자리**다. */
.lp-next { padding-bottom: 130px; }
.lp-picks { display: grid; gap: var(--lp-gap);
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-picks form { margin: 0; display: flex; }
.lp-picks button {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center;
  /* 그림이 앉을 자리를 위쪽에 넉넉히 비운다 — 아이콘이 카드의 주인공이다. */
  padding: 52px 26px 38px; border: 0;
  border-radius: 28px; background: var(--lp-card);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lp-picks button:hover { transform: translateY(-4px);
                         box-shadow: 0 18px 40px rgba(0,0,0,.10); }
/* 64px으로는 존재감이 없다. 카드 폭의 절반 가까이 차지해야 그림이 먼저 눈에 든다. */
.lp-pick-art { display: block; width: 128px; height: 128px; margin: 0 auto 42px; }
.lp-picks b { font-size: 26px; font-weight: 700; letter-spacing: -.04em;
              line-height: 1.35; }
.lp-picks button > span:not(.lp-pick-art) {
  margin-top: 14px; font-size: 15.5px; line-height: 1.75;
  color: var(--lp-sub); word-break: keep-all;
}
/* 카드 높이가 제각각이어도 '시작하기'는 한 줄에 맞춘다. */
.lp-picks i { margin-top: auto; padding-top: 30px; font-style: normal;
              font-size: 15.5px; font-weight: 700; color: var(--logo-live); }

.lp-alt { margin: 44px 0 0; text-align: center; font-size: 15px; color: var(--lp-sub); }
.lp-alt a { margin-left: 6px; color: var(--logo-live); text-decoration: none;
            font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .lp-order-grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-lead { font-size: 15.5px; margin-bottom: 36px; }
  .lp-next { padding-bottom: 84px; }
  .lp-picks button { padding: 30px 24px 26px; border-radius: 20px; }
  .lp-picks b { font-size: 20px; }
  .lp-pick-art { width: 84px; height: 84px; margin-bottom: 26px; }
  .lp-scale-cards { grid-template-columns: 1fr; }
  .lp-scale-card { padding: 30px 26px; border-radius: 20px; }
  .lp-ico { margin-bottom: 26px; }
  .lp-ico svg { width: 52px; height: 52px; }
  .lp-scale-card h3 { font-size: 21px; }
  .lp-scale-card h3 br { display: none; }
}


/* ── 랜딩 아이콘 색 ────────────────────────────────────────────────────
   사이드바는 회색으로 두고 **랜딩에서만** 색을 준다. 파일은 하나다 —
   SVG가 currentColor로 그려져 있어 여기서 색만 바꿔 끼운다.
   (대화 화면은 같은 파일을 CSS mask로 쓰므로 이 색과 무관하다.) */
/* 색은 SVG 안 그라디언트가 들고 있다 — 제품군 그림도 그라디언트라
   단색을 나란히 두면 그 줄만 납작해 보인다. */



/* ── 정산 ─────────────────────────────────────────────────────────────
   총액은 크게 둔다 — 이 화면에서 먼저 찾는 것이 그것이다. */
.sum { display: block; margin-top: 8px; font-size: 26px; font-weight: 700;
       letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plus { color: var(--logo-live); }
.minus { color: var(--danger); }
table.ops th.right, table.ops td.right { text-align: right; }

.doc-actions { margin: 0 0 18px; text-align: center; }

/* ── 확정 도해 ───────────────────────────────────────────────────────────
   공장이나 담당자가 올린 도면. 우리가 그린 예시를 대신한다. */
.doc-figtag { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .06em;
              color: var(--muted); }
.doc-figtag.is-fixed { color: var(--text); font-weight: 650; }
.doc-drawing { display: block; width: 100%; max-width: 360px; height: auto;
               border: 1px solid var(--line); border-radius: 10px;
               background: #fff; }
.doc-open { font-size: 13px; }

/* 예시 도해는 접어 둔다 — 도면이 둘로 보이면 어느 쪽이 맞는지 헷갈린다. */
.doc-example { margin-top: 14px; }
.doc-example > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.doc-example .doc-svg { width: 190px; margin-top: 10px; }

.drawing-up { display: flex; flex-direction: column; align-items: flex-start;
              gap: 8px; }
.drawing-up input[type="file"] { font-size: 13px; }
.drawing-up button { padding: 7px 16px; border: 1px solid var(--line-strong);
                     border-radius: 999px; background: transparent;
                     color: inherit; font: inherit; font-size: 13px;
                     cursor: pointer; }
.doc-figsub { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.drawing-kind { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.drawing-kind label { display: flex; align-items: baseline; gap: 7px; cursor: pointer; }
.drawing-kind i { font-style: normal; color: var(--muted); font-size: 12px; }

/* 작업지시서 구획 제목. 공장이 받는 표에서 묶음을 가른다. */
.wo-group th { padding-top: 18px; font-size: 11.5px; letter-spacing: .08em;
               color: var(--muted); font-weight: 650; border-bottom: 0; }
.wo-group:first-child th { padding-top: 0; }

/* 오간 도면 목록. */
.dwg-list { list-style: none; margin: 0 0 10px; padding: 0;
            display: flex; flex-direction: column; gap: 7px; }
.dwg-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dwg-list li form { margin: 0; }
.dwg-list li button { padding: 3px 11px; border: 1px solid var(--line-strong);
                      border-radius: 999px; background: transparent; color: inherit;
                      font: inherit; font-size: 12px; cursor: pointer; }
.dwg-from { font-size: 11.5px; color: var(--muted); }
.dwg-list li.is-fixed a { color: var(--go); }

/* 확인 화면의 요청 사항. 고객이 적은 줄을 그대로 세운다. */
.notes { margin: 8px 0 0; padding-left: 18px; }
.notes li { margin: 4px 0; }

/* 짧은 선택지("5열" · "있습니다")는 한 줄에 여러 개 놓는다.
   하나씩 쌓으면 여섯 개짜리 열수 목록이 화면 한 장을 다 먹는다 —
   **폰에서는 이미 그렇게 하고 있었는데 넓은 화면에서만 한 줄씩이었다.** */
.col .options:not(.as-cards),
.options:not(.as-cards) { display: flex; flex-wrap: wrap; gap: 8px; }
.col .options:not(.as-cards) > button.opt,
.col .options:not(.as-cards) > a.opt,
.options:not(.as-cards) > button.opt,
.options:not(.as-cards) > a.opt {
  /* **width를 풀어야 한다.** button.opt의 width:100%가 flex-basis가 되어
     flex를 켜도 하나씩 줄을 차지한다 — 폰 규칙이 이미 그렇게 하고 있었다. */
  width: auto; flex: 1 1 auto; min-width: 128px; max-width: 100%;
  text-align: center;
}

/* 고객이 통째로 적어 보낸 글. 줄바꿈을 그대로 살린다 —
   사양서를 붙여넣은 경우가 많아 줄이 뭉치면 못 읽는다. */
.doc-body { white-space: pre-wrap; margin: 8px 0 0; line-height: 1.7;
            padding: 14px 16px; background: var(--soft);
            border-radius: var(--radius); }

/* 저장과 확정을 나란히. 확정이 오른쪽에 오고 그 옆에 지금 상태를 적는다. */
.wo-actions { flex-wrap: wrap; align-items: center; gap: 10px; }
.wo-actions .hint-inline { flex-basis: 100%; }

/* 요청 한 줄을 지우는 버튼. 입력칸 오른쪽에 붙는다 — 줄을 벗어나면
   어느 줄의 버튼인지 눈으로 따라가야 한다. */
.note-answer { display: flex; align-items: center; gap: 8px; }
.note-answer input[type=text] { flex: 1 1 auto; min-width: 0; }
.note-done {
  flex: none; padding: 7px 12px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.note-done:hover { border-color: var(--go); color: var(--go); }
.note-drop {
  flex: none; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px;
  cursor: pointer; line-height: 1;
}
.note-drop:hover { border-color: var(--danger); color: var(--danger); }

/* 표 안에 들어가는 작은 폼. 한 줄에서 바로 바꾼다 — 계정을 고치려고
   다른 화면으로 넘어가면 누구를 고치는 중인지 놓친다. */
.row-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row-form select, .row-form input { padding: 6px 8px; font-size: 13px; }
.row-form input[type=password] { width: 170px; }
.row-form button {
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 12.5px;
  cursor: pointer; white-space: nowrap;
}
.row-form button:hover { border-color: var(--accent); }

/* 회신할 것과 알려준 것. **답이 비어 있을 때만 갈라 보인다** —
   다 적고 나면 표시가 시끄러워질 뿐이다. */
.note-left { font-style: normal; color: var(--go); margin-left: 8px; }
.note-done-all { font-style: normal; color: var(--muted); margin-left: 8px; }
.note-wait { box-shadow: inset 2px 0 0 var(--go); }
.tag-req {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer;
  vertical-align: middle;
}
.tag-req.on { border-color: var(--go); color: var(--go); }
.tag-req:hover { border-color: var(--line-strong); }

/* 고객 승인. 회신 옆에 붙는다 — 무엇을 승인하는지가 같은 줄에 있어야 한다. */
.note-approve { display: inline-block; margin-left: 10px; }
.note-approve button {
  padding: 5px 12px; border: 1px solid var(--go); border-radius: 999px;
  background: transparent; color: var(--go); font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.note-approve button:hover { background: color-mix(in srgb, var(--go) 14%, transparent); }
.note-ok { margin-left: 8px; font-size: 12px; color: var(--go); white-space: nowrap; }
.note-wait-tag { margin-left: 8px; font-size: 12px; color: var(--muted); }

/* 대시보드의 남은 요청. **한 자리에서 끝낸다** — 문장을 보고 그 밑에 답한다. */
.todo-count { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 10px; }
.todo { list-style: none; margin: 8px 0 0; padding: 0;
        display: flex; flex-direction: column; gap: 10px; }
.todo li { border: 1px solid var(--line); border-radius: var(--radius);
           padding: 14px 16px; background: var(--panel); }
.todo li.is-wait { box-shadow: inset 3px 0 0 var(--go); }
.todo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
             font-size: 13px; }
.todo-head .sub { color: var(--muted); }
.todo-text { margin: 8px 0 10px; font-size: 14.5px; }
.todo-answer { margin: 0; font-size: 13.5px; color: var(--muted); }
.todo-form { display: flex; gap: 8px; }
.todo-form input[type=text] { flex: 1 1 auto; min-width: 0; padding: 9px 12px; }
.todo-form button {
  flex: none; padding: 9px 18px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: transparent; color: inherit; font: inherit;
  font-size: 13px; cursor: pointer;
}
.todo-form button:hover { border-color: var(--go); color: var(--go); }

/* 읽을거리 카드. 그림 위, 제목·요약 아래 — 목록에서 제목만 보고 고른다. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
        color: var(--muted); text-decoration: none; font-size: 13px; }
.chip:hover { border-color: var(--line-strong); color: var(--fg); }
.chip.on { border-color: var(--go); color: var(--go); }


/* ── 재생 중 표시 ────────────────────────────────────────────────────────
   첫 몇 초가 정지에 가까운 장면이라 영상이 사진으로 읽힌다. 그러면
   20초짜리 현장을 아무도 안 본다.

   **진행선이 핵심이다** — 화면이 멈춰 있어도 선은 간다. 그게 돌고 있다는
   가장 확실한 증거다. 점멸하는 점은 거들 뿐이다. */
.lp-playing { pointer-events: none; opacity: 0; transition: opacity .3s; }
.lp-frame.is-playing .lp-playing { opacity: 1; }
/* 진행선은 흰색인데 공장 바닥도 흰색이다 — 밝은 장면이 오면 선이 통째로
   사라진다. 아래쪽만 살짝 어둡게 깔아 어떤 화면에서도 보이게 한다.
   ::before라야 한다. ::after는 자식보다 나중에 그려져 선을 덮는다. */
.lp-playing::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
                      height: 56px; background: linear-gradient(transparent, rgba(0,0,0,.4)); }

.lp-live { position: absolute; left: 14px; top: 14px;
           display: inline-flex; align-items: center; gap: 7px;
           padding: 6px 12px 6px 10px; border-radius: 999px;
           background: rgba(12, 12, 14, .55); backdrop-filter: blur(8px);
           color: #fff; font-size: 12px; letter-spacing: .02em; }
.lp-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4f;
             animation: lp-blink 1.6s ease-in-out infinite; }
@keyframes lp-blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.lp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
          background: rgba(255, 255, 255, .22); }
.lp-bar i { display: block; height: 100%; width: 0; background: #fff; }

/* 움직임을 줄여 달라고 한 사람에게는 점멸을 멈춘다. 진행선은 영상 자체의
   상태라 그대로 둔다 — 그게 없으면 표시가 무의미해진다. */
@media (prefers-reduced-motion: reduce) {
  .lp-live i { animation: none; }
}

/* 좁은 화면에서는 화면 자체가 작아 표시가 영상을 가린다. */
@media (max-width: 900px) {
  .lp-live { left: 10px; top: 10px; padding: 5px 10px 5px 8px; font-size: 11px; gap: 6px; }
  .lp-live i { width: 6px; height: 6px; }
}


/* ── 인사이트 ──────────────────────────────────────────────────────────
   표제 · 최신 글 가로줄 · 전체 목록. 목록 하나만 두면 맨 위 넉 장 말고는
   아무도 안 본다 — 가로줄은 "훑어보라", 세로 목록은 "찾아보라"는 뜻이라
   온 목적이 다른 두 사람을 한 화면에서 갈라 준다. */
/* **폭을 두 갈래로 쓴다.** 글은 좁게, 가로줄은 화면 끝까지.
   한 폭으로 맞추면 둘 중 하나가 손해다 — 글에 맞추면 가로줄이 화면 가운데서
   끊겨 고장 난 것처럼 보이고, 가로줄에 맞추면 요약 한 줄이 화면 끝까지 뻗어
   다음 줄로 눈이 되돌아올 자리를 잃는다. */
.shell.paper .main > .inner.wide { max-width: none; }
.ins-sec-head, .ins-list, .ins-pager { max-width: 980px; }

/* 표제는 **판으로 앉힌다.** 줄 하나로 밑을 막아 두면 목록의 첫 줄과 생김새가
   같아서, 여기가 입구라는 것이 안 보인다.

   **밝은 쪽으로 간다.** 다만 바탕(베이지)과 같은 베이지를 얹으면 결을 아무리
   넣어도 판이 안 보인다 — 판은 바탕보다 **더 희어야** 뜬다. 테두리와 옅은
   그림자로 한 겹 들어 올리고, 결은 흰 윤기와 청동 그늘을 섞어 흐르게 둔다.
   글자 쪽은 비운다 — 무늬 위에 얹힌 글씨는 읽는 데 힘이 든다. */
.ins-hero { position: relative; isolation: isolate; overflow: hidden;
            max-width: 1100px; border-radius: 20px;
            border: 1px solid var(--line);
            box-shadow: 0 1px 2px rgba(31, 26, 22, .04),
                        0 20px 44px -30px rgba(31, 26, 22, .4);
            display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
            gap: 56px; align-items: center;
            padding: 46px 44px 48px; margin-bottom: 44px;
            background: linear-gradient(104deg, #fffdf9 0%, #fbf5ec 54%, #ffffff 100%); }
.gd-hero-art { position: absolute; inset: -10% -6%; z-index: -1;
               /* 결 위에 흰 막을 덮는다. 글자가 지나가는 쪽에서 무늬가 살아
                  있으면 검은 글씨가 결에 걸려 읽는 속도가 떨어진다. */
               background: linear-gradient(100deg, rgba(255, 253, 249, .93) 0%,
                                           rgba(255, 253, 249, .78) 46%,
                                           rgba(255, 253, 249, .2) 82%,
                                           rgba(255, 253, 249, 0) 100%),
                           url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20420'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='s'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='8'/%3E%3C/filter%3E%3ClinearGradient%20id='b'%20x1='1'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23a67c45'%20stop-opacity='.34'/%3E%3Cstop%20offset='1'%20stop-color='%23a67c45'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='w'%20x1='1'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'%20stop-opacity='.98'/%3E%3Cstop%20offset='1'%20stop-color='%23ffffff'%20stop-opacity='.12'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='c'%20x1='1'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23d9c19a'%20stop-opacity='.5'/%3E%3Cstop%20offset='1'%20stop-color='%23d9c19a'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20fill='none'%20filter='url(%23s)'%20stroke-linecap='round'%3E%3Cpath%20d='M1240%20-40%20C1010%2060%20900%20150%20680%20200%20C470%20248%20200%20286%20-40%20400'%20stroke='url(%23w)'%20stroke-width='62'/%3E%3Cpath%20d='M1240%2030%20C1030%20120%20910%20196%20700%20244%20C500%20290%20240%20330%20-40%20448'%20stroke='url(%23b)'%20stroke-width='26'/%3E%3Cpath%20d='M1240%20-110%20C1040%2010%20940%2096%20740%20150%20C540%20204%20280%20240%20-40%20350'%20stroke='url(%23c)'%20stroke-width='40'/%3E%3Cpath%20d='M1240%20110%20C1060%20190%20930%20258%20720%20306%20C520%20352%20260%20386%20-40%20496'%20stroke='url(%23w)'%20stroke-width='13'/%3E%3Cpath%20d='M1240%20-180%20C1070%20-70%20960%2030%20780%2096%20C600%20162%20340%20200%20-40%20300'%20stroke='url(%23b)'%20stroke-width='9'/%3E%3Cpath%20d='M1240%20190%20C1080%20258%20950%20318%20760%20362%20C560%20408%20300%20440%20-40%20540'%20stroke='url(%23c)'%20stroke-width='20'/%3E%3C/g%3E%3C/svg%3E") right center / cover no-repeat; }
.ins-eyebrow { display: block; margin-bottom: 12px;
               font-size: 12px; font-weight: 700; letter-spacing: .18em;
               color: var(--go); }
.ins-hero h1 { margin: 0; font-size: clamp(38px, 4.2vw, 58px); font-weight: 800;
               letter-spacing: -.05em; line-height: 1.02; }
.ins-hero-say h2 { margin: 0 0 14px; font-size: clamp(19px, 1.9vw, 26px);
                   font-weight: 750; letter-spacing: -.03em; line-height: 1.35;
                   word-break: keep-all; }
.ins-hero-say p { margin: 0; max-width: 62ch; color: var(--muted);
                  font-size: 15px; line-height: 1.8; word-break: keep-all; }

.ins-sec { margin-bottom: 52px; }
.ins-sec-head { margin-bottom: 20px; }
.ins-sec-head h2 { margin: 0; font-size: 23px; font-weight: 750; letter-spacing: -.03em; }

/* 분류 딱지는 **회색으로 둔다.** 초록은 이 화면에서 '지금 여기'를 뜻하는
   색이고(진행 표시·선택된 칩), 분류마다 초록을 칠하면 무엇이 지금인지
   눈이 나뉜다. */
.ins-pill { align-self: flex-start; padding: 4px 10px; border-radius: 999px;
            border: 1px solid var(--line); background: var(--soft);
            color: var(--muted); font-size: 11.5px; font-weight: 600;
            letter-spacing: .01em; white-space: nowrap; }

/* 가로줄. **마지막 카드를 딱 맞춰 끊지 않는다** — 화면 밖으로 이어지는 것이
   보여야 더 있다는 걸 안다.

   그 잘리는 자리가 **화면 끝이라야 한다.** 여백 안쪽에서 끊기면 오른쪽에
   빈 띠가 남아 그냥 깨진 화면으로 보인다. 본문 여백만큼 밖으로 내보내고,
   같은 만큼 안쪽 여백을 줘서 끝까지 밀었을 때 카드가 모서리에 붙지 않게 한다. */
/* 왼쪽을 띄운다. 스냅은 padding 안쪽까지 밀고 들어오므로 scroll-padding으로
   같은 만큼 물려 줘야 첫 장이 여백을 먹어 치우지 않는다. */
.ins-rail { margin-right: -40px; padding-right: 40px;
            padding-left: 0; scroll-padding-left: 0;
            display: grid; grid-auto-flow: column;
            grid-auto-columns: minmax(322px, 352px); gap: 18px;
            overflow-x: auto; overscroll-behavior-x: contain;
            scroll-snap-type: x proximity; padding-bottom: 10px;
            scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* 최신 글은 **한 칸 옆에서 시작한다.** 줄머리까지 같이 밀어야 한 덩어리로
   읽힌다 — 제목만 왼쪽에 남으면 아래 목록의 줄머리와 줄이 맞아 버려서
   가로줄이 그 목록에 딸린 것처럼 보인다. 카드 한 칸을 통째로 비우면 너무
   멀어서 딴 화면처럼 보인다. 200px이 눈에 띄되 붙어 보이는 자리다. */
.gd-latest { padding-left: 200px; }

.ins-rail::-webkit-scrollbar { height: 6px; }
.ins-rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.ins-card { scroll-snap-align: start;
            display: flex; flex-direction: column; text-decoration: none; color: inherit;
            border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
            background: var(--panel); transition: border-color .18s, transform .18s; }
.ins-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
/* ── 가이드 ────────────────────────────────────────────────────────────
   원리와 점검을 가르는 탭. 건수를 같이 적어 눌러보기 전에 알게 한다. */
/* 전체 글도 **줄머리째 들여 쓴다.** 위 가로줄(200px)과 들여쓴 양이 달라
   두 덩어리가 안 겹치고, 줄머리만 왼쪽에 남기면 목록이 딴 데 붙은 것처럼
   보인다 — 제목과 내용은 같이 움직여야 한 묶음으로 읽힌다. */
.gd-all { padding-left: 100px; }

.gd-tabs { display: flex; gap: 8px; margin: -4px 0 22px; flex-wrap: wrap; }
.gd-tab { display: inline-flex; align-items: baseline; gap: 7px;
          padding: 9px 16px; border-radius: 999px;
          border: 1px solid var(--line); background: var(--panel);
          font-size: 14px; font-weight: 600; color: var(--muted);
          text-decoration: none; transition: .14s; }
.gd-tab span { font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: .7; }
.gd-tab:hover { border-color: var(--line-strong); color: var(--fg); }
.gd-tab.on { background: var(--go); border-color: var(--go); color: #fff; }
.gd-tab.on span { opacity: .85; }

/* 뱃지는 그림 위 왼쪽 어깨에 **한 줄로** 붙인다. 사진이 밝든 어둡든 읽혀야
   해서 바탕을 깐다. 양 끝으로 갈라 놓았더니 둘이 대등해 보여서 고른 글이
   묻혔다 — 나란히 세우고 픽을 앞에 두면 어느 쪽이 표시인지 바로 갈린다. */
.ins-card-pic, .ins-row-pic { position: relative; }
.gd-badges { position: absolute; top: 10px; left: 10px; right: 10px;
             display: flex; align-items: center; gap: 6px; }
.gd-kind, .gd-pick { display: inline-flex; align-items: center; gap: 5px;
                     padding: 4px 10px; border-radius: 999px; white-space: nowrap;
                     font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
                     line-height: 1.5; backdrop-filter: blur(6px); }
/* 종류는 뒤로 물린다. **없는 카드가 없어서** 색까지 주면 픽과 다툰다. */
.gd-kind { background: rgba(16, 14, 12, .6); color: rgba(255, 255, 255, .92);
           font-weight: 700; }
/* 에디터가 고른 것. 청동은 이 화면에서 '고른 것'을 뜻하는 색이고(켜진 탭),
   별은 글자를 안 읽어도 눈에 먼저 걸린다. */
.gd-pick { background: var(--go); color: #fff;
           box-shadow: 0 2px 10px rgba(31, 26, 22, .3); }
.gd-pick i { font-style: normal; font-size: 12.5px; line-height: 1;
             color: #ffe3a8; }

.ins-card-pic { display: block; height: 212px; background: var(--soft) center / cover no-repeat; }
.ins-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
                 flex: 1; padding: 16px 18px 18px; }
.ins-card-body b { font-size: 17px; font-weight: 700; line-height: 1.45;
                   letter-spacing: -.02em; word-break: keep-all;
                   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                   overflow: hidden; }
.ins-card-body .ins-meta { margin-top: auto; }

/* 전체 목록. 카드 격자 대신 가로 줄로 놓는다 — 제목을 크게 두고 요약까지
   보여야 "이 글이 내 얘긴가"를 열지 않고 판단한다. */
.ins-list { border-top: 1px solid var(--line); }
.ins-row { display: grid; grid-template-columns: 268px 1fr; gap: 32px;
           align-items: start; padding: 30px 0;
           border-bottom: 1px solid var(--line);
           text-decoration: none; color: inherit; }
.ins-row-pic { display: block; height: 172px; border-radius: 10px;
               background: var(--soft) center / cover no-repeat; }
.ins-row-body { display: flex; flex-direction: column; align-items: flex-start;
                gap: 10px; min-width: 0; }
.ins-row-body b { font-size: 20.5px; font-weight: 700; line-height: 1.4;
                  letter-spacing: -.025em; word-break: keep-all; }
.ins-row:hover .ins-row-pic { opacity: .88; }
/* 밝은 바탕에서도 어두운 바탕에서도 통하게 밑줄로 짚는다. 흰색으로 밝히면
   종이 바탕에서는 글자가 사라진다. */
.ins-row:hover b { text-decoration: underline; text-underline-offset: 3px;
                   text-decoration-thickness: 1px; }
.ins-sum { color: var(--muted); font-size: 14.5px; line-height: 1.65; word-break: keep-all;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
           overflow: hidden; }
.ins-meta { font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
            color: var(--muted); }

.ins-pager { display: flex; justify-content: space-between; align-items: center;
             gap: 16px; margin-top: 28px; }
.ins-pager a { color: var(--muted); text-decoration: none; font-size: 14px; }
.ins-pager a:hover { color: var(--fg); }

@media (max-width: 900px) {
  .ins-hero { grid-template-columns: 1fr; gap: 22px; border-radius: 16px;
              padding: 30px 24px 32px; margin-bottom: 32px; }
  .ins-sec { margin-bottom: 40px; }
  /* 좁은 화면에서는 본문 여백이 20px이다. 밖으로 내보내는 양도 같이 줄인다. */
  /* 좁은 화면에서는 한 칸을 통째로 비울 자리가 없다. 줄머리로 되돌린다. */
  .gd-latest { padding-left: 0; }
  .ins-rail { margin-right: -20px; padding-right: 20px;
              grid-auto-columns: minmax(272px, 296px); }
  /* 좁은 화면에서는 들여쓸 자리가 없다. */
  .gd-all { padding-left: 0; }
  .gd-tabs { gap: 6px; margin: 0 0 20px; }
  .gd-tab { padding: 8px 13px; font-size: 13.5px; }
  .ins-card-pic { height: 178px; }
  /* 사진을 위로 올린다. 좁은 화면에서 두 칸으로 두면 사진도 글도 다 좁다. */
  .ins-row { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .ins-row-pic { height: 200px; }
  .ins-row-body b { font-size: 17px; }
}


/* ── 종이 바탕 ────────────────────────────────────────────────────────
   **읽으라고 만든 화면은 밝게 둔다.** 어두운 바탕은 목록과 표를 훑을 때는
   편하지만, 문단을 여러 개 읽어 내려갈 때는 흰 글자가 번져 보인다.
   사이드바는 앱의 뼈대라 그대로 두고 본문 판만 바꾼다.

   순백이 아니라 **따뜻한 회갈색**이다. 흰 종이는 어두운 사이드바 옆에서
   너무 세게 튀고, 사진이 많은 화면에서는 사진마다 흰 테두리가 생긴 것처럼
   보인다.

   색을 하나하나 다시 칠하지 않고 **토큰만 바꿔 끼운다.** 칩·빈 화면·위 띠가
   모두 같은 변수를 보고 있어서, 여기서 값을 덮으면 알아서 따라온다. */
.shell.paper .main {
  --bg: #f4efe7; --panel: #fbf8f3; --soft: #efe7db;
  --fg: #1f1a16; --muted: #7c7268;
  --line: #e3dacd; --line-strong: #cabca8;
  /* 이 화면의 강조는 청동빛이다. 초록은 어두운 바탕에서 '지금'을 뜻하려고
     고른 색이라, 베이지 위에 얹으면 그 뜻은 사라지고 색만 튄다. */
  --go: #946f3e;
  --accent: #1f1a16; --on-accent: #f4efe7;
  background: var(--bg); color: var(--fg);
}
/* `.chip.on`이 app.css에 두 벌 있어서 배경은 앞 규칙(검정), 글자색은 뒤
   규칙(청동)이 이겨 섞인다. 여기서 한 벌로 다시 적어 끊는다 — 고른 분류가
   가장 잘 보여야 할 자리다. */
.shell.paper .chip.on { background: var(--go); border-color: var(--go); color: #fff; }

/* 제판 도면. **크게 건다** — 글자·바코드·색까지 들여다보는 자리라
   규격 설명용 작은 도해와 성격이 다르다. */
.plate-drawing { display: block; width: 100%; height: auto; border-radius: 10px;
                 background: #fff; border: 1px solid var(--line); }
.plate-note { margin: 16px 0 18px; padding: 14px 16px; border-radius: 10px;
              background: var(--soft); border: 1px solid var(--line); }
.plate-note p { margin: 0 0 6px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.plate-note p:last-child { margin-bottom: 0; }
.plate-note b { color: var(--fg); }
.plate-ok { margin: 0; padding: 12px 16px; border-radius: 10px;
            background: rgba(52, 194, 110, .1); border: 1px solid var(--go);
            color: var(--go); font-size: 14px; font-weight: 600; }
.plate-wait { margin: 0; font-size: 14px; color: var(--muted); }
/* 승인 버튼 아래 여백. 바로 다음 섹션 제목이 붙으면 어느 쪽 버튼인지 흐려진다. */
.plate-approve { margin: 0 0 8px; }
/* 승인 뒤 그 자리로 되돌아올 때, 제목이 화면 맨 위에 딱 붙지 않게 띄운다. */
#plate, #notes { scroll-margin-top: 24px; }