/* DONE Office — office.css */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:400;
       background:#fafafa; color:#111; -webkit-font-smoothing:antialiased }

/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; height:56px; z-index:200;
       background:rgba(250,250,250,.92); backdrop-filter:blur(12px);
       border-bottom:1px solid #e5e7eb;
       display:flex; align-items:center; padding:0 32px; gap:32px }
.nav-logo { font-size:17px; font-weight:600; letter-spacing:-.01em;
            color:#111; text-decoration:none; flex-shrink:0 }
.nav-office { font-weight:300; color:#6b7280; margin-left:4px }
.nav-cats { display:flex; gap:4px; flex:1 }
.nav-cat { font-size:13px; color:#6b7280; text-decoration:none; padding:4px 10px;
           border-radius:6px; transition:all .15s }
.nav-cat:hover { color:#111; background:#f3f4f6 }
.nav-right { margin-left:auto; flex-shrink:0 }
.nav-by { font-size:12px; color:#9ca3af }
.nav-by a { color:#9ca3af; text-decoration:none }
.nav-by a:hover { color:#6b7280 }

main { padding-top:56px; min-height:calc(100vh - 56px) }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero { background:#0f172a; color:#fff; padding:96px 32px 80px }
.hero-inner { max-width:780px; margin:0 auto }
.hero-tag { font-size:12px; letter-spacing:.12em; text-transform:uppercase;
            color:#94a3b8; margin-bottom:20px }
.hero-h1 { font-size:clamp(36px,6vw,64px); font-weight:600; line-height:1.08;
           letter-spacing:-.02em; margin-bottom:20px }
.hero-sub { font-size:18px; font-weight:300; line-height:1.6; color:#94a3b8;
            margin-bottom:36px }
.hero-cta { display:inline-block; font-size:14px; font-weight:500; color:#e2e8f0;
            text-decoration:none; border-bottom:1px solid #475569;
            padding-bottom:2px; transition:all .2s }
.hero-cta:hover { color:#fff; border-color:#94a3b8 }

/* ── SECTIONS ─────────────────────────────────────────────────────────── */
.section-inner { max-width:1040px; margin:0 auto; padding:64px 32px }
.section-title { font-size:13px; font-weight:500; letter-spacing:.1em;
                 text-transform:uppercase; color:#9ca3af; margin-bottom:28px }

/* ── CATEGORY GRID ────────────────────────────────────────────────────── */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px }
.cat-card { display:flex; flex-direction:column; gap:10px; padding:20px 18px;
            background:#fff; border:1px solid #e5e7eb; border-radius:12px;
            text-decoration:none; color:#111; transition:all .18s; position:relative }
.cat-card:hover { border-color:#6366f1; box-shadow:0 2px 16px rgba(99,102,241,.10);
                  transform:translateY(-1px) }
.cat-card-icon { font-size:24px }
.cat-card-body { display:flex; flex-direction:column; gap:3px }
.cat-card-name-en { font-size:14px; font-weight:500 }
.cat-card-name-ko { font-size:12px; color:#6b7280 }
.cat-card-count { position:absolute; top:12px; right:12px;
                  font-size:11px; color:#6b7280; background:#f3f4f6;
                  padding:2px 7px; border-radius:10px }
.cat-card-soon { position:absolute; top:12px; right:12px;
                 font-size:11px; color:#9ca3af; background:#f9fafb;
                 padding:2px 7px; border-radius:10px }

/* ── HOW IT WORKS ─────────────────────────────────────────────────────── */
.how-section { background:#f8fafc; border-top:1px solid #e5e7eb;
               border-bottom:1px solid #e5e7eb }
.how-steps { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap }
.how-step { flex:1; min-width:160px; padding:20px }
.how-num { font-size:28px; font-weight:600; color:#e5e7eb; margin-bottom:8px }
.how-label { font-size:14px; font-weight:500; margin-bottom:6px }
.how-desc { font-size:13px; color:#6b7280; line-height:1.6 }
.how-arrow { font-size:20px; color:#d1d5db; margin-top:28px; flex-shrink:0 }

/* ── FEATURED / DOC LIST ──────────────────────────────────────────────── */
.doc-list { display:flex; flex-direction:column; gap:1px;
            border:1px solid #e5e7eb; border-radius:12px; overflow:hidden }
.doc-row { display:grid; grid-template-columns:80px 1fr 1fr 80px 24px;
           align-items:center; padding:16px 20px; background:#fff;
           text-decoration:none; color:#111; transition:background .15s;
           border-bottom:1px solid #f3f4f6; gap:12px }
.doc-row:last-child { border-bottom:none }
.doc-row:hover { background:#f8fafc }
.doc-row-cat { font-size:11px; font-weight:500; letter-spacing:.06em;
               text-transform:uppercase; padding:3px 8px; border-radius:5px;
               width:fit-content }
.doc-row-name { font-size:14px; font-weight:500 }
.doc-row-name-en { font-size:12px; color:#9ca3af }
.doc-row-price { font-size:13px; font-weight:500; color:#111; text-align:right }
.doc-row-arrow { color:#d1d5db; font-size:16px; text-align:right }

/* 카테고리 색상 (태그용) */
[data-cat="welfare"]  .doc-row-cat, .doc-row-cat[data-cat="welfare"]  { background:#f0fdf4; color:#166534 }
[data-cat="business"] .doc-row-cat, .doc-row-cat[data-cat="business"] { background:#eff6ff; color:#1e40af }
[data-cat="legal"]    .doc-row-cat, .doc-row-cat[data-cat="legal"]    { background:#faf5ff; color:#6b21a8 }
[data-cat="land"]     .doc-row-cat, .doc-row-cat[data-cat="land"]     { background:#fffbeb; color:#92400e }
[data-cat="permit"]   .doc-row-cat, .doc-row-cat[data-cat="permit"]   { background:#f0f9ff; color:#0369a1 }
[data-cat="card"]     .doc-row-cat, .doc-row-cat[data-cat="card"]     { background:#f8fafc; color:#1e293b }

/* ── PAGE HEADER ──────────────────────────────────────────────────────── */
.page-header { padding:56px 32px 44px; color:#fff }
.page-header[data-cat="welfare"]  { background:linear-gradient(135deg,#0f766e,#14b8a6) }
.page-header[data-cat="business"] { background:linear-gradient(135deg,#1d4ed8,#3b82f6) }
.page-header[data-cat="legal"]    { background:linear-gradient(135deg,#7c3aed,#a78bfa) }
.page-header[data-cat="land"]     { background:linear-gradient(135deg,#92400e,#d97706) }
.page-header[data-cat="permit"]   { background:linear-gradient(135deg,#0369a1,#0ea5e9) }
.page-header[data-cat="card"]     { background:linear-gradient(135deg,#1e293b,#475569) }
.page-header-inner { max-width:780px; margin:0 auto }
.page-header-icon { font-size:36px; margin-bottom:12px }
.page-header-title { font-size:clamp(26px,5vw,40px); font-weight:600;
                     letter-spacing:-.02em; margin-bottom:6px }
.page-header-sub { font-size:14px; color:rgba(255,255,255,.7) }

/* ── CATEGORY PAGE ────────────────────────────────────────────────────── */
.doc-list--large .doc-card { padding:24px 28px; background:#fff;
  border-bottom:1px solid #f3f4f6; text-decoration:none; color:#111;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; transition:background .15s }
.doc-list--large .doc-card:hover { background:#f8fafc }
.doc-card-body { flex:1 }
.doc-card-name { font-size:16px; font-weight:500; margin-bottom:2px }
.doc-card-name-en { font-size:12px; color:#9ca3af; margin-bottom:8px }
.doc-card-desc { font-size:13px; color:#6b7280; line-height:1.6; max-width:600px }
.doc-card-meta { display:flex; flex-direction:column; align-items:flex-end;
                 gap:8px; flex-shrink:0 }
.doc-card-price { font-size:18px; font-weight:600 }
.doc-card-cta { font-size:13px; color:#6b7280 }
.empty-state { padding:80px 0; text-align:center; color:#6b7280 }
.empty-state p { margin-bottom:16px }

/* ── DOCUMENT DETAIL ──────────────────────────────────────────────────── */
.doc-detail-wrap { max-width:960px; margin:0 auto; padding:48px 32px;
                   display:grid; grid-template-columns:1fr 320px; gap:40px }
.doc-detail-desc { font-size:15px; line-height:1.7; color:#374151; margin-bottom:28px }
.doc-questions-box { background:#f8fafc; border:1px solid #e5e7eb;
                     border-radius:10px; padding:20px 24px }
.doc-questions-title { font-size:12px; font-weight:500; letter-spacing:.08em;
                        text-transform:uppercase; color:#9ca3af; margin-bottom:14px }
.doc-questions-list { list-style:none; display:flex; flex-direction:column; gap:10px }
.doc-questions-list li { font-size:13px; color:#374151; padding-left:18px; position:relative }
.doc-questions-list li::before { content:'·'; position:absolute; left:0; color:#9ca3af }
.doc-detail-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px;
                   padding:28px; position:sticky; top:72px }
.doc-detail-price { font-size:32px; font-weight:700; margin-bottom:20px }
.doc-detail-steps { display:flex; flex-direction:column; gap:10px; margin-bottom:24px }
.doc-detail-step { display:flex; align-items:center; gap:10px; font-size:13px; color:#374151 }
.step-dot { color:#10b981; font-size:8px }

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn-primary { display:inline-block; background:#111; color:#fff;
               font-size:14px; font-weight:500; padding:13px 28px;
               border-radius:8px; border:none; cursor:pointer;
               text-decoration:none; transition:all .18s; letter-spacing:-.01em }
.btn-primary:hover { background:#374151 }
.btn-primary:disabled { background:#9ca3af; cursor:not-allowed }
.btn-full { width:100%; text-align:center; display:block }
.btn-next { background:#111; margin-top:16px }
.btn-pay { background:#111; width:100%; text-align:center }
.btn-test-pay { display:block; width:100%; margin-top:8px;
                background:transparent; color:#9ca3af; font-size:12px;
                padding:8px; border:1px solid #e5e7eb; border-radius:6px;
                cursor:pointer; transition:all .18s }
.btn-test-pay:hover { border-color:#9ca3af; color:#6b7280 }
.back-link { font-size:13px; color:#6b7280; text-decoration:none;
             display:inline-block; margin-bottom:20px; transition:color .15s }
.back-link:hover { color:#111 }
.error-msg { margin-top:10px; font-size:12px; color:#dc2626;
             padding:8px 12px; background:#fef2f2; border-radius:6px }

/* ── INTERVIEW ────────────────────────────────────────────────────────── */
.interview-shell { display:flex; flex-direction:column;
                   height:calc(100vh - 56px); overflow:hidden }
.interview-topbar { padding:14px 24px; border-bottom:1px solid #e5e7eb;
                    flex-shrink:0; display:flex; flex-direction:column; gap:8px }
.interview-progress-wrap { height:3px; background:#e5e7eb; border-radius:2px }
.interview-progress-bar { height:100%; background:#111; border-radius:2px;
                           transition:width .3s ease }
.interview-progress-label { font-size:11px; color:#9ca3af }
.interview-body { flex:1; overflow-y:auto; padding:24px }
.chat-messages { max-width:680px; margin:0 auto;
                 display:flex; flex-direction:column; gap:14px }
.chat-msg { display:flex }
.chat-msg--ai  { justify-content:flex-start }
.chat-msg--user{ justify-content:flex-end }
.chat-bubble { max-width:80%; padding:12px 16px; border-radius:14px;
               font-size:14px; line-height:1.6 }
.chat-msg--ai  .chat-bubble { background:#fff; border:1px solid #e5e7eb;
                               border-radius:4px 14px 14px 14px; color:#111 }
.chat-msg--user .chat-bubble { background:#111; color:#fff;
                                border-radius:14px 4px 14px 14px }
.typing { display:flex; align-items:center; gap:5px; padding:16px 20px }
.typing span { width:6px; height:6px; background:#d1d5db; border-radius:50%;
               animation:bounce .9s infinite }
.typing span:nth-child(2) { animation-delay:.15s }
.typing span:nth-child(3) { animation-delay:.3s }
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }
.interview-input-area { border-top:1px solid #e5e7eb; padding:12px 24px;
                         display:flex; gap:8px; flex-shrink:0;
                         max-width:680px; margin:0 auto; width:100%;
                         box-sizing:border-box; padding-bottom:20px }
.chat-textarea { flex:1; resize:none; padding:12px 14px;
                 border:1px solid #d1d5db; border-radius:10px;
                 font-family:inherit; font-size:14px; line-height:1.5;
                 outline:none; transition:border .18s; background:#fff }
.chat-textarea:focus { border-color:#111 }
.chat-send-btn { width:44px; height:44px; background:#111; color:#fff;
                 border:none; border-radius:10px; cursor:pointer;
                 display:flex; align-items:center; justify-content:center;
                 flex-shrink:0; transition:background .18s; align-self:flex-end }
.chat-send-btn:hover { background:#374151 }
.chat-send-btn:disabled { background:#9ca3af; cursor:not-allowed }
.btn-next.btn-full { display:block; width:calc(100% - 52px) }

/* ── PREVIEW ──────────────────────────────────────────────────────────── */
.preview-wrap { padding:48px 32px }
.preview-inner { max-width:720px; margin:0 auto }
.preview-header { display:flex; justify-content:space-between;
                  align-items:flex-start; margin-bottom:36px; gap:16px }
.preview-header-left { flex:1 }
.preview-tag { display:inline-block; font-size:11px; font-weight:500;
               letter-spacing:.08em; text-transform:uppercase;
               padding:3px 10px; border-radius:5px; margin-bottom:10px }
.preview-title { font-size:24px; font-weight:600; letter-spacing:-.02em;
                 margin-bottom:4px }
.preview-title-en { font-size:13px; color:#9ca3af }
.preview-status-badge { background:#f0fdf4; color:#166534; font-size:12px;
                         font-weight:500; padding:6px 12px; border-radius:6px;
                         flex-shrink:0; height:fit-content }
.preview-section { margin-bottom:32px }
.preview-section-title { font-size:12px; font-weight:500; letter-spacing:.08em;
                          text-transform:uppercase; color:#9ca3af; margin-bottom:14px }
.answer-table { border:1px solid #e5e7eb; border-radius:10px; overflow:hidden }
.answer-row { display:grid; grid-template-columns:180px 1fr;
              border-bottom:1px solid #f3f4f6 }
.answer-row:last-child { border-bottom:none }
.answer-label { padding:13px 16px; font-size:12px; color:#6b7280;
                background:#f8fafc; display:flex; align-items:center }
.answer-value { padding:13px 16px; font-size:13px; color:#111;
                word-break:break-word; display:flex; align-items:center }
.payment-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px;
                padding:24px; display:flex; align-items:center;
                justify-content:space-between; gap:20px; margin-bottom:16px }
.payment-card-left { flex:1 }
.payment-amount { font-size:28px; font-weight:700; margin-bottom:4px }
.payment-desc { font-size:13px; color:#6b7280 }
.payment-card-right { display:flex; flex-direction:column; gap:6px;
                       min-width:180px }
.preview-notice { font-size:12px; color:#9ca3af }
.preview-notice a { color:#6b7280; text-decoration:underline }

/* Preview tag 카테고리 색상 */
.preview-tag[data-cat="welfare"]  { background:#f0fdf4; color:#166534 }
.preview-tag[data-cat="business"] { background:#eff6ff; color:#1e40af }
.preview-tag[data-cat="legal"]    { background:#faf5ff; color:#6b21a8 }
.preview-tag[data-cat="land"]     { background:#fffbeb; color:#92400e }
.preview-tag[data-cat="permit"]   { background:#f0f9ff; color:#0369a1 }
.preview-tag[data-cat="card"]     { background:#f8fafc; color:#1e293b }

/* ── DOWNLOAD ─────────────────────────────────────────────────────────── */
.download-wrap { min-height:calc(100vh - 112px);
                 display:flex; align-items:center; justify-content:center;
                 padding:48px 32px }
.download-inner { max-width:480px; width:100%; text-align:center }
.dl-check { width:64px; height:64px; background:#111; color:#fff;
            border-radius:50%; display:flex; align-items:center;
            justify-content:center; font-size:28px; font-weight:600;
            margin:0 auto 24px }
.dl-check--warn { background:#f59e0b }
.dl-title { font-size:26px; font-weight:600; letter-spacing:-.02em;
            margin-bottom:10px }
.dl-desc { font-size:14px; color:#6b7280; margin-bottom:28px; line-height:1.6 }
.btn-dl { width:100%; padding:16px }
.dl-status { font-size:13px; color:#6b7280; margin-top:12px;
             padding:10px; background:#f8fafc; border-radius:6px }
.dl-meta { margin-top:40px; border:1px solid #e5e7eb; border-radius:10px;
           overflow:hidden; text-align:left }
.dl-meta-row { display:flex; justify-content:space-between; padding:12px 20px;
               border-bottom:1px solid #f3f4f6; font-size:13px }
.dl-meta-row:last-child { border-bottom:none }
.dl-meta-row span:first-child { color:#9ca3af }
.status-ok { color:#166534; font-weight:500 }
.status-pending { color:#dc2626 }

/* ── DONE AVATAR ──────────────────────────────────────────────────────── */
.done-avatar {
  background:#111; color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.04em; flex-shrink:0; user-select:none }
.done-avatar--lg   { width:48px; height:48px; font-size:14px }
.done-avatar--chat { width:30px; height:30px; font-size:10px; margin-top:3px }
.done-avatar--footer { width:24px; height:24px; font-size:8px }

/* ── HERO DONE ROW ────────────────────────────────────────────────────── */
.hero-done-row { display:flex; align-items:center; gap:12px; margin-bottom:24px }
.hero-h1-light { font-weight:300; color:#94a3b8 }

/* ── DONE INTRO BOX ───────────────────────────────────────────────────── */
.done-intro-box {
  display:flex; gap:16px; align-items:flex-start;
  background:#f8fafc; border:1px solid #e5e7eb;
  border-radius:12px; padding:20px 24px; margin-bottom:28px }
.done-intro-text p { font-size:14px; color:#111; line-height:1.75 }
.done-intro-notice { font-size:12px !important; color:#9ca3af !important;
                     margin-top:6px }

/* ── CHAT AI MSG WITH AVATAR ──────────────────────────────────────────── */
.chat-msg--ai { align-items:flex-start; gap:10px }

/* typing with label */
.typing { display:flex; align-items:center; gap:6px;
          padding:12px 16px; min-height:44px }
.typing-text { font-size:12px; color:#9ca3af }
.typing-dots { display:flex; gap:4px; align-items:center }
.typing-dots span { width:5px; height:5px; background:#d1d5db;
                    border-radius:50%; animation:bounce .9s infinite }
.typing-dots span:nth-child(2) { animation-delay:.15s }
.typing-dots span:nth-child(3) { animation-delay:.3s }

/* ── DOWNLOAD DONE ROW ────────────────────────────────────────────────── */
.dl-done-row { display:flex; justify-content:center; margin-bottom:20px }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.footer { padding:20px 32px; border-top:1px solid #e5e7eb; background:#fff }
.footer-inner { max-width:1040px; margin:0 auto; display:flex; gap:12px;
                font-size:12px; color:#9ca3af; align-items:center }
.footer-text { display:flex; flex-direction:column; gap:2px }
.footer-brand { font-weight:500; color:#374151; font-size:12px }
.footer-motto { font-size:11px; color:#9ca3af; font-style:italic }
.footer-sep { color:#d1d5db }
.footer-sep--right { margin-left:auto; font-size:11px }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media(max-width:768px) {
  .nav-cats { display:none }
  .hero { padding:72px 20px 60px }
  .section-inner { padding:48px 20px }
  .doc-detail-wrap { grid-template-columns:1fr; gap:24px; padding:32px 20px }
  .doc-detail-card { position:static }
  .doc-row { grid-template-columns:1fr 1fr; }
  .doc-row-name-en, .doc-row-arrow { display:none }
  .how-steps { flex-direction:column }
  .how-arrow { transform:rotate(90deg); margin:0 auto }
  .answer-row { grid-template-columns:1fr }
  .answer-label { background:transparent; border-bottom:1px solid #f3f4f6 }
  .payment-card { flex-direction:column; align-items:stretch }
  .preview-header { flex-direction:column }
  .page-header { padding:40px 20px 32px }
  .interview-input-area { padding:12px 16px 20px }
}