/* ===========================================================================
   디자인 토큰
   세 탭(개념 / 시뮬레이션 / AI 여행 준비)이 같은 스케일을 쓴다.
   =========================================================================== */

:root {
  /* 표면 */
  --bg: #0d0f13;
  --surface: #14171d;
  --surface-2: #1a1e26;
  --surface-3: #212734;
  --line: #262c37;
  --line-2: #333b4a;

  /* 텍스트 */
  --text: #e8eaef;
  --text-2: #b6bdcb;
  --text-3: #7d8698;

  /* 의미색 */
  --accent: #6ea8fe;
  --accent-bg: #13263f;
  --ok: #4ade80;
  --ok-bg: #10281a;
  --warn: #fbbf24;
  --warn-bg: #2b2109;
  --bad: #f87171;
  --bad-bg: #2c1417;
  --violet: #a78bfa;
  --violet-bg: #201a38;
  --cyan: #22d3ee;

  /* 타이포 스케일 */
  --t-label: 11.5px;
  --t-sm: 13px;
  --t-ui: 14.5px;
  --t-body: 16px;
  --t-h3: 17px;
  --t-h2: 23px;
  --t-h1: 33px;

  /* 간격 · 반경 */
  --sp: 8px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;

  --font: "Pretendard", ui-sans-serif, "Segoe UI", "Malgun Gothic",
    system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "D2Coding", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font: var(--t-ui)/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  /* 한국어는 어절 중간에서 끊기면 읽기 어렵다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.015em; margin: 0; }
p { margin: 0 0 14px; }
a { color: var(--accent); }

/* ===========================================================================
   헤더 + 탭
   =========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px; height: 58px;
  background: rgba(13, 15, 19, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-size: var(--t-ui); font-weight: 650; color: var(--text);
  letter-spacing: -0.01em; white-space: nowrap;
}
.brand .dot { color: var(--accent); }

.tabs { display: flex; gap: 4px; margin-right: auto; }
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: 600 var(--t-ui)/1 var(--font); color: var(--text-3);
  padding: 9px 14px; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--text-2); background: var(--surface-2); }
.tab[aria-selected="true"] { color: var(--text); background: var(--surface-3); }
.tab .num {
  font-size: var(--t-label); font-weight: 700; color: var(--text-3);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px;
}
.tab[aria-selected="true"] .num { color: var(--accent); border-color: var(--accent); }

.badge {
  font-size: var(--t-label); padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--text-3); white-space: nowrap;
}
.badge.native { color: var(--ok); background: var(--ok-bg); border-color: #1d5c37; }
.badge.shim { color: var(--warn); background: var(--warn-bg); border-color: #5c4713; }
.badge.blocked { color: var(--bad); background: var(--bad-bg); border-color: #71343a; }

.tab-panel[hidden] { display: none; }

@media (max-width: 720px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .brand { display: none; }
  .badge { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
}

/* ===========================================================================
   공유 컴포넌트 — 각 탭에서 동일하게 쓴다
   =========================================================================== */

/* 섹션 라벨 */
.eyebrow {
  font-size: var(--t-label); letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650; margin-bottom: 8px;
}

/* 카드 */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}

/* 코드 블록 */
.code {
  background: #0a0d12; border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px; overflow-x: auto;
  font: var(--t-sm)/1.7 var(--mono); color: #c3cee0;
  margin: 0 0 16px;
}
.code .k { color: #c084fc; }
.code .s { color: #86efac; }
.code .c { color: #5f6878; }
.code .f { color: var(--accent); }

/* 인라인 코드 */
code:not(.code code) {
  font: 0.92em var(--mono); color: var(--accent);
  background: #151b26; padding: 1px 5px; border-radius: 4px;
}

/* 종류 배지 — 개념 도식과 스테퍼가 공유 */
.chip {
  display: inline-block; font-size: var(--t-label); font-weight: 700;
  letter-spacing: .05em; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-3);
}
.chip.k-observe { background: var(--accent-bg); color: var(--accent); }
.chip.k-act     { background: var(--violet-bg); color: var(--violet); }
.chip.k-fail    { background: var(--bad-bg); color: var(--bad); }
.chip.k-recover { background: var(--warn-bg); color: var(--warn); }
.chip.k-done    { background: var(--ok-bg); color: var(--ok); }

/* 결과 박스 — 스테퍼와 개념 예시가 공유 */
.result {
  margin: 0; font: var(--t-sm)/1.7 var(--mono);
  white-space: pre-wrap; word-break: break-word;
  background: #0a1119; border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  border-radius: var(--r-sm); padding: 10px 12px; color: #c5d0df;
  max-height: 240px; overflow: auto;
}
.result.bad { background: #170f11; border-color: #3d1d21; border-left-color: var(--bad); }

/* 콜아웃 */
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--surface-2); border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px; margin: 0 0 18px; color: var(--text-2);
}
.callout.warn { border-left-color: var(--warn); }
.callout p:last-child { margin-bottom: 0; }

/* 탭 사이를 잇는 딥링크 */
.crosslink {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid #24456e; border-radius: 999px;
  font: 600 var(--t-sm)/1 var(--font); padding: 8px 14px;
  margin: 2px 0 18px;
}
.crosslink:hover { background: #17304f; border-color: #35659c; }
.crosslink::after { content: "→"; font-weight: 400; }
.crosslink.back {
  background: transparent; color: var(--text-3); border-color: var(--line-2);
  font-weight: 500; padding: 5px 11px; margin: 0;
}
.crosslink.back:hover { color: var(--text-2); background: var(--surface-2); }
.crosslink.back::after { content: ""; }

/* 딥링크 도착 지점 강조 */
@keyframes landing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 168, 254, 0); }
  25%      { box-shadow: 0 0 0 4px rgba(110, 168, 254, .35); }
}
.landed { animation: landing 1.4s ease-out 2; border-radius: var(--r); }

/* 버튼 */
button {
  font: 600 var(--t-sm)/1 var(--font); cursor: pointer;
  background: var(--accent); color: #08182f; border: 0;
  border-radius: var(--r-sm); padding: 9px 14px;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .4; cursor: default; filter: none; }
button.secondary { background: var(--surface-3); color: var(--text); border: 1px solid var(--line-2); }
button.ghost { background: transparent; color: var(--text-3); border: 1px solid var(--line); }
button.link { background: none; color: var(--accent); padding: 3px 6px; font-weight: 500; }
button.approve { background: var(--ok); color: #052012; }
button.reject { background: var(--bad); color: #2a0507; }

.row { display: flex; gap: 8px; flex-wrap: wrap; }

/* 폼 요소 */
.field { display: block; margin: 14px 0 0; }
.field > span,
form label > span { display: block; font-size: var(--t-label); color: var(--text-3); margin-bottom: 5px; }
select, textarea, input {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 9px 11px; font: var(--t-sm)/1.5 var(--font);
}
textarea { font-family: var(--mono); resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
form label { display: block; margin-bottom: 12px; }

/* ===========================================================================
   1부 · 개념 탭
   =========================================================================== */

/* 시뮬레이션 탭과 같은 컨테이너 폭·패딩을 쓰되, 본문 한 줄이 늘어지지 않게
   좌측 고정 목차 + 본문으로 나눈다. 코드·도식·표는 본문보다 넓게 뻗는다. */
.doc {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  gap: 48px; max-width: 1360px; margin: 0 auto; padding: 34px 20px 90px;
}

.doc-toc { position: sticky; top: 82px; align-self: start; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: block; padding: 7px 10px 7px 0; text-decoration: none;
  font-size: var(--t-sm); line-height: 1.45; color: var(--text-3);
  border-left: 2px solid var(--line); padding-left: 14px;
}
.doc-toc a::before {
  content: counter(toc) ". "; color: #545d6d; font-variant-numeric: tabular-nums;
}
.doc-toc a:hover { color: var(--text-2); border-left-color: var(--line-2); }
.doc-toc a.active { color: var(--text); border-left-color: var(--accent); }

.doc-main > p,
.doc-main > ul,
.doc-main section > p,
.doc-main section > ul,
.doc-main section > h2,
.doc-main section > h3,
.doc-main .callout,
.doc-main .crosslink { max-width: 76ch; }

.doc-main p { font-size: var(--t-body); line-height: 1.8; }
.doc-main b { color: var(--text); font-weight: 650; }

.doc-title {
  font-size: var(--t-h1); line-height: 1.3; margin: 0 0 18px; max-width: 26ch;
}
.doc-standfirst {
  font-size: 17.5px; line-height: 1.75; color: var(--text-3);
  margin: 0 0 44px; padding-bottom: 30px; border-bottom: 1px solid var(--line);
  max-width: 62ch;
}

/* 본문보다는 넓게, 그렇다고 끝까지 늘어지지는 않게 */
.doc-main .code { max-width: 92ch; }
.doc-main .compare,
.doc-main table,
.doc-main .result { max-width: 940px; }

.doc section { margin-bottom: 52px; scroll-margin-top: 84px; }

@media (max-width: 1080px) {
  .doc { grid-template-columns: 1fr; gap: 0; }
  .doc-toc { display: none; }
}
.doc h2 {
  font-size: var(--t-h2); line-height: 1.4; margin: 0 0 16px;
  padding-top: 4px;
}
.doc h3 { font-size: var(--t-h3); margin: 28px 0 10px; }

.doc ul { margin: 0 0 16px; padding-left: 20px; font-size: var(--t-body); line-height: 1.8; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--text-3); }

/* 비교 도식 — .card 를 그대로 쓴다 */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin: 0 0 20px; }
.compare .card { padding: 16px; display: flex; flex-direction: column; }
.compare .card .chip { align-self: flex-start; }
.compare .card .cap { margin-top: auto; }
.compare .card h3 { margin: 10px 0 12px; font-size: 15px; }
.compare .card.now { border-color: #3d2427; }
.compare .card.next { border-color: #22405f; }
.compare-arrow { display: flex; align-items: center; color: var(--text-3); font-size: 20px; }
.flow { margin: 0; padding-left: 18px; font-size: var(--t-sm); line-height: 1.95; color: var(--text-2); }
.flow li::marker { color: var(--text-3); }
.compare .cap {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--text-3);
}
@media (max-width: 700px) {
  .compare { grid-template-columns: 1fr; }
  .compare-arrow { justify-content: center; transform: rotate(90deg); }
  .doc-title { font-size: 26px; }
}

/* 표 */
.doc table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: 0 0 18px; }
.doc th { text-align: left; color: var(--text-3); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--line-2); }
.doc td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc .compact-table th:first-child,
.doc .compact-table td:first-child { white-space: nowrap; }
.doc .compact-table thead th { color: var(--text-2); background: var(--surface-2); }
.doc .checklist {
  max-width: 82ch; margin: 0 0 20px; padding: 14px 18px 14px 42px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
.doc .checklist li { padding: 4px 0; }
.code.compact { margin: 12px 0 0; }

/* ===========================================================================
   2부 · 시뮬레이션 탭
   =========================================================================== */

.sim-intro {
  max-width: 1360px; margin: 0 auto; padding: 26px 20px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.sim-intro h2 { font-size: var(--t-h2); margin-bottom: 6px; }
.sim-intro p { color: var(--text-3); font-size: var(--t-sm); max-width: 620px; margin: 0; }

.layout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px;
  max-width: 1360px; margin: 0 auto; padding: 20px; align-items: start;
}
@media (max-width: 1080px) { .layout { grid-template-columns: 1fr; } }

.panel { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* 어느 쪽이 사람이고 어느 쪽이 에이전트인지 못 헷갈리게 */
.panel-label {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--r);
  border: 1px solid var(--line); border-left-width: 4px;
  background: var(--surface);
}
.panel-label .chip { flex: none; font-size: var(--t-sm); padding: 5px 12px; }
.panel-label b { display: block; color: var(--text); font-size: var(--t-ui); }
.panel-label span:not(.chip) { font-size: 12.5px; color: var(--text-3); }

.panel-label.human { border-left-color: var(--text-3); }
.panel-label.human .chip { background: var(--surface-3); color: var(--text-2); }
.panel-label.agent { border-left-color: var(--violet); background: #16121f; }
.panel-label.agent .chip { background: var(--violet-bg); color: var(--violet); }

.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.block-head h3 { font-size: var(--t-ui); }
.block-body { padding: 16px 18px; }
.block-body > p.hint:first-child { margin-top: 0; }

.hint { color: var(--text-3); font-size: 12.5px; line-height: 1.7; margin: 0 0 12px; }
.route-guide {
  margin: 0 0 16px; padding: 11px 13px;
  border: 1px solid #24456e; border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); background: var(--accent-bg);
  color: var(--text-2); font-size: 12.5px; line-height: 1.7;
}
.route-guide b:first-child { display: block; color: var(--text); margin-bottom: 2px; }

/* 표 */
.grid { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
/* 헤더는 한국어라 uppercase 와 넓은 자간이 아무 일도 하지 않는다. 굵기로만 구분한다. */
.grid th {
  text-align: left; color: var(--text-3); font-weight: 600; font-size: var(--t-label);
  padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.grid td { padding: 10px 18px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr { transition: background .18s; }

/* 방금 도구 호출이 건드린 행 */
.grid tr.flash td { background: #142438; color: var(--text); }
.grid tr.flash td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.status { font-size: var(--t-label); padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.status-requested { color: var(--warn); background: var(--warn-bg); }
.status-confirmed { color: var(--accent); background: var(--accent-bg); }
.status-ticketed  { color: var(--violet); background: var(--violet-bg); }
.status-completed { color: var(--ok); background: var(--ok-bg); }
.zero { color: var(--bad); font-weight: 700; }
.mono { font-family: var(--mono); font-size: 12.5px; }
/* 객실 표의 호텔명 — 상품명 아래 한 단 낮춰 붙는다 */
.grid td .sub { color: var(--text-3); font-size: 11.5px; }

.detail { margin: 0 18px 16px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); }
.detail h4 { font-size: var(--t-sm); margin: 0 0 8px; }
.note { color: var(--warn); font-size: var(--t-sm); margin: 0 0 10px; min-height: 1.2em; }

/* ---------- 스테퍼 ---------- */

.stepper .block-head { background: var(--surface-2); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.stepper-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.stepper-scope {
  margin-top: 7px; color: var(--text-2); font-size: 11.5px; line-height: 1.55;
}
.stepper-scope code { color: var(--cyan); }
.stepper-count {
  font-size: var(--t-label); color: var(--text-3); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}

.step-card {
  border: 1px solid var(--line); border-left: 4px solid var(--line-2);
  border-radius: var(--r); background: #0f1218; padding: 18px; min-height: 190px;
  transition: border-color .3s;
}
.step-card.k-observe { border-left-color: var(--accent); }
.step-card.k-act     { border-left-color: var(--violet); }
.step-card.k-fail    { border-left-color: var(--bad); background: #150f12; }
.step-card.k-recover { border-left-color: var(--warn); }
.step-card.k-done    { border-left-color: var(--ok); }

.step-empty { color: var(--text-3); font-size: var(--t-sm); line-height: 1.85; margin: 0; }
.step-card .chip { margin-bottom: 14px; }

.step-block { margin-bottom: 16px; }
.step-block:last-child { margin-bottom: 0; }
.step-label {
  font-size: var(--t-label); font-weight: 600;
  color: #66707f; margin-bottom: 6px;
}
.step-why { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text); }
.step-call {
  font: var(--t-sm)/1.5 var(--mono); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 10px 12px; color: var(--accent); word-break: break-all;
}
.step-call span { color: var(--text-3); }
.step-pending { color: var(--text-3); font-size: var(--t-sm); }
.step-teach {
  margin: 10px 0 0; font-size: var(--t-sm); line-height: 1.75; color: #fca5a5;
}
#step-auto.on { background: var(--bad); color: #fff; }

/* ---------- 승인 게이트 ---------- */

.approvals:not(:empty) { margin-bottom: 20px; }
.approval {
  border: 1px solid #6b5210; background: var(--warn-bg); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 10px;
}
.approval .t { font-weight: 650; color: var(--warn); font-size: var(--t-ui); }
.approval .d { color: var(--text-2); font-size: var(--t-sm); margin: 6px 0 12px; }

/* ---------- 로그 ---------- */

.tool-desc {
  font-size: 12.5px; line-height: 1.7; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; margin-top: 12px;
}
.tool-desc b { color: var(--text); }

.agent-log {
  max-height: 300px; overflow: auto; background: #0a0d12;
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px;
  font: 12px/1.6 var(--mono);
}
.entry { margin-bottom: 11px; padding-bottom: 9px; border-bottom: 1px dashed #21262f; }
.entry:last-child { border-bottom: 0; margin-bottom: 0; }
.entry .call { color: var(--accent); }
.entry .think { color: var(--text-3); font-style: italic; }
.entry .err { color: var(--bad); }
.entry pre { margin: 5px 0 0; white-space: pre-wrap; word-break: break-all; color: #b9c3d2; }

.log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--text-3); max-height: 170px; overflow: auto; }
.log li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.log li:last-child { border-bottom: 0; }
.log .t { color: #5f6878; font-family: var(--mono); font-size: 11.5px; }

/* 에이전트가 선언형 폼을 조작하는 동안 (네이티브: 브라우저가 붙여 준다) */
#ticket-form:is(:tool-form-active, .tool-form-active) {
  outline: 2px solid var(--cyan); outline-offset: 8px; border-radius: var(--r-sm);
  animation: agentPulse 1.1s ease-in-out infinite;
}
#ticket-form:is(:tool-form-active, .tool-form-active) button[type="submit"],
#ticket-form button:is(:tool-submit-active) { background: var(--cyan); color: #04222a; }
@keyframes agentPulse {
  0%, 100% { outline-color: var(--cyan); }
  50%      { outline-color: #0b6b80; }
}

/* 시뮬레이션 탭의 움직임은 전부 피드백용이다. 폼 테두리의 청록색과 강조된
   행 배경은 애니메이션 없이도 그대로 남는다. */
@media (prefers-reduced-motion: reduce) {
  #tab-sim *,
  #tab-sim *::before,
  #tab-sim *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* 다만 .landed 는 깜빡임 자체가 표시라, 끄기만 하면 딥링크로 도착한 지점을
     알 수 없게 된다. 같은 링을 정적으로 남긴다. 3초 뒤 main.js 가 클래스를 뗀다. */
  #tab-sim .landed { box-shadow: 0 0 0 4px rgba(110, 168, 254, .35); }
}

/* ===========================================================================
   탭 3 · 네이티브 WebMCP 계측 화면
   =========================================================================== */

.native-lab {
  min-height: calc(100vh - 58px);
  background-color: #090e11;
  background-image:
    linear-gradient(rgba(34, 211, 238, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}

.native-shell {
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0 64px;
}

.native-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 0 0 30px;
  border-bottom: 1px solid #1f3438;
}
.native-hero > div:first-child { max-width: 760px; }
.native-hero .eyebrow,
.native-section-head .eyebrow { color: #4ba6af; }
.native-hero h2 { font-size: clamp(25px, 3vw, 38px); line-height: 1.25; margin-bottom: 14px; }
.native-hero p:not(.eyebrow) { color: #9fadb0; line-height: 1.8; margin: 0; }

.native-status {
  flex: none;
  padding: 9px 14px;
  border: 1px solid #365056;
  border-radius: 999px;
  background: #101a1d;
  color: #9aa9ac;
  font: 700 12px/1 var(--mono);
}
.native-status.ready { color: #6ee7a0; border-color: #26764c; background: #0c2117; }
.native-status.blocked,
.native-status.error { color: #fca5a5; border-color: #72383e; background: #261316; }

.native-readiness,
.native-board,
.native-prompt-panel,
.native-events,
.native-note {
  background: rgba(13, 20, 23, .94);
  border: 1px solid #203238;
  border-radius: 4px;
}

.native-readiness { margin-top: 28px; padding: 22px; }
.native-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.native-section-head .eyebrow { margin: 0 0 3px; font-family: var(--mono); }
.native-section-head h3 { font-size: 18px; }
.native-only-tag,
.native-evidence-label,
.native-counter {
  color: #73d4dd;
  border: 1px solid #31545a;
  background: #0d1d21;
  border-radius: 3px;
  padding: 4px 8px;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .08em;
}

.native-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.native-check {
  display: flex;
  gap: 11px;
  align-items: center;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid #27383d;
  background: #0b1215;
}
.native-check-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b777a;
  box-shadow: 0 0 0 4px rgba(107, 119, 122, .1);
}
.native-check[data-state="passed"] .native-check-dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(74, 222, 128, .1); }
.native-check[data-state="failed"] .native-check-dot { background: var(--bad); box-shadow: 0 0 0 4px rgba(248, 113, 113, .1); }
.native-check b,
.native-check span:not(.native-check-dot) { display: block; }
.native-check b { color: #dbe4e6; font-size: 12.5px; }
.native-check div > span { color: #728084; font: 11px/1.5 var(--mono); margin-top: 2px; }
.native-blocker {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--bad);
  background: #221316;
  color: #c7a4a7;
  font-size: 12.5px;
  line-height: 1.65;
}
.native-blocker b { color: #fecaca; }

.native-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 18px; margin-top: 18px; }
.native-board,
.native-prompt-panel,
.native-events { padding: 22px; }
.native-task-list { display: grid; gap: 10px; min-height: 282px; align-content: start; }
.native-empty {
  min-height: 282px;
  display: grid;
  place-content: center;
  text-align: center;
  color: #637175;
  border: 1px dashed #2b4146;
  background: #0a1113;
}
.native-empty span { font: 34px/1 var(--mono); color: #315159; }
.native-empty p { margin: 12px 0 0; font-size: 13px; line-height: 1.7; }

.native-task {
  position: relative;
  padding: 15px 17px;
  border: 1px solid #294047;
  border-left: 3px solid #22d3ee;
  background: #0b1518;
}
.native-task.is-complete { opacity: .68; border-left-color: var(--ok); }
.native-task.is-complete p { text-decoration: line-through; }
.native-task-meta { display: flex; align-items: center; justify-content: space-between; }
.native-task-meta code { color: #72dce7; background: none; padding: 0; }
.native-task p { margin: 10px 0 7px; color: #dfe8e9; }
.native-task-state { color: #6f7e81; font: 10px var(--mono); text-transform: uppercase; }
.priority { padding: 2px 7px; border-radius: 999px; font: 700 10px var(--mono); }
.priority-high { color: #fca5a5; background: #2c1417; }
.priority-normal { color: #fcd34d; background: #2b2109; }
.priority-low { color: #86efac; background: #10281a; }

.native-prompt-intro { color: #94a1a4; font-size: 13px; line-height: 1.75; }
.native-prompt-card {
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid #2a4147;
  background: #0a1417;
}
.native-prompt-card > span { color: #4f9fa8; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.native-prompt-card p { margin: 7px 0 0; color: #d1dcde; font-size: 13px; line-height: 1.7; }
.native-tool-contract { display: grid; gap: 7px; margin-top: 16px; }
.native-tool-contract b { color: #91a0a3; font-size: 11.5px; }
.native-tool-contract code { color: #72dce7; background: #101d21; border: 1px solid #263b40; padding: 6px 8px; }

.native-events { margin-top: 18px; }
.native-event-log { list-style: none; margin: 0; padding: 0; max-height: 290px; overflow: auto; }
.native-event-empty { padding: 18px; color: #627175; border: 1px dashed #2b4146; text-align: center; font-size: 12.5px; }
.native-event { display: grid; grid-template-columns: 84px 1fr; gap: 15px; padding: 12px 4px; border-bottom: 1px solid #1d2d31; }
.native-event time { color: #587177; font: 11px var(--mono); }
.native-event div { display: grid; gap: 5px; }
.native-event b { color: #72dce7; font: 12px var(--mono); }
.native-event code { width: fit-content; color: #a8b9bc; background: #101b1e; }
.native-event span { color: #7f9093; font-size: 12px; }

.native-note { margin-top: 18px; padding: 17px 20px; border-left: 3px solid var(--warn); }
.native-note b { color: #fde68a; }
.native-note p { margin: 5px 0 0; color: #9b9790; font-size: 12.5px; line-height: 1.7; }

@media (max-width: 920px) {
  .native-hero { align-items: flex-start; flex-direction: column; }
  .native-check-grid,
  .native-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .native-shell { width: min(100% - 28px, 1360px); padding-top: 30px; }
  .native-readiness,
  .native-board,
  .native-prompt-panel,
  .native-events { padding: 16px; }
  .native-event { grid-template-columns: 1fr; gap: 5px; }
}

/* ===========================================================================
   탭 3 · 사용자용 여행 준비 화면
   기존 계측 규칙을 제품 화면의 밝은 여행 저널 미감으로 재정의한다.
   =========================================================================== */

.native-lab {
  --travel-ink: #162524;
  --travel-muted: #64706d;
  --travel-paper: #f3efe7;
  --travel-card: #fffdf8;
  --travel-green: #147562;
  --travel-coral: #e06e4f;

  color: var(--travel-ink);
  background-color: var(--travel-paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(224, 110, 79, .10), transparent 30%),
    radial-gradient(circle at 90% 28%, rgba(20, 117, 98, .09), transparent 32%);
}

.native-shell {
  width: min(1180px, calc(100% - 48px));
  padding: 38px 0 72px;
}

.travel-hero {
  position: relative;
  isolation: isolate;
  min-height: 310px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  padding: 46px 50px;
  border-radius: 28px 28px 8px 28px;
  color: #f8f5ed;
  background:
    linear-gradient(115deg, rgba(8, 39, 43, .98) 0 43%, rgba(8, 63, 68, .74) 70%, rgba(15, 96, 91, .52)),
    radial-gradient(ellipse at 77% 74%, #57a5a2 0 10%, #1b696a 34%, #082f34 72%);
  box-shadow: 0 28px 80px rgba(36, 49, 46, .18);
}
.travel-hero::before,
.travel-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}
.travel-hero::before { width: 460px; height: 460px; right: -55px; bottom: -300px; }
.travel-hero::after { width: 330px; height: 330px; right: 35px; bottom: -235px; }
.travel-hero-copy { max-width: 760px; }
.travel-kicker {
  margin: 0 0 8px;
  color: var(--travel-green);
  font: 750 10px/1.4 var(--mono);
  letter-spacing: .18em;
}
.travel-hero .travel-kicker { color: #7ce3cd; }
.travel-hero h2 {
  margin: 0;
  color: #fffdf7;
  font: 700 clamp(34px, 5vw, 62px)/1.08 var(--font);
  letter-spacing: -.055em;
}
.travel-dates { margin: 12px 0 24px; color: rgba(255, 255, 255, .7); font-size: 14px; }
.travel-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.travel-facts span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .72);
  font-size: 11.5px;
}
.travel-facts b { color: #fff; }
.travel-date-tile {
  flex: none;
  width: 124px;
  min-height: 154px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 5px 5px 24px 5px;
  background: #f8f2e7;
  color: var(--travel-ink);
  transform: rotate(2.5deg);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .23);
}
.travel-date-tile span,
.travel-date-tile small { font: 750 10px var(--mono); letter-spacing: .18em; color: var(--travel-coral); }
.travel-date-tile strong { font: 700 54px/.95 Georgia, serif; }
.travel-date-tile small { margin-top: 7px; color: var(--travel-green); }

.agent-handoff {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 22px 0;
  padding: 20px 24px;
  border: 1px solid #d9d7cd;
  border-radius: 16px;
  background: rgba(255, 253, 248, .86);
  box-shadow: 0 10px 34px rgba(48, 57, 53, .06);
}
.agent-orb {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dff1eb;
  box-shadow: inset 0 0 0 1px rgba(20, 117, 98, .13);
}
.agent-orb span { width: 16px; height: 16px; border-radius: 50%; background: var(--travel-green); box-shadow: 0 0 0 7px rgba(20, 117, 98, .10); }
.agent-handoff-copy h3 { color: var(--travel-ink); font-size: 18px; }
.agent-handoff-copy > p:not(.travel-kicker) { margin: 3px 0 10px; color: var(--travel-muted); font-size: 12.5px; }
.agent-handoff blockquote {
  margin: 0;
  color: #244541;
  font-size: 13.5px;
  font-weight: 650;
}
.native-status {
  color: #7e7166;
  border-color: #d8d2c6;
  background: #f5f0e7;
}
.native-status.ready { color: var(--travel-green); border-color: #a8d4c7; background: #e9f6f1; }
.native-status.blocked,
.native-status.error { color: #a64531; border-color: #edc2b8; background: #fff0ec; }

.native-blocker {
  margin: 0 0 22px;
  border: 1px solid #efb4a6;
  border-left: 4px solid var(--travel-coral);
  border-radius: 10px;
  background: #fff1ed;
  color: #78483d;
}
.native-blocker b { color: #8b3523; }

.travel-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .8fr); gap: 22px; }
.travel-checklist,
.agent-steps,
.native-events {
  border: 1px solid #dedbd1;
  border-radius: 18px;
  background: var(--travel-card);
  box-shadow: 0 12px 42px rgba(45, 54, 50, .055);
}
.travel-checklist { padding: 30px; }
.travel-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.travel-section-head.compact { margin-bottom: 12px; }
.travel-section-head h3,
.agent-steps h3 { color: var(--travel-ink); font-size: 22px; }
.native-counter {
  color: var(--travel-green);
  border-color: #bdded5;
  background: #ecf8f4;
  letter-spacing: 0;
}
.travel-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #e8e5dc; }
.travel-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--travel-green); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.travel-progress-text { margin: 7px 0 21px; color: var(--travel-muted); font-size: 11.5px; }

.native-manual-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #d8e5df;
  border-radius: 11px;
  background: #f3f8f5;
}
.native-manual-toolbar > div > span {
  display: block;
  color: var(--travel-green);
  font: 750 9px/1.3 var(--mono);
  letter-spacing: .11em;
}
.native-manual-toolbar p { margin: 3px 0 0; color: var(--travel-muted); font-size: 10.5px; }
.native-refresh-button {
  flex: none;
  border: 1px solid #bad8cf;
  background: #fffefb;
  color: var(--travel-green);
  font-size: 10.5px;
}
.native-refresh-button span { display: inline-block; margin-right: 3px; font-size: 13px; }

.native-task-list { min-height: 0; gap: 9px; }
.native-task {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid #e2ded4;
  border-left: 1px solid #e2ded4;
  border-radius: 12px;
  background: #fffefb;
  transition: transform .2s, border-color .2s, background .2s;
}
.native-task:hover { transform: translateY(-1px); border-color: #b9cec8; }
.native-task.is-complete { opacity: 1; border-left-color: #c7ded7; background: #f2f7f4; }
.native-task.is-complete .native-task-title { color: #79837f; text-decoration: line-through; }
.native-task-check {
  appearance: none;
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid #c9c8c0;
  border-radius: 50%;
  background: #fffefb;
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.native-task-check::after {
  width: 6px;
  height: 10px;
  content: "";
  border: solid white;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.65);
  transition: opacity .2s, transform .2s;
}
.native-task-check:hover:not(:disabled) { border-color: var(--travel-green); transform: scale(1.06); }
.native-task-check:focus-visible { outline: 3px solid rgba(20, 117, 98, .22); outline-offset: 3px; }
.native-task-check:checked { border-color: var(--travel-green); background: var(--travel-green); }
.native-task-check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.native-task-check:disabled { opacity: 1; cursor: default; }
.native-task-content { min-width: 0; cursor: pointer; }
.native-task-meta { justify-content: flex-start; gap: 8px; }
.native-task-meta code { color: #9b978c; background: none; padding: 0; font-size: 9.5px; }
.native-task-title { display: block; margin: 4px 0 3px; color: var(--travel-ink); font-size: 14px; font-weight: 650; }
.native-task-state { color: #898f8b; font-size: 9.5px; letter-spacing: .08em; }
.priority { padding: 2px 6px; }
.priority-high { color: #b25039; background: #fde9e3; }
.priority-normal { color: #91701e; background: #faf1d6; }
.priority-low { color: #2c7565; background: #e3f3ed; }
.native-task-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto;
  align-items: end;
  gap: 9px;
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed #c9d7d1;
  border-radius: 12px;
  background: #fafbf8;
}
.native-task-form label { margin: 0; }
.native-task-form label > span { margin-bottom: 4px; color: #727b76; font-size: 9.5px; }
.native-task-form input,
.native-task-form select {
  min-height: 36px;
  border-color: #d6d8d2;
  background: #fffefb;
  color: var(--travel-ink);
  font-size: 11px;
}
.native-task-form input:focus,
.native-task-form select:focus { outline-color: rgba(20, 117, 98, .32); }
.native-task-form button {
  min-height: 36px;
  background: var(--travel-green);
  color: white;
  font-size: 10.5px;
}
.native-task-form-feedback { grid-column: 1 / -1; margin: 0; color: var(--travel-green); font-size: 10px; }
.native-task-form-feedback:empty { display: none; }
.native-task-form-feedback.is-error { color: #a64531; }
.agent-only-note { margin: 18px 0 0; color: #8b8c84; font-size: 11px; line-height: 1.6; }

.travel-side { display: grid; align-content: start; gap: 18px; }
.agent-steps { padding: 26px; }
.agent-use-modes { display: grid; gap: 9px; margin: 18px 0; }
.agent-use-mode {
  padding: 14px 15px;
  border: 1px solid #d8ded9;
  border-radius: 12px;
  background: #f5f8f6;
}
.agent-use-mode > span {
  display: block;
  margin-bottom: 5px;
  color: var(--travel-green);
  font: 750 9px/1.3 var(--mono);
  letter-spacing: .11em;
}
.agent-use-mode strong { display: block; color: #24433d; font-size: 12.5px; }
.agent-use-mode p { margin: 4px 0 0; color: #70817c; font-size: 10.5px; line-height: 1.55; }
.agent-use-mode.chat { border-color: #e6c7b9; background: #fff3ee; }
.agent-use-mode.chat > span { color: #b24f36; }
.agent-use-mode.chat strong { color: #6f3427; }
.agent-use-mode.chat p { color: #9a665a; }
.agent-use-mode .extension-install { margin-top: 11px; }
.agent-chat-steps-label {
  margin: 20px 0 0;
  color: #59706a;
  font: 750 9.5px/1.3 var(--mono);
  letter-spacing: .1em;
}
.extension-install {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  background: #c65e43;
  color: #fff9f6;
  font-size: 11.5px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .18s, background .18s;
}
.extension-install:hover { color: #fff; background: #a94832; transform: translateY(-1px); }
.agent-steps > ol { list-style: none; display: grid; gap: 15px; margin: 20px 0; padding: 0; }
.agent-steps li { display: grid; grid-template-columns: 27px 1fr; gap: 11px; align-items: start; }
.agent-steps li > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--travel-green); background: #e7f3ef; font: 700 11px var(--mono); }
.agent-steps li p { margin: 2px 0 0; color: var(--travel-muted); font-size: 12.5px; line-height: 1.65; }
.agent-steps li b { color: var(--travel-ink); }
.agent-steps li code { word-break: break-all; color: #24685a; background: #e7f3ef; }
.agent-steps li a { color: var(--travel-green); font-weight: 700; }
.prompt-suggestion { padding: 14px 15px; border-radius: 11px; background: #173a38; }
.prompt-suggestion span { color: #7cd8c5; font: 700 9.5px var(--mono); letter-spacing: .12em; }
.prompt-suggestion p { margin: 6px 0 0; color: #eef8f4; font-size: 12.5px; line-height: 1.65; }

.native-events { margin: 0; padding: 24px 26px; }
.native-event-log { max-height: 220px; }
.native-event-empty { border-color: #dedbd1; color: #93978f; background: #faf8f2; }
.native-event { display: grid; grid-template-columns: 32px 1fr; gap: 11px; padding: 11px 0; border-bottom-color: #e6e2d8; }
.native-event-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--travel-green); background: #e7f3ef; }
.native-event div { gap: 2px; }
.native-event b { color: var(--travel-ink); font: 650 12.5px/1.5 var(--font); }
.native-event span { color: #8c938f; font-size: 10.5px; }

.native-technical { margin-top: 18px; border-top: 1px solid #d9d5ca; color: var(--travel-muted); }
.native-technical summary { width: fit-content; margin: 0 auto; padding: 18px; cursor: pointer; font-size: 11.5px; }
.native-technical .native-check-grid { max-width: 850px; margin: 0 auto 12px; }
.native-technical .native-check { border-color: #ddd9ce; background: rgba(255, 253, 248, .7); }
.native-technical .native-check b { color: var(--travel-ink); }
.native-technical .native-check div > span { color: #868c88; }
.native-technical .native-tool-contract { display: flex; justify-content: center; flex-wrap: wrap; margin: 0; }
.native-technical .native-tool-contract code { color: var(--travel-green); border-color: #c8ded7; background: #edf7f3; }

@media (max-width: 900px) {
  .travel-layout { grid-template-columns: 1fr; }
  .agent-handoff { grid-template-columns: auto 1fr; }
  .agent-handoff .native-status { grid-column: 2; width: fit-content; }
}

@media (max-width: 650px) {
  .native-shell { width: min(100% - 28px, 1180px); padding-top: 20px; }
  .travel-hero { min-height: 360px; padding: 32px 26px; border-radius: 22px 22px 7px 22px; }
  .travel-date-tile { display: none; }
  .travel-facts { display: grid; }
  .agent-handoff { grid-template-columns: 1fr; padding: 20px; }
  .agent-orb { display: none; }
  .agent-handoff .native-status { grid-column: 1; }
  .travel-checklist,
  .agent-steps,
  .native-events { padding: 21px; }
  .native-manual-toolbar { align-items: flex-start; }
  .native-task-form { grid-template-columns: 1fr; }
  .native-task-form-feedback { grid-column: 1; }
  .native-technical .native-check-grid { grid-template-columns: 1fr; }
}