/* =====================================================================
 * 레드트랜스 홈페이지 — 사이트 스타일
 *
 * 프로토타입(260805)의 스타일을 문서 순서 그대로 옮겼다. v0.2~v0.4 는
 * 앞 블록을 덮어쓰는 구조라 **순서를 바꾸면 디자인이 깨진다**.
 * 새 규칙은 파일 맨 아래에 덧붙일 것.
 * ===================================================================== */


/* ===== v0.1 베이스 ===== */
* { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:"Malgun Gothic","맑은 고딕",system-ui,sans-serif; background:#f4f6f9; color:#1f2733; font-size:14px; }
  .btn { background:#0f3d5c; color:#fff; border:none; padding:10px 16px; border-radius:7px; font-size:14px; font-weight:600; cursor:pointer; }
  .btn:hover{ background:#12496e; } .btn.acc{ background:#e8a33d; color:#3a2500; } .btn.acc:hover{ background:#d6922c; }
  .btn.ghost{ background:#eef2f6; color:#0f3d5c; } .btn.sm{ padding:6px 10px; font-size:12px; }
  .muted{ color:#7a8794; font-size:12px; } .pill{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; }
  .pill.wait{ background:#fff3d6; color:#8a5a00; } .pill.doing{ background:#dce8fb; color:#1e5bb8; } .pill.rev{ background:#fde2e2; color:#a62828; }
  .card{ background:#fff; border:1px solid #e2e8ef; border-radius:10px; padding:18px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
  .card h2{ font-size:15px; margin-bottom:12px; color:#0f3d5c; }
  .kv{ display:flex; justify-content:space-between; padding:4px 0; font-size:13px; border-bottom:1px dotted #e2e8ef; } .kv b{ color:#0f3d5c; }
  .assign-box{ background:#f7f9fb; border:1px dashed #cdd7e0; border-radius:8px; padding:12px; margin-top:10px; }
  .flag{ color:#a62828; font-size:12px; } .row{ display:flex; gap:10px; } .row>*{ flex:1; }
  select,input{ width:100%; padding:8px 10px; border:1px solid #cdd7e0; border-radius:7px; font-size:14px; }
  .topbar{ background:#0f3d5c; color:#fff; padding:13px 24px; display:flex; align-items:center; gap:12px; }
  .topbar .logo{ font-size:18px; font-weight:800; letter-spacing:-.5px; } .topbar .logo span{ color:#e8a33d; }
  .topbar nav{ margin-left:24px; display:flex; gap:16px; font-size:14px; flex-wrap:wrap; } .topbar nav a{ color:#cfe0ec; text-decoration:none; cursor:pointer; } .topbar nav a:hover{ color:#fff; } .topbar nav a.active{ color:#fff; font-weight:800; border-bottom:2px solid #fff; }
  .catchips{ display:flex; flex-wrap:wrap; gap:6px; } .catchip{ border:1px solid #cfe0ec; background:#fff; color:#0f3d5c; border-radius:16px; padding:5px 12px; font-size:12.5px; cursor:pointer; } .catchip.active{ background:#0f3d5c; color:#fff; border-color:#0f3d5c; }
  .cattable-wrap{ overflow-x:auto; } .cattable{ width:100%; border-collapse:collapse; font-size:12.5px; } .cattable th,.cattable td{ border-bottom:1px solid #eef2f6; padding:8px 6px; text-align:left; vertical-align:top; } .cattable th{ background:#f4f7fa; color:#0f3d5c; font-size:11.5px; white-space:nowrap; } .cattable td.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:700; } .cattable td.c{ text-align:center; white-space:nowrap; } .cattable tr.catgrp td{ background:#eaf2f9; font-weight:800; color:#0f3d5c; } .cnote{ color:#7a8a99; font-size:11px; margin-top:3px; line-height:1.4; }
  .topbar .admin{ margin-left:auto; font-size:12px; background:#0b3048; color:#9fc0d6; border:1px solid #1b5578; padding:6px 12px; border-radius:6px; cursor:pointer; } .topbar .admin:hover{ color:#fff; }
  .hero{ background:linear-gradient(135deg,#12496e,#0f3d5c); color:#fff; padding:40px 24px 28px; text-align:center; }
  .hero h1{ font-size:26px; font-weight:800; margin-bottom:10px; } .hero p{ opacity:.85; font-size:15px; }
  .svc{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
  .svc span{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:7px 16px; border-radius:20px; font-size:13px; }
  .wrap{ max-width:760px; margin:-18px auto 40px; padding:0 16px; }
  .chatbox{ background:#fff; border:1px solid #e2e8ef; border-radius:14px; box-shadow:0 6px 24px rgba(15,61,92,.10); overflow:hidden; }
  .chat-head{ background:#0f3d5c; color:#fff; padding:12px 16px; display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; }
  .chat-head .dot{ width:9px; height:9px; background:#4ade80; border-radius:50%; }
  .chat-body{ height:440px; overflow-y:auto; padding:16px; background:#f7f9fb; }
  .msg{ display:flex; margin-bottom:12px; } .msg .bubble{ max-width:78%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.55; }
  .msg.bot .bubble{ background:#fff; border:1px solid #e2e8ef; border-bottom-left-radius:4px; }
  .msg.user{ justify-content:flex-end; } .msg.user .bubble{ background:#0f3d5c; color:#fff; border-bottom-right-radius:4px; }
  .msg .av{ width:30px; height:30px; border-radius:50%; background:#e8a33d; color:#3a2500; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; margin-right:8px; flex:0 0 30px; }
  .quote-card{ background:#fff; border:1px solid #e2e8ef; border-radius:10px; padding:12px; margin-top:4px; }
  .quote-card table{ width:100%; border-collapse:collapse; margin:6px 0; }
  .quote-card td{ padding:5px 4px; border-bottom:1px solid #f0f3f6; font-size:13px; } .quote-card td.n{ text-align:right; font-variant-numeric:tabular-nums; }
  .quote-card tfoot td{ font-weight:800; border-top:2px solid #0f3d5c; border-bottom:none; color:#0f3d5c; }
  .infer{ background:#f0f7fc; border:1px solid #cfe0ec; border-radius:10px; padding:10px 12px; margin-top:4px; }
  .infer .li{ padding:2px 0; font-size:13px; } .infer b{ color:#0f3d5c; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px 4px; }
  .chip{ background:#eef4f9; border:1px solid #cfe0ec; color:#0f3d5c; padding:7px 13px; border-radius:20px; font-size:13px; cursor:pointer; } .chip:hover{ background:#0f3d5c; color:#fff; }
  .chat-input{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid #e2e8ef; background:#fff; } .chat-input input{ flex:1; }
  #backend{ display:none; padding:22px; max-width:1200px; margin:0 auto; }
  .beban{ background:#1f2733; color:#cfe0ec; padding:10px 16px; border-radius:8px; font-size:12px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
  .subnav{ display:flex; gap:8px; margin-bottom:16px; }
  .subnav button{ background:#eef2f6; border:1px solid #d7e0e8; padding:9px 16px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:600; color:#345; }
  .subnav button.active{ background:#0f3d5c; color:#fff; border-color:#0f3d5c; }
  .bepanel{ display:none; } .bepanel.active{ display:block; }
  .kanban{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
  .kanban .col{ background:#eef2f6; border-radius:8px; padding:8px; min-height:110px; } .kanban .col h4{ font-size:11px; text-align:center; color:#556; margin-bottom:8px; }
  .kanban .item{ background:#fff; border:1px solid #e2e8ef; border-radius:6px; padding:7px; margin-bottom:6px; font-size:12px; } .kanban .item b{ display:block; }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .tabbar{ display:flex; gap:8px; margin-bottom:0; }
  .tab{ flex:1; background:#eef4f9; border:1px solid #cfe0ec; border-bottom:none; color:#0f3d5c; padding:11px; border-radius:10px 10px 0 0; font-size:14px; font-weight:700; cursor:pointer; }
  .tab.active{ background:#0f3d5c; color:#fff; border-color:#0f3d5c; }
  .frow{ margin-bottom:12px; } .frow label{ display:block; font-size:13px; font-weight:600; color:#0f3d5c; margin-bottom:5px; }
  .frow input,.frow select{ width:100%; padding:9px 10px; border:1px solid #cfd8e0; border-radius:7px; font-size:13px; box-sizing:border-box; }
  .modal-bg{ position:fixed; inset:0; background:rgba(15,30,45,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; }
  .modal{ background:#fff; border-radius:14px; width:100%; max-width:460px; max-height:92vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
  .modal-head{ display:flex; align-items:center; padding:14px 18px; border-bottom:1px solid #eef2f6; font-weight:800; color:#0f3d5c; }
  .modal-x{ margin-left:auto; border:none; background:none; font-size:18px; cursor:pointer; color:#889; }
  .modal-body{ padding:16px 18px; } .modal-foot{ display:flex; gap:8px; padding:14px 18px; border-top:1px solid #eef2f6; }
  .caution{ background:#fff7e6; border:1px solid #ffe1a6; border-radius:10px; padding:10px 12px; font-size:12.5px; line-height:1.65; color:#6b4e00; margin:6px 0 14px; }
  .req{ color:#d33; } .agree{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:#445; margin-top:6px; line-height:1.5; cursor:pointer; }
  .statusbar{ margin-top:14px; background:#fff; border:1px solid #e2e8ef; border-radius:10px; padding:10px 14px; font-size:12px; color:#556; line-height:1.9; }
  .statusbar b{ color:#0f3d5c; }
  .upload{ background:#f0f7fc; border:1px dashed #9fc0d6; border-radius:9px; padding:12px; margin:8px 0; }
  .upload input[type=file]{ font-size:12px; border:none; padding:0; }
  .flowgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .flowcard{ text-align:left; background:#fff; border:1px solid #cfe0ec; border-radius:12px; padding:18px 16px; cursor:pointer; transition:.15s; }
  .flowcard:hover{ border-color:#0f3d5c; box-shadow:0 6px 18px rgba(15,61,92,.13); transform:translateY(-2px); }
  .flowcard .fi{ font-size:26px; } .flowcard .fl{ font-weight:800; color:#0f3d5c; font-size:15px; margin:7px 0 3px; } .flowcard .fd{ font-size:12px; color:#7a8794; }
  .flowcard-sub{ margin-top:14px; text-align:center; }
  .guide{ background:#f0f7fc; border:1px solid #cfe0ec; border-radius:9px; padding:9px 12px; font-size:12.5px; color:#33475a; line-height:1.6; margin-bottom:12px; }
  .crumb{ background:none; border:none; color:#0f3d5c; font-size:12.5px; font-weight:700; cursor:pointer; padding:0; }
  .crumb:hover{ text-decoration:underline; }
  @media(max-width:520px){ .flowgrid{ grid-template-columns:1fr; } }

/* ===== v0.2 리스킨 — 모던 UI ===== */
/* ===== v0.2 리스킨 — 모던 UI (베이스 위에 덮어씀) ===== */
  :root{ --navy:#123a5c; --navy2:#0f3d5c; --blue:#2b6cb0; --gold:#e8a33d; --ink:#1a2332; --sub:#6b7a8d; --line:#e7edf3; --bg:#f5f7fb; --ok:#16a34a; --radius:16px; }
  body{ background:var(--bg); color:var(--ink); font-family:'Pretendard','Malgun Gothic','맑은 고딕',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
  /* 헤더 — 화이트 스티키 */
  .topbar{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(8px); color:var(--navy); padding:0 26px; height:62px; border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(18,58,92,.03); gap:0; }
  .topbar .logo{ font-size:20px; color:var(--navy); } .topbar .logo span{ color:var(--gold); }
  .topbar nav{ margin-left:30px; gap:22px; font-size:14.5px; }
  .topbar nav a{ color:#41566b; font-weight:600; padding:4px 0; position:relative; }
  .topbar nav a:hover{ color:var(--navy); } .topbar nav a.active{ color:var(--navy); border:none; }
  .topbar nav a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-20px; height:3px; background:var(--gold); border-radius:3px 3px 0 0; }
  .topbar .admin{ margin-left:16px; background:#f0f4f8; color:#5b6b7d; border:1px solid var(--line); border-radius:9px; padding:8px 14px; font-weight:600; }
  .topbar .admin:hover{ color:var(--navy); background:#e8eef4; }
  .cartbtn{ margin-left:auto; display:flex; align-items:center; gap:7px; background:var(--navy); color:#fff; border:none; border-radius:11px; padding:9px 15px; font-size:13.5px; font-weight:700; cursor:pointer; box-shadow:0 4px 14px rgba(18,58,92,.22); }
  .cartbtn:hover{ background:#0d2f4b; } .cartbtn .cbadge{ background:var(--gold); color:#3a2500; }
  .cbadge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:12px; font-weight:800; }
  /* 히어로 — 더 크고 부드럽게 */
  .hero{ background:radial-gradient(1200px 400px at 15% -20%,rgba(232,163,61,.22),transparent 60%),linear-gradient(135deg,#164876,#0f3457 70%); padding:64px 24px 92px; position:relative; overflow:hidden; }
  .hero::after{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:22px 22px; opacity:.5; }
  .hero h1{ font-size:34px; letter-spacing:-1px; line-height:1.25; position:relative; }
  .hero p{ font-size:16px; opacity:.9; margin-top:12px; position:relative; }
  .hero .svc{ margin-top:26px; gap:9px; position:relative; }
  .hero .svc span{ background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); padding:8px 18px; border-radius:999px; font-size:13.5px; backdrop-filter:blur(4px); }
  .wrap{ max-width:860px; margin:-56px auto 48px; position:relative; z-index:2; }
  /* 세그먼트 탭 */
  .tabbar{ background:#fff; padding:6px; border-radius:14px; box-shadow:0 6px 24px rgba(18,58,92,.10); border:1px solid var(--line); gap:6px; }
  .tab{ background:transparent; border:none; border-radius:10px; color:#5b6b7d; padding:12px; font-size:14.5px; }
  .tab.active{ background:var(--navy); color:#fff; box-shadow:0 3px 10px rgba(18,58,92,.25); }
  /* 버튼 */
  .btn{ background:var(--navy); border-radius:11px; padding:11px 18px; font-weight:700; transition:.15s; box-shadow:0 2px 6px rgba(18,58,92,.14); }
  .btn:hover{ background:#0d2f4b; transform:translateY(-1px); } .btn:active{ transform:none; }
  .btn.acc{ background:linear-gradient(180deg,#efab3d,#e39a2c); color:#3a2200; box-shadow:0 3px 10px rgba(227,154,44,.32); }
  .btn.acc:hover{ background:linear-gradient(180deg,#e7a53f,#d6902a); }
  .btn.ghost{ background:#eef3f8; color:var(--navy); box-shadow:none; border:1px solid var(--line); }
  .btn.ghost:hover{ background:#e4ecf3; }
  .btn.sm{ padding:7px 12px; border-radius:9px; font-size:12.5px; }
  .btn.big{ padding:15px 22px; font-size:15px; border-radius:13px; width:100%; }
  /* 카드/표 */
  .card{ border-radius:var(--radius); border:1px solid var(--line); box-shadow:0 4px 18px rgba(18,58,92,.05); padding:22px; }
  .card h2{ font-size:16px; color:var(--navy); }
  .chatbox{ border-radius:var(--radius); box-shadow:0 10px 36px rgba(18,58,92,.10); border:1px solid var(--line); }
  .chat-head{ background:linear-gradient(135deg,#164876,#0f3457); font-size:14.5px; padding:14px 18px; }
  .chat-body{ background:#f7f9fc; }
  .msg .bubble{ font-size:14px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
  .msg.bot .bubble{ border-radius:4px 16px 16px 16px; } .msg.user .bubble{ background:var(--navy); border-radius:16px 4px 16px 16px; }
  .msg .av{ background:linear-gradient(180deg,#eeab24,#e0932a); }
  .chip{ background:#eef4fa; border:1px solid #d7e6f2; border-radius:999px; padding:8px 15px; font-size:13px; transition:.12s; } .chip:hover{ background:var(--navy); border-color:var(--navy); }
  .catchip{ border:1px solid #d7e6f2; border-radius:999px; padding:7px 15px; font-size:13px; font-weight:600; transition:.12s; } .catchip.active{ background:var(--navy); border-color:var(--navy); }
  .cattable th{ background:transparent; border-bottom:2px solid var(--line); color:var(--sub); font-weight:700; padding:10px 8px; text-transform:none; }
  .cattable td{ padding:13px 8px; border-bottom:1px solid #f0f4f8; }
  .cattable tbody tr{ transition:background .12s; } .cattable tbody tr:hover{ background:#f7fafd; }
  .cattable td.n{ font-size:14px; color:var(--navy); }
  .guide{ background:linear-gradient(180deg,#f3f9ff,#eef6fe); border:1px solid #d5e8f8; border-radius:12px; padding:12px 15px; }
  .flowcard{ border-radius:14px; border:1px solid var(--line); box-shadow:0 3px 12px rgba(18,58,92,.05); padding:22px 20px; }
  .flowcard:hover{ border-color:var(--blue); box-shadow:0 12px 30px rgba(18,58,92,.14); }
  .flowcard .fl{ font-size:16px; } .flowcard .fi{ font-size:30px; }
  .quote-card{ border-radius:12px; }
  .infer{ border-radius:12px; }
  .modal{ border-radius:20px; max-width:480px; }
  .modal-head{ padding:18px 22px; font-size:16px; } .modal-body{ padding:18px 22px; } .modal-foot{ padding:16px 22px; }
  .frow input,.frow select,select,input{ border-radius:10px; padding:11px 12px; border-color:#d5dee7; }
  .frow input:focus,.frow select:focus,select:focus,input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(43,108,176,.13); }
  .pill{ border-radius:999px; padding:3px 11px; }
  /* ===== 진행 단계(프로세스) & FAQ 랜딩 섹션 ===== */
  .lp{ max-width:860px; margin:36px auto 0; padding:0 16px; }
  .lp h3{ text-align:center; font-size:20px; color:var(--navy); margin-bottom:6px; letter-spacing:-.5px; }
  .lp .lpsub{ text-align:center; color:var(--sub); font-size:14px; margin-bottom:22px; }
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .stepcard{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 16px; text-align:center; box-shadow:0 3px 12px rgba(18,58,92,.05); position:relative; }
  .stepcard .num{ width:34px; height:34px; margin:0 auto 10px; border-radius:999px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; }
  .stepcard .st{ font-weight:800; color:var(--navy); font-size:14.5px; margin-bottom:5px; } .stepcard .sd{ font-size:12.5px; color:var(--sub); line-height:1.55; }
  .faq{ margin-top:14px; } .faq details{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 18px; margin-bottom:10px; box-shadow:0 2px 8px rgba(18,58,92,.04); }
  .faq summary{ cursor:pointer; font-weight:700; color:var(--navy); padding:15px 0; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:'+'; color:var(--gold); font-size:20px; font-weight:800; }
  .faq details[open] summary::after{ content:'−'; }
  .faq details p{ padding:0 0 16px; color:#445; font-size:13.5px; line-height:1.75; }
  .lp-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin:26px 0 6px; }
  .lp-trust .t{ text-align:center; } .lp-trust .tn{ font-size:24px; font-weight:800; color:var(--navy); } .lp-trust .tl{ font-size:12.5px; color:var(--sub); }
  .sitefoot{ margin-top:44px; background:#0f2c46; color:#9fb6c9; padding:26px 16px; text-align:center; font-size:12.5px; line-height:1.9; }
  .sitefoot b{ color:#fff; }
  /* ===== 장바구니 FAB / 드로어 ===== */
  .fab-cart{ position:fixed; right:22px; bottom:22px; z-index:80; background:var(--navy); color:#fff; border:none; border-radius:999px; padding:15px 22px; box-shadow:0 10px 28px rgba(18,58,92,.35); cursor:pointer; font-weight:800; font-size:14px; display:none; align-items:center; gap:9px; }
  .fab-cart.show{ display:flex; } .fab-cart:hover{ background:#0d2f4b; } .fab-cart .cbadge{ background:var(--gold); color:#3a2500; }
  .drawer-bg{ position:fixed; inset:0; background:rgba(18,32,50,.5); z-index:90; opacity:0; pointer-events:none; transition:.2s; }
  .drawer-bg.open{ opacity:1; pointer-events:auto; }
  .drawer{ position:fixed; top:0; right:0; height:100%; width:412px; max-width:94vw; background:var(--bg); z-index:91; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:-10px 0 40px rgba(0,0,0,.2); }
  .drawer.open{ transform:none; }
  .drawer-head{ background:#fff; padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; font-weight:800; color:var(--navy); font-size:16px; }
  .drawer-head .dx{ margin-left:auto; border:none; background:none; font-size:20px; cursor:pointer; color:#889; }
  .drawer-body{ flex:1; overflow-y:auto; padding:16px; }
  .drawer-foot{ background:#fff; border-top:1px solid var(--line); padding:16px 20px; }
  .cart-item{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:14px; margin-bottom:12px; box-shadow:0 2px 8px rgba(18,58,92,.04); }
  .cart-item .ci-top{ display:flex; justify-content:space-between; gap:8px; }
  .cart-item .ci-doc{ font-weight:800; color:var(--navy); font-size:14px; } .cart-item .ci-route{ font-size:11.5px; color:var(--sub); margin-top:2px; }
  .cart-item .ci-rm{ border:none; background:none; color:#c05; cursor:pointer; font-size:12px; flex:0 0 auto; }
  .cart-item .ci-mid{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; }

  /* ── 장바구니 접고 펼치기 (요청 260930 — 20번) ─────────────────────
     담은 서류가 한눈에 안 보였다. 펼친 항목 하나가 412px 라 1280×900
     화면에 0.8 건만 들어왔다. 접힌 줄은 64px 안쪽으로 맞춘다. */
  .cart-bar{ display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; }
  /* ── 서류별 완성본 수령 방식 (요청 260930 — 24번) ───────────────── */
  .dv-opts{ display:flex; gap:6px; flex-wrap:wrap; }
  .dv-opt{ display:inline-flex; align-items:center; gap:5px; cursor:pointer;
    border:1px solid var(--line); border-radius:20px; padding:5px 11px;
    font-size:12px; background:#fff; }
  .dv-opt.on{ border-color:#2f6fb0; background:#eef5fd; color:#14496f; font-weight:700; }
  .dv-opt input{ margin:0; }
  .dv-bulk{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  /* 접힌 줄은 여백을 줄여 한 화면에 더 들어오게 한다 */
  .cart-item:not(.open){ padding:10px 14px; margin-bottom:8px; }
  .cart-item .ci-sum{ display:flex; align-items:center; gap:10px; cursor:pointer; }
  .cart-item .ci-sum-l{ flex:1; min-width:0; }
  .cart-item .ci-name{ font-weight:700; color:var(--navy); font-size:14px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cart-item .ci-meta{ font-size:12px; color:var(--sub); margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cart-item .ci-sum-r{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  .cart-item .ci-amt{ font-weight:700; color:var(--navy); font-size:15px; }
  .cart-item .ci-tog{ color:var(--sub); font-size:13px; transition:transform .15s; }
  .cart-item.open .ci-tog{ transform:rotate(180deg); }
  .cart-item .ci-det{ display:none; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
  .cart-item.open .ci-det{ display:block; }
  .cart-item .ci-det .ci-top{ align-items:center; }

  /* 발송 옵션도 같은 방식으로 접는다 (20번 5항) */
  .cart-opts .opts-h{ display:flex; align-items:center; justify-content:space-between;
    gap:8px; cursor:pointer; }
  .cart-opts .opts-b{ display:none; margin-top:9px; }
  .cart-opts.open .opts-b{ display:block; }
  .cart-opts.open .opts-h .ci-tog{ transform:rotate(180deg); }

  .cart-item .ci-price{ font-weight:800; color:var(--navy); font-size:15px; }
  .stepper{ display:inline-flex; align-items:center; border:1px solid #d5dee7; border-radius:9px; overflow:hidden; }
  .stepper button{ border:none; background:#f2f6fa; width:30px; height:30px; font-size:16px; cursor:pointer; color:var(--navy); font-weight:800; }
  .stepper button:hover{ background:#e6eef5; } .stepper span{ min-width:34px; text-align:center; font-weight:700; font-size:13px; }
  .ci-apo{ display:flex; gap:7px; align-items:flex-start; margin-top:10px; font-size:12px; color:#334; background:#f2f8ff; border:1px solid #d5e8f8; border-radius:9px; padding:8px 10px; cursor:pointer; }
  .ci-caution{ margin-top:9px; font-size:11.5px; color:#7a6a3a; }
  .ci-caution summary{ cursor:pointer; color:#a97b1c; font-weight:700; }
  .ci-caution p{ margin-top:5px; background:#fff8ea; border:1px solid #f0dfae; border-radius:8px; padding:8px 10px; line-height:1.6; color:#6b4e00; }
  .sumline{ display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:#445; } .sumline.tot{ font-size:16px; font-weight:800; color:var(--navy); border-top:2px solid var(--navy); margin-top:7px; padding-top:9px; }
  .cart-empty{ text-align:center; color:var(--sub); padding:50px 20px; }
  /* 체크아웃 요약 */
  .co-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
  .co-sum{ background:#f5f9fd; border:1px solid #dbe9f6; border-radius:12px; padding:14px; }
  .co-sum .cs-item{ display:flex; justify-content:space-between; font-size:12.5px; padding:5px 0; border-bottom:1px dashed #d9e6f2; }
  .co-sum .cs-item:last-child{ border-bottom:none; }
  .toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(16px); background:var(--navy); color:#fff; padding:13px 22px; border-radius:12px; font-size:13.5px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:.25s; z-index:130; display:flex; gap:9px; align-items:center; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  @media(max-width:640px){ .steps{ grid-template-columns:1fr 1fr; } .hero h1{ font-size:26px; } .topbar nav{ display:none; } }

/* ===== v0.3 풀 마케팅 홈페이지 + v0.4 아이콘/타이포 ===== */
/* ===== v0.3 — 풀 마케팅 홈페이지 ===== */
  body{ font-family:'Pretendard Variable','Pretendard','Malgun Gothic','맑은 고딕',system-ui,-apple-system,sans-serif; letter-spacing:-.2px; }
  #site{ background:#fff; }
  .section{ padding:78px 20px; }
  .section.alt{ background:#f4f7fb; }
  .section.slim{ padding:26px 20px; }
  .container{ max-width:1160px; margin:0 auto; }
  .container-narrow{ max-width:940px; }
  .sec-head{ text-align:center; margin-bottom:42px; }
  .sec-tag{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.6px; color:var(--blue); background:#eaf2fc; padding:6px 15px; border-radius:999px; margin-bottom:15px; }
  .sec-title{ font-size:33px; font-weight:800; letter-spacing:-1.4px; color:#122a44; line-height:1.32; }
  .sec-sub{ color:#5d6b7d; font-size:16px; margin-top:13px; line-height:1.6; }
  /* HERO */
  .mkt-hero{ background:radial-gradient(1100px 520px at 82% -12%,rgba(232,163,61,.22),transparent 55%),linear-gradient(158deg,#0e3152 0%,#123f66 52%,#15588a 100%); color:#fff; position:relative; overflow:hidden; }
  .mkt-hero::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px); background-size:24px 24px; opacity:.55; }
  .hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:86px 20px 92px; position:relative; z-index:1; }
  .hero-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.26); padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; backdrop-filter:blur(4px); }
  .hero-copy h1{ font-size:47px; font-weight:800; line-height:1.2; letter-spacing:-1.8px; margin:22px 0 18px; }
  .hero-copy .lead{ font-size:17px; line-height:1.75; opacity:.92; max-width:530px; } .hero-copy .lead b{ color:#ffd88a; }
  .hero-cta{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
  .big-cta{ padding:16px 26px; font-size:16px; border-radius:13px; }
  .btn.gold{ background:linear-gradient(180deg,#f2b24a,#e59a2c); color:#3a2200; box-shadow:0 8px 24px rgba(229,154,44,.42); }
  .btn.gold:hover{ background:linear-gradient(180deg,#efab3d,#d9902a); }
  .btn.wire{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.42); box-shadow:none; }
  .btn.wire:hover{ background:rgba(255,255,255,.2); }
  .hero-mini{ margin-top:24px; font-size:13px; opacity:.8; display:flex; gap:18px; flex-wrap:wrap; }
  .hero-mini span::before{ content:'✓ '; color:#7fe0a8; font-weight:800; }
  .hero-visual{ position:relative; }
  .hv-card{ background:#fff; color:#233; border-radius:18px; box-shadow:0 34px 74px rgba(0,0,0,.34); padding:24px; transform:rotate(-2.2deg); position:relative; }
  .hv-top{ display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #eef2f6; padding-bottom:12px; margin-bottom:16px; }
  .hv-badge{ font-size:11px; font-weight:800; color:#0f3457; background:#eaf2fc; padding:4px 10px; border-radius:6px; letter-spacing:.5px; }
  .hv-line{ height:9px; border-radius:5px; background:#e9eef4; margin:10px 0; } .hv-line.s{ width:58%; } .hv-line.m{ width:84%; }
  .hv-stamp{ position:absolute; right:-16px; bottom:-16px; width:94px; height:94px; border-radius:50%; background:radial-gradient(circle at 50% 38%,#e64b4b,#b32222); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; font-weight:800; line-height:1.25; box-shadow:0 14px 28px rgba(179,34,34,.45); transform:rotate(9deg); border:3px dashed rgba(255,255,255,.65); }
  .hv-float{ position:absolute; z-index:2; background:#fff; border-radius:13px; box-shadow:0 18px 42px rgba(0,0,0,.24); padding:11px 15px; font-size:12.5px; font-weight:700; color:#0f3457; }
  .hv-float.a{ top:-20px; left:-22px; } .hv-float.b{ bottom:26px; left:-42px; color:#127a3e; }
  /* STATS */
  .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
  .stat-row .sv{ font-size:36px; font-weight:800; color:var(--navy); letter-spacing:-1.4px; }
  .stat-row .sl{ font-size:13.5px; color:#5d6b7d; margin-top:5px; }
  /* PROBLEM */
  .prob-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .prob-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 20px; box-shadow:0 4px 16px rgba(18,58,92,.05); text-align:center; }
  .prob-card .pq{ font-size:30px; }
  .prob-card p{ margin-top:13px; font-size:14.5px; line-height:1.6; color:#3a4a5c; font-weight:600; }
  .prob-solve{ text-align:center; font-size:25px; font-weight:800; color:var(--navy); margin-top:38px; letter-spacing:-1px; } .prob-solve b{ color:var(--gold); }
  /* BENEFITS */
  .bgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .bcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 22px; box-shadow:0 6px 22px rgba(18,58,92,.06); }
  .bcard .bnum{ font-size:14px; font-weight:800; color:var(--gold); letter-spacing:1.5px; }
  .bcard .bi{ font-size:31px; margin:8px 0 13px; }
  .bcard .bt{ font-size:17.5px; font-weight:800; color:#122a44; margin-bottom:9px; letter-spacing:-.5px; }
  .bcard .bd{ font-size:13.5px; line-height:1.72; color:#5d6b7d; }
  /* SERVICES */
  .svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .svc-card{ text-align:left; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 22px; cursor:pointer; transition:.16s; box-shadow:0 4px 16px rgba(18,58,92,.05); }
  .svc-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(18,58,92,.16); border-color:#cfe0ef; }
  .svc-ic{ width:56px; height:56px; border-radius:15px; background:linear-gradient(158deg,#173f63,#1d5686); color:#fff; display:flex; align-items:center; justify-content:center; font-size:27px; margin-bottom:17px; }
  .svc-card .svt{ font-size:18px; font-weight:800; color:#122a44; letter-spacing:-.5px; }
  .svc-card .svd{ font-size:13.5px; color:#5d6b7d; margin:9px 0 15px; line-height:1.65; min-height:44px; }
  .svc-card .svgo{ font-size:13.5px; font-weight:800; color:var(--blue); }
  /* CTA BAND */
  .cta-band{ background:radial-gradient(700px 300px at 50% -40%,rgba(232,163,61,.2),transparent),linear-gradient(120deg,#0e3152,#15588a); color:#fff; padding:60px 20px; text-align:center; }
  .cta-band h2{ font-size:29px; font-weight:800; letter-spacing:-1.1px; } .cta-band p{ opacity:.86; margin-top:11px; font-size:15px; }
  .cta-band .cta-btns{ display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
  /* 랜딩 프로세스/FAQ 컨테이너 폭 재정의 */
  .lp{ max-width:1160px; }
  .steps{ gap:16px; } .stepcard{ padding:24px 18px; } .stepcard .st{ font-size:15.5px; } .stepcard .sd{ font-size:13px; }
  .faq details{ padding:0 20px; } .faq summary{ padding:17px 0; font-size:14.5px; }
  .sitefoot{ margin-top:0; background:#0d2740; padding:30px 16px; }
  @media(max-width:900px){ .hero-inner{ grid-template-columns:1fr; gap:24px; } .hero-visual{ display:none; }
    .bgrid,.prob-grid,.svc-grid,.stat-row{ grid-template-columns:1fr 1fr; } .hero-copy h1{ font-size:34px; } .sec-title{ font-size:26px; } .section{ padding:52px 18px; } }

  /* ===== v0.4 — 아이콘/타이포 고급화 ===== */
  /* 형광펜 마커 강조 */
  .mk{ background:linear-gradient(transparent 62%, rgba(232,163,61,.42) 0); padding:0 3px; border-radius:2px; }
  .mkw{ background:linear-gradient(transparent 62%, rgba(255,255,255,.28) 0); padding:0 3px; }
  .ac{ color:var(--gold); }
  /* SVG 라인 아이콘 공통 */
  svg.ico{ display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  /* 섹션 번호 뱃지 */
  .sec-num{ width:46px; height:46px; border-radius:50%; background:#eaf2fc; color:var(--blue); font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:inset 0 0 0 1px rgba(29,107,168,.14); }
  .alt .sec-num{ background:#fff; }
  /* PROBLEM: 아이콘 원형 배경 + 정렬 */
  .prob-card{ text-align:left; display:flex; gap:14px; align-items:flex-start; padding:24px 22px; }
  .prob-ic{ flex:none; width:44px; height:44px; border-radius:12px; background:#fdf1dd; color:#c9871f; display:flex; align-items:center; justify-content:center; }
  .prob-ic svg.ico{ width:23px; height:23px; }
  .prob-card p{ margin-top:2px; font-size:14px; line-height:1.6; color:#3a4a5c; font-weight:600; }
  /* BENEFITS: 아이콘 타일 + 번호 우상단 */
  .bcard{ position:relative; }
  .bcard .bnum{ position:absolute; top:20px; right:22px; font-size:26px; font-weight:800; color:#eef2f7; letter-spacing:-1px; }
  .bcard .bi{ width:52px; height:52px; border-radius:14px; background:linear-gradient(158deg,#173f63,#1d5686); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 0 15px; }
  .bcard .bi svg.ico{ width:26px; height:26px; stroke-width:1.6; }
  /* SERVICES: 아이콘 SVG */
  .svc-ic svg.ico{ width:27px; height:27px; stroke-width:1.6; }
  /* HERO 뱃지/플로트 아이콘 정렬 */
  .hero-badge svg.ico{ width:16px; height:16px; }
  .hv-float{ display:flex; align-items:center; gap:7px; } .hv-float svg.ico{ width:15px; height:15px; }
  .hero-badge, .hero-cta .btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; }
  .hero-cta .btn svg.ico{ width:18px; height:18px; }
  /* 플로팅 상담 버튼 (카톡/전화) */
  .floatcol{ position:fixed; right:22px; bottom:92px; z-index:82; display:flex; flex-direction:column; gap:12px; }
  .fbtn{ width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10px; font-weight:800; box-shadow:0 10px 26px rgba(0,0,0,.24); transition:transform .15s; }
  .fbtn:hover{ transform:translateY(-3px); }
  .fbtn.kko{ background:#FEE500; color:#3a1d1d; } .fbtn.tel{ background:linear-gradient(160deg,#1d6ba8,#12507f); color:#fff; }
  .fbtn svg.ico{ width:22px; height:22px; }
  @media(max-width:900px){ .prob-card{ flex-direction:column; } .bcard .bnum{ font-size:22px; } .floatcol{ right:14px; bottom:82px; } .fbtn{ width:50px; height:50px; } }

/* ===== 견적 도구(국기 그리드 · 목적 · 서류 제안) ===== */
.intake-lead{ text-align:center; font-size:19px; font-weight:900; color:#123a5e; margin:0; }
    .intake-lead span{ display:block; font-size:13.5px; font-weight:600; color:#5b6b7d; margin-top:5px; }
    .flag-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0 14px; }
    .flag-card{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:16px 10px; cursor:pointer; transition:.15s; display:flex; flex-direction:column; align-items:center; gap:5px; box-shadow:0 4px 16px rgba(18,58,92,.05); }
    .flag-card:hover{ border-color:#1d5686; transform:translateY(-3px); box-shadow:0 12px 26px rgba(18,58,92,.13); }
    .flag-card .fg{ font-size:34px; line-height:1; }
    .flag-card .fn{ font-size:14.5px; font-weight:800; color:#123a5e; }
    .flag-card .ft{ font-size:10.5px; font-weight:800; border-radius:20px; padding:1px 9px; }
    .flag-card .ft.apo{ background:#e6f0fb; color:#1d5686; }
    .flag-card .ft.emb{ background:#fbeee0; color:#a5651b; }
    .flag-card.more{ border-style:dashed; }
    .flag-card.more .fg{ font-size:26px; color:#8795a4; }
    .flag-card.more .ft{ background:#eef1f4; color:#8795a4; }
    .intake-alt{ text-align:center; margin-top:4px; }
    .intake-alt .alt-label{ font-size:12.5px; color:#8795a4; margin-right:4px; }
    .altchip{ background:#eef3f8; border:1px solid var(--line); border-radius:20px; padding:6px 13px; font-size:12.5px; font-weight:700; color:#123a5e; cursor:pointer; margin:0 4px 6px 0; }
    .altchip:hover{ background:#e4ecf3; }
    .intake-help{ text-align:center; margin-top:14px; color:#5b6b7d; font-size:14px; }
    .intake-help .btn{ margin-left:6px; }
    /* 2단계 목적 선택 */
    .pp-lead{ text-align:center; font-size:18px; font-weight:900; color:#123a5e; margin:0 0 16px; }
    .pp-lead b{ color:#1d5686; }
    .pp-lead span{ display:block; font-size:13px; font-weight:600; color:#5b6b7d; margin-top:5px; }
    .pp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .pp-card{ text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; cursor:pointer; transition:.15s; }
    .pp-card:hover{ border-color:#1d5686; transform:translateY(-2px); box-shadow:0 10px 24px rgba(18,58,92,.12); }
    .pp-card b{ display:block; font-size:15.5px; color:#123a5e; font-weight:800; }
    .pp-card span{ font-size:12.5px; color:#5b6b7d; }
    /* 3단계 서류 제안 */
    .doc-head{ font-size:13px; color:#5b6b7d; margin-bottom:4px; }
    .doc-head b{ color:#123a5e; }
    .docset{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
    .docpill{ background:#e8f3ec; color:#2f6b45; font-weight:800; font-size:13.5px; border-radius:8px; padding:7px 13px; }
    .docpill.opt{ background:#fff; border:1px dashed #c7cdd6; color:#5b6b7d; font-weight:600; }
    .doc-guide{ background:#f0f5fb; border:1px solid #d6e4f5; border-radius:9px; padding:10px 14px; font-size:12.8px; color:#33506e; margin:10px 0; }
    .doc-row{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 14px; margin:7px 0; }
    .doc-row .dr-n{ font-weight:800; color:#123a5e; font-size:14px; flex:1; }
    .doc-row .dr-n .dr-opt{ font-size:10.5px; font-weight:800; color:#8795a4; background:#eef1f5; border-radius:20px; padding:1px 7px; margin-left:4px; }
    .doc-row .dr-p{ font-size:12.5px; color:#5b6b7d; white-space:nowrap; }
    @media(max-width:640px){ .doc-row{ flex-wrap:wrap; } .doc-row .dr-p{ flex-basis:100%; } }
    @media(max-width:640px){ .flag-grid{ grid-template-columns:repeat(2,1fr); } .pp-grid{ grid-template-columns:1fr; } }

/* ===== 양식 다운로드 모달 · 장바구니 옵션 ===== */
.fm-bg{ position:fixed; inset:0; background:rgba(15,24,38,.5); z-index:90; display:none; align-items:center; justify-content:center; padding:20px; }
  .fm-bg.open{ display:flex; }
  .fm{ background:#fff; border-radius:16px; max-width:520px; width:100%; padding:24px 26px; box-shadow:0 24px 60px rgba(0,0,0,.3); }
  .fm h3{ margin:0 0 4px; font-size:19px; font-weight:900; color:#123a5e; }
  .fm .fm-sub{ font-size:13px; color:#5c6879; margin-bottom:16px; }
  .fm-row{ display:flex; align-items:center; gap:12px; border:1px solid #e2e7ee; border-radius:11px; padding:13px 15px; margin:9px 0; }
  .fm-row .fr-n{ flex:1; font-weight:800; color:#1c2431; font-size:14.5px; }
  .fm-row .fr-d{ font-size:12px; color:#8795a4; margin-top:2px; font-weight:500; }
  .fm-x{ display:block; margin:16px auto 0; background:#eef3f8; border:none; border-radius:10px; padding:11px 22px; font-weight:800; color:#123a5e; cursor:pointer; }
  .cart-opts{ background:#f6f9fc; border:1px solid #e2e7ee; border-radius:11px; padding:10px 12px; margin-bottom:12px; }
  .cart-opts .copt{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:#3a4658; padding:6px 4px; cursor:pointer; line-height:1.45; }
  .cart-opts .copt input{ margin-top:3px; width:16px; height:16px; accent-color:#e8a33d; flex:none; }
  .cart-opts .copt b{ color:#1c2431; }
  .cart-opts .opt-fee{ color:#123a5e; }

/* ===== 오류 페이지 (404 · 500) ===== */
.errpage { max-width:520px; margin:14vh auto; padding:0 24px; text-align:center;
  font-family:'Pretendard Variable','Pretendard','Malgun Gothic',system-ui,sans-serif; }
.errpage .errcode { font-size:64px; font-weight:800; color:#123a5c; letter-spacing:-3px; }
.errpage h1 { font-size:21px; color:#122a44; margin:10px 0 8px; }
.errpage p { color:#5d6b7d; font-size:14.5px; line-height:1.7; margin-bottom:22px; }
.errpage .btn { display:inline-block; text-decoration:none; }

/* ===== PHP 이식분 — 인라인 onclick 을 없애며 추가된 규칙 ===== */
/* 동적 마크업에서 링크처럼 보여야 하는 버튼 */
.linklike { background:none; border:none; padding:0; color:#1d5686; font-weight:700;
  text-decoration:underline; cursor:pointer; font-size:inherit; font-family:inherit; }
.toastlink { background:none; border:none; padding:0; color:#ffd88a; font-weight:700;
  text-decoration:underline; cursor:pointer; font-size:inherit; font-family:inherit; }

/* <a> 로 만든 버튼도 <button> 과 같은 모양이어야 한다 */
a.btn { display:inline-block; text-align:center; text-decoration:none; }
a.btn.big { display:block; }
a.fbtn { text-decoration:none; }
.topbar .logo { display:inline-block; }
.topbar nav a { cursor:pointer; }

/* 의뢰 확인 페이지 */
.orderwrap { max-width:820px; margin:36px auto 60px; padding:0 18px; }
.orderwrap h1 { font-size:24px; color:#123a5c; letter-spacing:-.8px; margin-bottom:6px; }
.orderwrap .sub { color:#5d6b7d; font-size:14px; margin-bottom:22px; }
.order-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

/* 개인정보처리방침 */
.policy { max-width:820px; margin:36px auto 60px; padding:0 18px; color:#33414f; line-height:1.85; font-size:14.5px; }
.policy h1 { font-size:24px; color:#123a5c; margin-bottom:18px; letter-spacing:-.8px; }
.policy h2 { font-size:16.5px; color:#123a5c; margin:26px 0 8px; }
.policy ul { margin:6px 0 6px 18px; }

/* ===== TMS 260811 — 장바구니 항목 편집(언어·장수·공증방법) ===== */
.ci-field { display:flex; align-items:center; gap:8px; margin-top:9px; }
.ci-field label { flex:0 0 68px; font-size:12px; font-weight:700; color:#5b6b7d; }
.ci-field select {
  flex:1; padding:7px 9px; border:1px solid #d5dee7; border-radius:8px;
  font-size:12.5px; font-family:inherit; background:#fff; color:#1a2332;
}
.ci-field select:focus { outline:none; border-color:#2b6cb0; box-shadow:0 0 0 3px rgba(43,108,176,.12); }
.ci-note { margin-top:9px; font-size:12px; color:#5b6b7d; background:#f4f7fb;
  border:1px solid #e7edf3; border-radius:8px; padding:7px 10px; }

/* 줄별 금액 분해 — 인증(확정) / 번역(예상) 을 구분해 보여준다 */
.ci-breakdown { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:11px; padding-top:10px; border-top:1px dashed #e2e8ef; font-size:12.5px; color:#445; }
.ci-breakdown b { color:#123a5c; }
.ci-breakdown small { color:#8795a4; font-size:11px; }
.ci-breakdown .ci-line-total { margin-left:auto; font-size:15px; font-weight:800; color:#123a5c; }

/* 전체 서류 — 목적별 묶음 + 검색 */
.doc-search { width:100%; padding:11px 13px; border:1px solid #d5dee7; border-radius:10px;
  font-size:14px; font-family:inherit; margin-bottom:14px; }
.doc-search:focus { outline:none; border-color:#2b6cb0; box-shadow:0 0 0 3px rgba(43,108,176,.12); }
/* ===== 서류 분류 가독성 (개선의견 09-③ · 시안 260813) =====
   분류가 있다는 것 자체가 안 보인다는 지적이라, 머리글을 키우고
   테두리로 묶어 경계를 분명히 한다. 긴 목록에서도 지금 어느 분류를
   보고 있는지 알 수 있게 머리글을 붙여 둔다(sticky). */
.cat-group { margin:0 0 20px; border:1px solid #d8e2ea; border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:0 1px 3px rgba(18,58,92,.05); }
.cat-h { display:flex; align-items:center; gap:10px; background:#f2f7fb;
  border-bottom:2px solid var(--navy,#123a5c); padding:13px 16px; font-weight:800;
  color:#0f3d5c; font-size:15.5px; letter-spacing:-.2px; position:sticky; top:0; z-index:3; }
.cat-h .cat-ico { font-size:19px; line-height:1; flex:none; }
.cat-h .cat-cnt { margin-left:auto; font-size:11.5px; font-weight:800; color:#41586c;
  background:#dde8f1; border-radius:999px; padding:3px 11px; flex:none; }
.cat-group .doc-row { border-bottom:1px solid #eef2f6; border-radius:0; }
.cat-group .doc-row:last-child { border-bottom:none; }

/* 목적별로 볼 때 어느 기관에서 떼는 서류인지 알려주는 배지 */
.org-badge { display:inline-block; font-size:10.5px; font-weight:700; color:#4a5c6b;
  background:#eef3f8; border:1px solid #dbe4ec; border-radius:4px; padding:1px 6px;
  margin-left:6px; vertical-align:1px; white-space:nowrap; }

/* 목적 / 발급기관 전환 */
.doc-view-tabs { display:flex; gap:6px; margin:12px 0 10px; flex-wrap:wrap; align-items:center; }
.doc-view-tabs .dvt-lb { font-size:12px; color:#6b7a88; font-weight:700; margin-right:2px; }
.doc-view-tabs button { border:1.5px solid var(--line,#e2e8ef); background:#fff; color:#5b6b7a;
  border-radius:999px; padding:7px 15px; font-size:13px; font-weight:700; cursor:pointer;
  min-height:38px; font-family:inherit; }
.doc-view-tabs button:hover { border-color:var(--navy,#123a5c); color:var(--navy,#123a5c); }
.doc-view-tabs button.on { background:var(--navy,#123a5c); border-color:var(--navy,#123a5c); color:#fff; }

@media(max-width:600px){
  .cat-h { font-size:14px; padding:11px 12px; }
  .cat-h .cat-ico { font-size:17px; }
}

/* 접수번호 — 반드시 저장해야 하는 값이라 눈에 띄게 (§2.5) */
.serial-box { background:linear-gradient(180deg,#f3f9ff,#eaf3fd); border:1.5px solid #cfe0ef;
  border-radius:14px; padding:18px; text-align:center; }
.serial-box .sb-label { font-size:12px; font-weight:700; color:#5b6b7d; letter-spacing:.5px; }
.serial-box .sb-serial { font-size:32px; font-weight:800; color:#123a5c; letter-spacing:.5px;
  margin:6px 0 10px; font-variant-numeric:tabular-nums; word-break:break-all; }
.serial-box .sb-warn { font-size:12.5px; color:#8a5a00; background:#fff7e6;
  border:1px solid #ffe1a6; border-radius:9px; padding:9px 11px; line-height:1.6; }

/* 진행 조회 — 지금 무엇을 해야 하는지 알려주는 줄 (시안 260813) */
.mp-act { margin-top:8px; padding:10px 12px; border-radius:10px; font-size:12.5px;
  background:#f0f7ff; border:1px solid #cfe2f6; color:#234; line-height:1.5; }
.mp-act.mail { background:#fff7ec; border-color:#f0dcae; color:#7a5a12; }
.mp-act.pay { background:#eefaf1; border-color:#bfe6cc; color:#155e2e; }
.mp-act.ok { background:#eef7f0; border-color:#cfe6d6; color:#1e7a3d; }

/* ===== 서류 제출 패널 (시안 260813) =====
   접수완료 화면 안과 /order/<토큰>/submit 이 같은 마크업을 쓴다.
   아래 뒤쪽 미디어쿼리에 모바일 치수만 들어와 있고 이 기본 블록이
   빠져 있어, 데스크톱에서 패널 전체가 무스타일로 나왔다. */
.submit-box { background:#f0f7ff; border:1px solid #cfe2f6; border-radius:12px;
  padding:12px 14px; margin-top:12px; }
.submit-box.mail { background:#fff7ec; border-color:#f0dcae; }
.submit-box .sb-h { font-weight:800; color:#0f3d5c; font-size:13.5px; }
.submit-box .sb-list { margin:6px 0 4px 18px; font-size:12.5px; color:#334; }
.submit-box .sb-warn { font-size:12px; color:#a62828; background:#fdeeee;
  border:1px solid #f5cccc; border-radius:8px; padding:7px 9px; margin-top:6px; line-height:1.5; }
.submit-box.mail .sb-warn { color:#7a5a12; background:#fff3d6; border-color:#f0dcae; }

/* ── 접수 후 화면 (요청 260930 — 21번) ───────────────────────────────
   제출 화면 세로 길이가 1,939px 였다. 접수번호·복사 버튼·서류 칸·안내가
   한 줄로 길게 쌓여, 무엇이 남았는지 보려면 계속 스크롤해야 했다. */

/* 접수번호와 복사 버튼을 한 줄에 — 버튼을 찾아 헤매지 않게 */
.serial-box .sb-row { display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap; }

/* 서류 칸 2열 — 좁으면 저절로 1열로 돌아간다 */
.sb-docs { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:8px; margin:8px 0; }

/* 무엇이 끝났고 무엇이 남았는지 한눈에 */
.sb-state { font-size:11px; font-weight:700; border-radius:20px; padding:2px 8px;
  flex:0 0 auto; letter-spacing:0; }
.sb-state.done { background:#e6f6ec; color:#1d6236; }
.sb-state.wait { background:#eef1f5; color:#6a7788; }
.sb-state.mail { background:#fff3d6; color:#7a5a12; }

/* 긴 주의 문구는 접어 둔다 — 읽어야 할 때 펼치면 된다 */
.submit-box details.sb-fold { border:1px solid #cfe2f6; border-radius:9px;
  background:#fff; margin:8px 0; }
.submit-box details.sb-fold > summary { cursor:pointer; padding:9px 12px;
  font-size:12.5px; font-weight:700; color:#0f3d5c; list-style:none; }
.submit-box details.sb-fold > summary::-webkit-details-marker { display:none; }
.submit-box details.sb-fold > summary::after { content:'▾'; float:right; color:#8795a4; }
.submit-box details.sb-fold[open] > summary::after { content:'▴'; }
.submit-box details.sb-fold > div { padding:0 12px 11px; }

/* 우측 요약 — 화면을 내려도 따라온다 */
.co-stick { position:sticky; top:78px; }
.co-mail { background:#fff7ec; border:1px solid #f0dcae; border-radius:10px;
  padding:11px 12px; margin-top:12px; }
.co-mail .cm-addr { font-size:13px; color:#3d3320; margin:5px 0 8px; }

@media(max-width:980px){ .co-stick{ position:static; } }

/* ── 진행 조회의 배송지 (요청 260930 — 18번) ─────────────────────── */
.mp-ship { background:#fff7ec; border:1px solid #f0dcae; border-radius:10px;
  padding:11px 12px; margin-top:10px; }
.mp-ship-h { display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13px; color:#7a5a12; }
.mp-ship-v { font-size:13px; color:#3d3320; margin-top:7px; line-height:1.6; }
.mp-ship-v.empty { color:#a0522d; }
.mp-ship-f { margin-top:10px; padding-top:10px; border-top:1px dashed #e5cf9d; }

/* ── 이름·상호 표기 (요청 260930 — 23번) ─────────────────────────── */
.sb-noun { margin-top:10px; }
.sb-noun > label { display:block; font-size:12.5px; font-weight:700; color:#0f3d5c; margin-bottom:4px; }
.sb-noun input, .sb-noun textarea { width:100%; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; font:inherit; font-size:13px; }
.sb-noun textarea { resize:vertical; min-height:52px; }

.sb-doc { border:1px solid #e2e8ef; border-radius:10px; padding:10px 12px;
  margin-top:8px; background:#fff; }
.sb-doc.extra { background:#f7fafd; }
.sb-doc-h { display:flex; align-items:center; gap:8px; font-size:13.5px;
  color:#1a2a38; flex-wrap:wrap; }
.sb-tag { font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px;
  background:#e6edf3; color:#42586b; }

.sb-modes { display:flex; gap:10px 18px; margin:8px 0 6px; flex-wrap:wrap; }
.sb-radio { font-size:12.5px; display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; white-space:nowrap; padding:6px 10px; border:1px solid #dbe4ec;
  border-radius:8px; background:#fff; }
.sb-radio:has(input:checked) { background:#eef4fa; border-color:#9cc0e0;
  font-weight:700; color:#0f3d5c; }

.sb-up { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; }
.sb-up input[type=file] { font-size:12px; }
.sb-hint { font-size:11px; color:#a62828; }

.sb-mail { font-size:12.5px; color:#7a5a12; background:#fff7ec; border:1px solid #f0dcae;
  border-radius:8px; padding:7px 9px; margin-top:2px; }
.sb-donef { font-size:12.5px; color:#1e7a3d; margin-top:4px; }
.sb-donef a { color:#a62828; margin-left:6px; text-decoration:underline; }

/* 고유명사 입력칸 — width·box-sizing 이 없으면 기본 크기 그대로 쪼그라든다 */
.sb-nouns { width:100%; min-height:56px; margin-top:6px; border:1px solid #cdd7e0;
  border-radius:8px; padding:8px 10px; font-size:12.5px; font-family:inherit;
  resize:vertical; box-sizing:border-box; }

.sb-idwarn { font-size:12px; color:#a62828; background:#fdeeee; border:1px solid #f5cccc;
  border-radius:8px; padding:7px 9px; margin-bottom:6px; line-height:1.5; }

/* ===== SEO 가이드 페이지 ===== */
.guide-page { max-width:860px; margin:34px auto 60px; padding:0 18px; color:#2c3846; line-height:1.75; font-size:15px; }
.guide-page h1 { font-size:28px; line-height:1.35; color:#123a5c; letter-spacing:-1px; margin-bottom:18px; }
.guide-page h2 { font-size:20px; color:#123a5c; margin:34px 0 12px; letter-spacing:-.5px;
  padding-bottom:8px; border-bottom:2px solid #e7edf3; }
.guide-page h3 { font-size:17px; color:#123a5c; margin:0 0 6px; }
.crumbs { font-size:12.5px; color:#8795a4; margin-bottom:14px; }
.crumbs a { color:#5b6b7d; text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }

/* 답변 우선 요약 — 검색 스니펫·AI 인용 대상이라 눈에 띄게 */
.g-answer { background:linear-gradient(180deg,#f3f9ff,#eaf3fd); border:1.5px solid #cfe0ef;
  border-radius:14px; padding:18px 20px; font-size:15.5px; line-height:1.8; color:#22364a; margin-bottom:22px; }
.g-answer b { color:#123a5c; }

.g-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0 8px; }
.g-fact { background:#fff; border:1px solid #e7edf3; border-radius:12px; padding:14px;
  box-shadow:0 2px 10px rgba(18,58,92,.04); }
.g-fact span { display:block; font-size:12px; color:#8795a4; font-weight:700; }
.g-fact b { display:block; font-size:17px; color:#123a5c; margin-top:4px; letter-spacing:-.4px; }
.g-fact small { display:block; font-size:11.5px; color:#8795a4; margin-top:2px; }

.g-tablewrap { overflow-x:auto; }
.g-table { width:100%; border-collapse:collapse; font-size:14px; margin:10px 0; }
.g-table th, .g-table td { border-bottom:1px solid #eef2f6; padding:11px 10px; text-align:left; }
.g-table thead th { background:#f6f9fc; color:#123a5c; font-size:12.5px; white-space:nowrap; }
.g-table tbody th { color:#5b6b7d; font-weight:600; width:55%; }
.g-table td { text-align:right; font-variant-numeric:tabular-nums; }
.g-table thead th:first-child, .g-table tbody td:first-child { text-align:left; }
.g-table a { color:#1d5686; text-decoration:none; font-weight:600; }
.g-table a:hover { text-decoration:underline; }
.g-table tr.g-total th, .g-table tr.g-total td { border-top:2px solid #123a5c; font-size:16px; color:#123a5c; }

.g-steps { counter-reset:s; list-style:none; padding:0; margin:12px 0; }
.g-steps li { counter-increment:s; position:relative; padding:12px 0 12px 44px; border-bottom:1px solid #f0f4f8; }
.g-steps li::before { content:counter(s); position:absolute; left:0; top:12px; width:28px; height:28px;
  border-radius:50%; background:#123a5c; color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; }
.g-steps li b { display:block; color:#123a5c; font-size:15px; }
.g-steps li span { font-size:14px; color:#5b6b7d; }

.g-list { margin:10px 0 10px 20px; }
.g-list li { margin:5px 0; }
.g-note { background:#fff8e8; border:1px solid #f2dfae; border-radius:10px; padding:11px 14px;
  font-size:14px; color:#6b4e00; }
.g-caution { background:#fff7e6; border:1px solid #ffe1a6; border-radius:10px; padding:12px 15px;
  font-size:14px; color:#6b4e00; line-height:1.7; }
.g-small { font-size:12.5px; color:#8795a4; line-height:1.65; margin-top:8px; }

.g-faq details { background:#fff; border:1px solid #e7edf3; border-radius:12px; padding:0 18px;
  margin-bottom:10px; box-shadow:0 2px 8px rgba(18,58,92,.04); }
.g-faq summary { cursor:pointer; font-weight:700; color:#123a5c; padding:15px 0; font-size:15px;
  list-style:none; }
.g-faq summary::-webkit-details-marker { display:none; }
.g-faq details p { padding:0 0 16px; color:#445; font-size:14.5px; line-height:1.8; margin:0; }

.g-links { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.g-links a { background:#eef4fa; border:1px solid #d7e6f2; border-radius:999px; padding:8px 15px;
  font-size:13.5px; color:#123a5c; text-decoration:none; font-weight:600; }
.g-links a:hover { background:#123a5c; color:#fff; border-color:#123a5c; }

.g-cta { background:linear-gradient(120deg,#0e3152,#15588a); color:#fff; border-radius:16px;
  padding:26px 24px; margin:32px 0; text-align:center; }
.g-cta h3 { color:#fff; }
.g-cta p { opacity:.88; font-size:14.5px; margin-bottom:16px; }
.g-updated { font-size:12px; color:#8795a4; margin-top:26px; padding-top:14px; border-top:1px solid #eef2f6; }

@media (max-width:640px) {
  .guide-page h1 { font-size:22px; }
  .guide-page h2 { font-size:18px; }
  .g-answer { font-size:14.5px; padding:15px 16px; }
}

/* ===== 2차 — 서류 제출 · 결제 ===== */
.flashbox { padding:12px 16px; border-radius:10px; margin-bottom:14px; font-size:14px; font-weight:600; }
.flashbox.ok { background:#e6f6ec; color:#16794a; border:1px solid #bde5cb; }
.flashbox.err { background:#fdecea; color:#c0392b; border:1px solid #f5c6c0; }
.filelist { list-style:none; margin:8px 0; padding:0; }
.filelist li { padding:7px 10px; background:#f6f9fc; border:1px solid #e7edf3; border-radius:8px;
  margin-bottom:6px; font-size:13.5px; display:flex; gap:10px; align-items:center; }
.filelist a { color:#1d5686; font-weight:600; text-decoration:none; }
.filelist a:hover { text-decoration:underline; }
.orderwrap .card .frow textarea { width:100%; padding:10px 12px; border:1px solid #d5dee7;
  border-radius:9px; font-size:14px; font-family:inherit; line-height:1.6; }

/* ===== 로고 (2026-08-12 실제 로고 적용) ===== */
/* 원본은 1363×383(가로:세로 ≈ 3.56:1). 높이를 기준으로 잡고 폭은 자동. */
.topbar .logo { display:flex; align-items:center; height:100%; text-decoration:none; }
/* 표시 높이를 키웠다. 원본(383px)을 바로 줄이면 뭉개져서, 미리 잘 줄여 둔
   logo-2x.png(120px) 를 쓴다 — 축소율이 3배대라 훨씬 선명하다. */
.topbar .logo img { height:36px; width:auto; display:block; }
@media (max-width:640px) { .topbar .logo img { height:30px; } }


/* =====================================================================
 * 260813 디자인 패치 (협업자 수정본 style 블록 #4·#5·#6)
 *
 * 브랜드가 네이비/골드에서 **레드(#df343d)** 로 바뀐 전면 리스킨이다.
 * 프로토타입은 이 블록을 기존 CSS 위에 덮어쓰는 방식으로 쓰므로 여기서도
 * 베이스 뒤, 우리 고유 추가 앞에 놓는다.
 *
 * 이미지 경로만 우리 구조에 맞게 고쳤다 (assets/·이미지/ → /images/).
 * 히어로·프로세스 사진은 원본 PNG 3.3MB 대신 WebP 경량본을 쓴다.
 * ===================================================================== */


/* ===== v1.0 — 1차 개발 유지형 디자인·동선 패치 (260813) =====
     기존 데이터/가격/장바구니 로직은 유지하고 최종 스타일만 재정의한다. */
  :root{
    --brand:#df343d;
    --brand-dark:#bd2530;
    --brand-soft:#fff1f2;
    --navy:#283446;
    --navy2:#202a39;
    --blue:#df343d;
    --gold:#df343d;
    --ink:#1e2733;
    --sub:#667085;
    --line:#e5e7eb;
    --bg:#f7f7f5;
    --ok:#16835b;
    --radius:14px;
  }
  html{ scroll-behavior:smooth; }
  body{ background:#fff; color:var(--ink); font-size:15px; letter-spacing:-.25px; }
  button,a,input,select,textarea{ font:inherit; }
  button,a{ -webkit-tap-highlight-color:transparent; }
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid rgba(223,52,61,.24); outline-offset:2px;
  }

  /* 헤더: 브랜드와 업무 메뉴만 또렷하게 */
  .topbar{
    height:70px; padding:0 32px; gap:8px; background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line); box-shadow:0 4px 18px rgba(18,24,33,.05);
  }
  .topbar .logo{ color:var(--brand); font-size:21px; font-weight:900; text-decoration:none; letter-spacing:-.8px; }
  .topbar .logo span{ color:var(--brand); }
  .topbar nav{ margin-left:28px; gap:2px; align-items:center; }
  .topbar nav a{
    color:#475467; padding:10px 11px; border-radius:9px; font-size:14px; font-weight:700;
    text-decoration:none; white-space:nowrap;
  }
  .topbar nav a:hover,.topbar nav a.active{ color:var(--brand-dark); background:var(--brand-soft); }
  .topbar nav a.active::after{ display:none; }
  .cartbtn{
    background:var(--brand); border-radius:10px; padding:10px 15px; box-shadow:none; min-height:42px;
  }
  .cartbtn:hover{ background:var(--brand-dark); }
  .cartbtn .cbadge,.fab-cart .cbadge{ background:#fff; color:var(--brand-dark); }
  .topbar .admin{ background:#fff; border-color:var(--line); color:#7a8492; }
  .menu-toggle{
    display:none; width:42px; height:42px; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
    font-size:20px; cursor:pointer;
  }

  /* 히어로: 장식 대신 업무 선택을 첫 화면에 배치 */
  .mkt-hero{ background:linear-gradient(180deg,#fff 0%,#fff 72%,#faf9f7 100%); color:var(--ink); border-bottom:1px solid var(--line); }
  .mkt-hero::before{ display:none; }
  .hero-inner{ display:block; max-width:1160px; padding:68px 24px 58px; }
  .hero-copy{ max-width:900px; margin:0 auto; text-align:center; }
  .hero-badge{
    background:var(--brand-soft); border:1px solid #ffd5d8; color:var(--brand-dark);
    padding:8px 14px; backdrop-filter:none;
  }
  .hero-copy h1{ color:#182230; font-size:48px; line-height:1.18; letter-spacing:-2px; margin:20px 0 16px; }
  .hero-copy .lead{ color:#566174; opacity:1; max-width:720px; margin:0 auto; font-size:17px; line-height:1.72; }
  .hero-copy .lead b{ color:var(--brand-dark); }
  .mkw,.mk{ background:none; padding:0; color:var(--brand); }
  .hero-cta{ justify-content:center; margin-top:28px; }
  .btn{ background:var(--navy); border-radius:10px; box-shadow:none; min-height:42px; }
  .btn:hover{ background:var(--navy2); transform:none; }
  .btn.acc,.btn.gold{ background:var(--brand); color:#fff; box-shadow:none; }
  .btn.acc:hover,.btn.gold:hover{ background:var(--brand-dark); }
  .btn.wire,.hero-cta .btn.wire,.cta-band .btn.wire{
    background:#fff; color:#344054; border:1px solid #d0d5dd; box-shadow:none;
  }
  .btn.wire:hover{ background:#f8f8f7; }
  .hero-mini{ justify-content:center; color:#5d6878; opacity:1; margin-top:20px; }
  .hero-mini span::before{ color:var(--ok); }
  .hero-visual{ display:none; }
  .quick-start{
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:900px; margin:30px auto 0;
  }
  .quick-card{
    min-height:92px; padding:17px 18px; background:#fff; border:1px solid var(--line); border-radius:14px;
    text-align:left; cursor:pointer; display:flex; align-items:center; gap:13px; color:var(--ink);
    box-shadow:0 8px 28px rgba(24,34,48,.06); transition:border-color .16s,transform .16s;
  }
  .quick-card:hover{ border-color:#f0a5aa; transform:translateY(-2px); }
  .quick-card .qnum{
    width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:flex; align-items:center;
    justify-content:center; background:var(--brand-soft); color:var(--brand-dark); font-weight:900;
  }
  .quick-card b{ display:block; font-size:16px; color:#253041; }
  .quick-card span:last-child{ display:block; color:var(--sub); font-size:12.5px; margin-top:3px; }

  /* 신뢰지표와 본문: 과한 높이·중앙정렬 축소 */
  .mkt-hero + .section.slim{ background:#fff; border-bottom:1px solid var(--line); padding:24px 20px; }
  .stat-row{ gap:12px; }
  .stat-row .sv{ color:#253041; font-size:29px; }
  .stat-row .sl{ color:#778090; font-size:12.5px; }
  .section{ padding:64px 20px; }
  .section.alt{ background:var(--bg); }
  .sec-head{ margin-bottom:30px; }
  .sec-tag{ color:var(--brand-dark); background:var(--brand-soft); letter-spacing:.35px; margin-bottom:12px; }
  .sec-title{ color:#1f2a38; font-size:31px; }
  .sec-sub{ color:var(--sub); font-size:15px; }
  #toolSection{ scroll-margin-top:82px; padding-top:56px; }
  #toolSection .wrap{ margin:0 auto 24px !important; }
  #pane-intake,#pane-purpose,#pane-docs,#pane-work{ scroll-margin-top:84px; }

  /* 국가·업무 선택 */
  .flag-grid{ gap:10px; margin-top:10px; }
  .flag-card{
    min-height:112px; border:1px solid var(--line); border-radius:12px; box-shadow:none; background:#fff;
  }
  .flag-card:hover{ border-color:#ef9ca2; box-shadow:0 8px 20px rgba(31,39,51,.07); transform:translateY(-2px); }
  .flag-card .fg svg{ box-shadow:0 1px 3px rgba(0,0,0,.16); }
  .flag-card .fn{ color:#253041; }
  .flag-card .ft.apo{ background:var(--brand-soft); color:var(--brand-dark); }
  .flag-card .ft.emb{ background:#f1f3f5; color:#596579; }
  .altchip{ background:#fff; border-color:#d9dde4; color:#414d5f; min-height:40px; }
  .altchip:hover{ background:var(--brand-soft); border-color:#f2bdc1; color:var(--brand-dark); }
  .intake-help{ margin-top:16px; }
  .pp-card,.doc-row,.flowcard{ box-shadow:none; border-color:var(--line); }
  .pp-card:hover,.flowcard:hover{ border-color:#ef9ca2; box-shadow:0 8px 20px rgba(31,39,51,.07); transform:none; }

  /* 카탈로그: 고객용 검색·선택 화면 */
  .chatbox{ border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px rgba(31,39,51,.06); }
  .chat-head{ background:#303b4b; padding:15px 18px; }
  .tabbar{ border-radius:12px; box-shadow:none; border-color:var(--line); }
  .tab.active{ background:#303b4b; box-shadow:none; }
  .guide{ background:#fff7f7; border-color:#f4d4d6; color:#5a3d42; }
  .catalog-toolbar{
    display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    margin:12px 0; padding:12px; background:#f8f8f7; border:1px solid var(--line); border-radius:11px;
  }
  .service-search,.doc-search{
    min-height:44px; border:1px solid #cfd4dc; border-radius:10px; padding:10px 13px; background:#fff;
  }
  .service-search{ flex:1; min-width:240px; }
  .service-empty{ display:none; padding:24px; text-align:center; color:var(--sub); }
  .cattable th{ color:#667085; border-bottom:1px solid #d8dde5; }
  .cattable td{ padding:14px 10px; }
  .cattable td.n{ color:#253041; }
  .cattable tbody tr:hover{ background:#fff8f8; }
  .submit-box{ box-shadow:none; }
  .docpill.opt{ border-style:solid; }

  /* 프로세스·FAQ·마감 CTA */
  .stepcard{ box-shadow:none; border-color:var(--line); }
  .stepcard .num{ background:var(--brand-soft); color:var(--brand-dark); }
  .stepcard .st{ color:#253041; }
  .faq details{ box-shadow:none; border-color:var(--line); }
  .faq summary{ color:#253041; }
  .faq summary::after{ color:var(--brand); }
  .cta-band{ background:#273142; padding:52px 20px; }
  .sitefoot{ background:#1e2633; }

  /* 플로팅 버튼·장바구니 */
  .floatcol{ right:18px; bottom:22px; gap:8px; }
  .fbtn{ width:50px; height:50px; box-shadow:0 8px 20px rgba(23,30,40,.16); }
  .fbtn.kko{ background:#fff; color:var(--brand-dark); border:1px solid #f0c3c6; }
  .fbtn.tel{ background:#303b4b; }
  .fab-cart{ background:var(--brand); box-shadow:0 8px 22px rgba(189,37,48,.24); }
  .drawer-head{ color:#253041; }
  .cart-item{ box-shadow:none; }

  /* 아포스티유 목록은 검색 우선, 표는 조밀하게 */
  .modal-bg.apostille-open .modal{ max-width:780px; max-height:88vh; }
  .modal-bg.apostille-open .modal-body{ overflow:auto; }
  .modal-bg.apostille-open .apo-table td{ padding:8px 9px; font-size:12px; }
  .apo-note{ background:#fff7ec; border:1px solid #f0dcae; border-radius:8px; padding:8px 10px; font-size:12.5px; color:#7a5a12; }
  .apo-table td{ font-size:12px; line-height:1.6; vertical-align:top; }
  .apo-table .apo-reg{ font-weight:800; color:#0f3d5c; white-space:nowrap; background:#f5f9fd; }
  .apo-res{ margin-top:8px; padding:9px 11px; border-radius:8px; font-size:12.5px; line-height:1.5; background:#f5f9fd; border:1px solid #dbe9f6; }
  .apo-res.ok{ background:#eef7f0; border-color:#cfe6d6; color:#155e2e; }
  .apo-res.soon{ background:#fff7ec; border-color:#f0dcae; color:#7a5a12; }
  .apo-res.no{ background:#fdeeee; border-color:#f5cccc; color:#a62828; }

  /* 진행 조회 — 시안 마이페이지 카드 */
  .mp-h{ font-weight:800; color:#0f3d5c; font-size:15px; }
  .mp-empty{ text-align:center; color:var(--sub); padding:40px 0; }
  .mp-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:14px; box-shadow:0 3px 12px rgba(18,58,92,.05); }
  .mp-card-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; }
  .mp-card-h .mp-amt{ margin-left:auto; font-weight:800; color:var(--navy); font-size:15px; }
  .mp-amt small{ color:#8795a4; font-weight:600; font-size:11px; }
  .mp-stepper{ display:flex; align-items:flex-start; justify-content:space-between; margin:14px 0 6px; gap:4px; }
  .mp-step{ display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; font-size:10.5px; color:#9aa7b4; text-align:center; }
  .mp-step .mp-dot{ width:28px; height:28px; border-radius:50%; background:#e6edf3; color:#9aa7b4; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; border:2px solid #e6edf3; }
  .mp-step.done .mp-dot{ background:#1e7a3d; border-color:#1e7a3d; color:#fff; }
  .mp-step.done{ color:#1e7a3d; }
  .mp-step.cur .mp-dot{ background:#fff; border-color:#1d6ba8; color:#1d6ba8; box-shadow:0 0 0 3px #dbeafe; }
  .mp-step.cur{ color:#1d6ba8; font-weight:800; }
  .mp-docs{ margin:12px 0 4px; }
  .mp-doc{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px dotted #e2e8ef; font-size:13px; }
  .mp-dl{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding:11px 12px; border:1px solid #dbe4ec; border-radius:10px; background:#f7fafd; }
  .mp-dl.locked{ color:#6c7785; font-size:13px; line-height:1.55; background:#f4f5f7; border-style:dashed; }
  .pill.wait{ background:#fff3d6; color:#8a5a00; }
  .pill.doing{ background:#dce8fb; color:#1e5bb8; }
  .pill.ok{ background:#dcf3e2; color:#1e7a3d; }

  @media(max-width:1050px){
    .topbar{ padding:0 18px; }
    .topbar nav{ margin-left:14px; }
    .topbar nav a{ padding:9px 7px; font-size:13px; }
    .topbar .admin{ display:none; }
  }
  @media(max-width:900px){
    .topbar{ height:64px; padding:0 14px; }
    .menu-toggle{ display:flex; margin-left:auto; }
    .topbar nav{ display:none; }
    .topbar.mobile-open nav{
      display:flex; position:absolute; top:64px; left:10px; right:10px; margin:0; padding:10px;
      flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--line);
      border-radius:12px; box-shadow:0 18px 42px rgba(23,30,40,.16);
    }
    .topbar.mobile-open nav a{ display:block; padding:12px 13px; }
    .cartbtn{ margin-left:6px; padding:9px 11px; }
    .hero-inner{ padding:52px 20px 46px; }
    .hero-copy h1{ font-size:39px; letter-spacing:-1.5px; }
    .quick-start{ grid-template-columns:1fr; max-width:580px; }
    .quick-card{ min-height:78px; }
    .section{ padding:50px 17px; }
    .floatcol{ display:none; }
  }
  @media(max-width:640px){
    body{ font-size:16px; }
    .topbar .logo{ font-size:19px; }
    .cartbtn{ font-size:12px; }
    .hero-inner{ padding:40px 16px 38px; }
    .hero-copy h1{ font-size:33px; line-height:1.22; }
    .hero-copy .lead{ font-size:15.5px; }
    .hero-cta{ flex-direction:column; }
    .hero-cta .btn{ width:100%; min-height:50px; }
    .hero-mini{ gap:8px 14px; font-size:12px; }
    .stat-row{ grid-template-columns:1fr 1fr; gap:20px 8px; }
    .stat-row .sv{ font-size:24px; }
    .sec-title{ font-size:26px; }
    .flag-grid{ grid-template-columns:1fr 1fr; }
    .flag-card{ min-height:106px; }
    .intake-alt .alt-label{ display:block; margin:0 0 8px; }
    .altchip{ width:100%; margin-right:0; }
    .steps{ grid-template-columns:1fr; }
    .catalog-toolbar{ align-items:stretch; }
    .catalog-toolbar label,.catalog-toolbar select,.service-search{ width:100%; }
    .cattable:not(.apo-table),.cattable:not(.apo-table) tbody{ display:block; width:100%; }
    .cattable:not(.apo-table) thead{ display:none; }
    .cattable:not(.apo-table) tr:not(.catsep){
      display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; margin-bottom:10px;
      padding:14px; background:#fff; border:1px solid var(--line); border-radius:12px;
    }
    .cattable:not(.apo-table) tr:not(.catsep) td{ display:block; border:0; padding:0; text-align:left; white-space:normal; }
    .cattable:not(.apo-table) tr:not(.catsep) td:first-child{ grid-column:1; font-size:15px; }
    .cattable:not(.apo-table) tr:not(.catsep) td.n{ grid-column:1; }
    .cattable:not(.apo-table) tr:not(.catsep) td.c:last-child{ grid-column:2; grid-row:1 / span 3; align-self:center; }
    .cattable:not(.apo-table) tr:not(.catsep) td.c:last-child .btn{ min-height:44px; }
    .cattable:not(.apo-table) tr.catsep{ display:block; margin:18px 0 8px; }
    .drawer{ width:100%; max-width:100vw; }
  }
  /* ===== v1.1 — 풀페이지 인트로·스크롤 스냅·목적 카드 고도화 (260813) ===== */
  html{ scroll-snap-type:y proximity; scroll-padding-top:70px; }
  .mkt-hero,#toolSection,#processSection,#faqSection,.cta-band{
    scroll-snap-align:start; scroll-snap-stop:normal;
  }
  .mkt-hero{
    min-height:calc(100svh - 70px); display:flex; align-items:center; position:relative;
  }
  .hero-inner{
    width:100%; min-height:calc(100svh - 70px); display:flex; align-items:center;
    padding-top:42px; padding-bottom:58px;
  }
  .hero-copy{ width:100%; }
  .hero-copy h1{ margin-top:16px; }
  .hero-cta{ margin-top:22px; }
  .quick-start{ margin-top:22px; }
  .hero-trust{
    max-width:900px; margin:20px auto 0; padding:15px 18px; background:#faf9f7;
    border:1px solid var(--line); border-radius:14px;
  }
  .hero-trust .sv{ font-size:22px; }
  .hero-trust .sl{ font-size:11.5px; }
  .scroll-cue{
    position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:2;
    display:flex; align-items:center; gap:8px; border:0; background:transparent; color:#667085;
    font-size:12px; font-weight:800; letter-spacing:.2px; cursor:pointer; padding:8px 12px;
  }
  .scroll-cue b{
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    border:1px solid #d7dbe1; border-radius:999px; background:#fff; color:var(--brand);
  }
  #processSection,#faqSection{
    min-height:calc(100svh - 70px); display:flex; align-items:center;
  }
  #processSection>.container,#faqSection>.container-narrow{ width:100%; }

  #pane-purpose .pp-grid{ grid-template-columns:repeat(3,1fr); gap:14px; }
  #pane-purpose .pp-card{
    --purpose:#df343d; --purpose-soft:#fff1f2;
    min-height:164px; position:relative; overflow:hidden; display:grid;
    grid-template-columns:54px minmax(0,1fr) 22px; gap:14px; align-items:start;
    padding:22px 20px; border:1px solid var(--line); border-radius:18px;
    background:linear-gradient(145deg,#fff 0%,#fff 72%,var(--purpose-soft) 145%);
    box-shadow:0 9px 28px rgba(30,39,51,.055); text-align:left;
  }
  #pane-purpose .pp-card::before{
    content:''; position:absolute; left:0; top:0; right:0; height:4px;
    background:linear-gradient(90deg,var(--purpose),transparent 82%);
  }
  #pane-purpose .pp-card:hover{
    border-color:color-mix(in srgb,var(--purpose) 45%,#d8dce2); transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(30,39,51,.10);
  }
  #pane-purpose .pp-icon{
    width:54px; height:54px; border-radius:16px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; background:var(--purpose-soft); color:var(--purpose);
    border:1px solid color-mix(in srgb,var(--purpose) 18%,#fff); line-height:1;
  }
  #pane-purpose .pp-icon strong{ font-size:21px; font-weight:900; letter-spacing:-1px; }
  #pane-purpose .pp-icon small{ margin-top:4px; font-size:8px; font-weight:900; letter-spacing:1px; opacity:.72; }
  #pane-purpose .pp-copy{ min-width:0; }
  #pane-purpose .pp-card .pp-kicker{
    display:block; color:var(--purpose); font-size:10px; font-weight:900; letter-spacing:.8px;
    margin:1px 0 6px;
  }
  #pane-purpose .pp-card .pp-title{ display:block; color:#202a39; font-size:17px; line-height:1.3; font-weight:900; }
  #pane-purpose .pp-card .pp-desc{ display:block; color:#667085; font-size:12px; line-height:1.48; margin-top:7px; }
  #pane-purpose .pp-card .pp-sample{
    display:block; color:#8a94a3; font-size:10.5px; line-height:1.4; margin-top:8px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #pane-purpose .pp-arrow{
    width:22px; height:22px; border-radius:999px; display:flex; align-items:center;
    justify-content:center; background:#f2f4f6; color:#596579; font-size:13px; margin-top:16px;
  }
  #pane-purpose .pp-card:hover .pp-arrow{ background:var(--purpose); color:#fff; }
  #pane-purpose .pp-card.tone-study{ --purpose:#356db5; --purpose-soft:#eef5ff; }
  #pane-purpose .pp-card.tone-family{ --purpose:#b64b74; --purpose-soft:#fff0f6; }
  #pane-purpose .pp-card.tone-business{ --purpose:#46566d; --purpose-soft:#f0f3f7; }
  #pane-purpose .pp-card.tone-export{ --purpose:#238164; --purpose-soft:#ebf8f3; }
  #pane-purpose .pp-card.tone-personal{ --purpose:#a56a1b; --purpose-soft:#fff6e8; }

  @media(max-width:1080px){
    #pane-purpose .pp-grid{ grid-template-columns:1fr 1fr; }
    .hero-inner{ padding-top:48px; }
  }
  @media(max-width:900px){
    html{ scroll-padding-top:64px; }
    .mkt-hero{ min-height:calc(100svh - 64px); }
    .hero-inner{ min-height:calc(100svh - 64px); padding-top:38px; padding-bottom:52px; }
    #processSection,#faqSection{ min-height:auto; }
  }
  @media(max-width:640px){
    html{ scroll-snap-type:y proximity; }
    .hero-inner{ min-height:calc(100svh - 64px); align-items:flex-start; padding-top:30px; }
    .hero-trust{ grid-template-columns:1fr 1fr; padding:14px 10px; }
    .scroll-cue{ display:none; }
    #pane-purpose .pp-grid{ grid-template-columns:1fr; }
    #pane-purpose .pp-card{ min-height:144px; grid-template-columns:52px minmax(0,1fr) 22px; padding:19px 17px; }
  }
  /* ===== v1.2 — 가독성·히어로 사진·프로세스/Q&A 통합 (260813) ===== */
  body{ font-size:17px; }
  .topbar nav a{ font-size:15px; }
  .cartbtn{ font-size:14px; }
  #site .muted{ font-size:13.5px; line-height:1.55; }
  #site .btn{ font-size:15px; }
  #site .btn.sm{ font-size:13.5px; }
  /* 히어로 배경: 외부 이미지 의존 제거 — 인라인 SVG(서류·인장 모티프)로 자체 포함 (260813 v2) */
  #site .mkt-hero{
    --hero-art:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Crect width='1600' height='900' fill='%23f4efe6'/%3E%3Ccircle cx='1265' cy='438' r='340' fill='%23ece3d3'/%3E%3Cg transform='rotate(-9 1150 470)'%3E%3Crect x='1000' y='265' width='330' height='420' rx='14' fill='%2324466b'/%3E%3Crect x='1032' y='300' width='120' height='12' rx='6' fill='%23486d95'/%3E%3C/g%3E%3Cg transform='rotate(4 1250 470)'%3E%3Crect x='1095' y='232' width='322' height='432' rx='12' fill='%23ffffff' stroke='%23ddd6c8' stroke-width='3'/%3E%3Crect x='1128' y='282' width='176' height='17' rx='8' fill='%23c8c1b2'/%3E%3Crect x='1128' y='325' width='252' height='10' rx='5' fill='%23e4ded1'/%3E%3Crect x='1128' y='352' width='252' height='10' rx='5' fill='%23e4ded1'/%3E%3Crect x='1128' y='379' width='196' height='10' rx='5' fill='%23e4ded1'/%3E%3Crect x='1128' y='430' width='252' height='10' rx='5' fill='%23e4ded1'/%3E%3Crect x='1128' y='457' width='222' height='10' rx='5' fill='%23e4ded1'/%3E%3Crect x='1128' y='560' width='140' height='11' rx='5' fill='%23d4cdbd'/%3E%3Ccircle cx='1352' cy='592' r='38' fill='%23DF343D' opacity='.93'/%3E%3Ccircle cx='1352' cy='592' r='27' fill='none' stroke='%23ffffff' stroke-width='2.5' opacity='.85'/%3E%3C/g%3E%3Cg transform='rotate(-4 1090 640)'%3E%3Crect x='1010' y='585' width='170' height='108' rx='10' fill='%23fbf8f2' stroke='%23ddd6c8' stroke-width='2.5'/%3E%3Crect x='1032' y='609' width='90' height='9' rx='4' fill='%23d9d2c2'/%3E%3Crect x='1032' y='632' width='126' height='9' rx='4' fill='%23e4ded1'/%3E%3Ccircle cx='1148' cy='664' r='14' fill='none' stroke='%23DF343D' stroke-width='3' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
    /* 이미지 파일(이미지/ 폴더) 우선 사용, 파일이 없으면 아래 인라인(--hero-art)이 표시됨 */
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.97) 39%,rgba(255,255,255,.86) 55%,rgba(255,255,255,.34) 78%,rgba(255,255,255,.18) 100%),
      linear-gradient(180deg,rgba(255,255,255,.05) 55%,rgba(250,249,247,.92) 100%),
      url('/images/proto/hero-bg.svg'),
      var(--hero-art);
    background-position:center,center,center,center;
    background-size:cover;
    background-repeat:no-repeat;
  }
  #site .hero-copy{ max-width:1160px; text-align:left; }
  #site .hero-copy h1{ max-width:690px; font-size:52px; }
  #site .hero-copy .lead{ max-width:690px; margin:0; font-size:18px; line-height:1.76; }
  #site .hero-cta,#site .hero-mini{ justify-content:flex-start; }
  #site .hero-mini{ font-size:14px; }
  #site .quick-start,#site .hero-trust{ max-width:none; }
  #site .quick-card b{ font-size:17px; }
  #site .quick-card span:last-child{ font-size:14px; line-height:1.45; }
  #site .hero-trust .sv{ font-size:25px; }
  #site .hero-trust .sl{ font-size:13px; }
  #site .sec-tag{ font-size:13.5px; }
  #site .sec-title{ font-size:34px; }
  #site .sec-sub{ font-size:17px; }
  #site .flag-card .fn{ font-size:16px; }
  #site .flag-card .ft{ font-size:12px; }
  #site .intake-alt .alt-label,#site .altchip{ font-size:14px; }
  #site .intake-help{ font-size:15.5px; }
  #site .pp-lead{ font-size:20px; }
  #site .pp-lead span{ font-size:14.5px; }
  #pane-purpose .pp-card .pp-title{ font-size:19px; }
  #pane-purpose .pp-card .pp-desc{ font-size:14px; }
  #pane-purpose .pp-card .pp-sample{ font-size:12.5px; }
  #site .doc-head,#site .doc-guide,#site .guide{ font-size:14.5px; line-height:1.62; }
  #site .doc-row .dr-n{ font-size:15.5px; }
  #site .doc-row .dr-p{ font-size:14px; }
  #site .cattable th{ font-size:13.5px; }
  #site .cattable td{ font-size:15px; line-height:1.55; }
  #site .cattable .cnote{ font-size:12.5px; }
  #site .faq summary{ font-size:16px; }
  #site .faq details p{ font-size:15px; }
  #site .sitefoot{ font-size:13.5px; }

  #processSection{ min-height:auto; display:block; padding:58px 20px 64px; }
  #processSection .sec-head{ margin-bottom:24px; }
  #processSection .steps{ gap:14px; }
  #processSection .stepcard{
    overflow:hidden; padding:0 0 22px; text-align:left; border-radius:16px; background:#fff;
  }
  /* 프로세스 4장면: 외부 스트립 이미지 의존 제거 — 장면별 인라인 SVG 일러스트 (260813 v2) */
  .process-photo{
    width:100%; height:auto; aspect-ratio:16/10;
    background-repeat:no-repeat; background-size:cover; background-position:center; background-color:#f2ecdf;
  }
  .process-photo.p1{ background-image:url('/images/proto/step-1.svg'), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%23f2ecdf'/%3E%3Ccircle cx='236' cy='104' r='74' fill='%23ebe2d0'/%3E%3Cg transform='rotate(-6 120 100)'%3E%3Crect x='62' y='38' width='108' height='138' rx='9' fill='%23fbf8f2' stroke='%23ddd6c8' stroke-width='2.5'/%3E%3C/g%3E%3Crect x='92' y='30' width='112' height='142' rx='9' fill='%23ffffff' stroke='%23ddd6c8' stroke-width='2.5'/%3E%3Crect x='106' y='48' width='60' height='9' rx='4' fill='%23c8c1b2'/%3E%3Crect x='106' y='70' width='84' height='6' rx='3' fill='%23e2dccd'/%3E%3Crect x='106' y='85' width='84' height='6' rx='3' fill='%23e2dccd'/%3E%3Crect x='106' y='100' width='64' height='6' rx='3' fill='%23e2dccd'/%3E%3Crect x='106' y='122' width='84' height='6' rx='3' fill='%23e2dccd'/%3E%3Crect x='106' y='137' width='52' height='6' rx='3' fill='%23e2dccd'/%3E%3Ccircle cx='222' cy='118' r='34' fill='none' stroke='%23DF343D' stroke-width='7'/%3E%3Crect x='244' y='146' width='40' height='13' rx='6.5' transform='rotate(45 244 146)' fill='%23DF343D'/%3E%3Ccircle cx='222' cy='118' r='24' fill='%23ffffff' opacity='.28'/%3E%3C/svg%3E"); }
  .process-photo.p2{ background-image:url('/images/proto/step-2.svg'), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%23f4eee2'/%3E%3Ccircle cx='92' cy='96' r='68' fill='%23ece3d1'/%3E%3Crect x='84' y='28' width='152' height='146' rx='10' fill='%23ffffff' stroke='%23ddd6c8' stroke-width='2.5'/%3E%3Crect x='102' y='48' width='72' height='10' rx='5' fill='%23c8c1b2'/%3E%3Crect x='102' y='74' width='116' height='16' rx='5' fill='%23f1ece1' stroke='%23d9d2c2' stroke-width='1.5'/%3E%3Crect x='102' y='100' width='116' height='16' rx='5' fill='%23f1ece1' stroke='%23d9d2c2' stroke-width='1.5'/%3E%3Crect x='102' y='126' width='116' height='16' rx='5' fill='%23fdeaea' stroke='%23DF343D' stroke-width='1.8'/%3E%3Crect x='108' y='131' width='56' height='6' rx='3' fill='%23DF343D' opacity='.55'/%3E%3Cg transform='rotate(38 236 118)'%3E%3Crect x='222' y='58' width='26' height='96' rx='6' fill='%2324466b'/%3E%3Crect x='222' y='58' width='26' height='20' rx='6' fill='%23486d95'/%3E%3Cpath d='M222 154 L235 178 L248 154 Z' fill='%23e8b64f'/%3E%3Cpath d='M231 170 L235 178 L239 170 Z' fill='%23343434'/%3E%3C/g%3E%3C/svg%3E"); }
  .process-photo.p3{ background-image:url('/images/proto/step-3.svg'), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%23f2ecdf'/%3E%3Ccircle cx='232' cy='100' r='72' fill='%23ebe2d0'/%3E%3Crect x='84' y='30' width='140' height='144' rx='10' fill='%23ffffff' stroke='%23ddd6c8' stroke-width='2.5'/%3E%3Crect x='128' y='20' width='52' height='20' rx='7' fill='%2324466b'/%3E%3Ccircle cx='112' cy='72' r='9' fill='none' stroke='%232e7d4f' stroke-width='3'/%3E%3Cpath d='M107 72 L111 76 L118 68' stroke='%232e7d4f' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Crect x='130' y='67' width='72' height='8' rx='4' fill='%23e2dccd'/%3E%3Ccircle cx='112' cy='104' r='9' fill='none' stroke='%232e7d4f' stroke-width='3'/%3E%3Cpath d='M107 104 L111 108 L118 100' stroke='%232e7d4f' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Crect x='130' y='99' width='58' height='8' rx='4' fill='%23e2dccd'/%3E%3Ccircle cx='112' cy='136' r='9' fill='none' stroke='%23c9c2b3' stroke-width='3'/%3E%3Crect x='130' y='131' width='66' height='8' rx='4' fill='%23e2dccd'/%3E%3Ccircle cx='242' cy='134' r='34' fill='%23DF343D'/%3E%3Cpath d='M227 134 L238 145 L259 122' stroke='%23ffffff' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .process-photo.p4{ background-image:url('/images/proto/step-4.svg'), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%23f4eee2'/%3E%3Ccircle cx='104' cy='102' r='70' fill='%23ece3d1'/%3E%3Crect x='70' y='34' width='130' height='136' rx='10' fill='%23ffffff' stroke='%23ddd6c8' stroke-width='2.5'/%3E%3Crect x='88' y='56' width='94' height='10' rx='5' fill='%23c8c1b2'/%3E%3Crect x='88' y='80' width='94' height='6' rx='3' fill='%23e2dccd'/%3E%3Crect x='88' y='95' width='74' height='6' rx='3' fill='%23e2dccd'/%3E%3Ccircle cx='108' cy='138' r='19' fill='%23DF343D'/%3E%3Ccircle cx='108' cy='138' r='12' fill='none' stroke='%23ffffff' stroke-width='2' opacity='.85'/%3E%3Cpath d='M100 152 L96 172 L108 164 L120 172 L116 152 Z' fill='%23DF343D' opacity='.85'/%3E%3Cpath d='M204 96 L258 96 M258 96 L240 78 M258 96 L240 114' stroke='%2324466b' stroke-width='8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='236' y='128' width='58' height='42' rx='7' fill='%23fbf8f2' stroke='%23ddd6c8' stroke-width='2.5'/%3E%3Cpath d='M236 132 L265 152 L294 132' stroke='%23ddd6c8' stroke-width='2.5' fill='none'/%3E%3C/svg%3E"); }
  #processSection .stepcard .num{
    width:40px; height:40px; margin:-20px 18px 12px; position:relative; border:4px solid #fff;
    background:var(--brand); color:#fff; box-sizing:content-box;
  }
  #processSection .stepcard .st{ padding:0 19px; font-size:17px; color:#202a39; }
  #processSection .stepcard .sd{ padding:0 19px; font-size:14px; line-height:1.58; }
  .process-qna{
    display:grid; grid-template-columns:minmax(220px,.36fr) minmax(0,.64fr); gap:32px;
    margin-top:34px; padding-top:32px; border-top:1px solid var(--line); align-items:start;
  }
  .qna-lead{ position:sticky; top:92px; }
  .qna-lead .sec-tag{ margin-bottom:10px; }
  .qna-lead h3{ font-size:27px; line-height:1.3; color:#202a39; letter-spacing:-1px; }
  .qna-lead p{ margin-top:10px; color:#667085; font-size:15px; line-height:1.65; }
  .process-qna .faq{ margin-top:0; }
  .process-qna .faq details{ margin-bottom:8px; }

  @media(max-width:900px){
    body{ font-size:16.5px; }
    #site .mkt-hero{
      background-image:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.91) 62%,rgba(250,249,247,.96) 100%),url('/images/proto/hero-bg.svg'),var(--hero-art);
      background-position:center,right center,right center; background-size:cover;
    }
    #site .hero-copy{ text-align:center; }
    #site .hero-copy h1,#site .hero-copy .lead{ margin-left:auto; margin-right:auto; }
    #site .hero-cta,#site .hero-mini{ justify-content:center; }
    #processSection .steps{ grid-template-columns:1fr 1fr; }
    .process-qna{ grid-template-columns:1fr; gap:18px; }
    .qna-lead{ position:static; text-align:center; }
  }
  @media(max-width:640px){
    #site .hero-copy h1{ font-size:35px; }
    #site .hero-copy .lead{ font-size:16.5px; }
    #site .sec-title{ font-size:28px; }
    #processSection .steps{ grid-template-columns:1fr; }
    .process-photo{ height:auto; aspect-ratio:16/10; }
    #site .cattable td{ font-size:15px; }
  }
  /* ===== v1.3 — 상품정보·구비서류·접수화면 정돈 (260813) ===== */
  #site .doc-row{ align-items:flex-start; padding:15px 16px; gap:16px; }
  #site .doc-row .dr-n{ min-width:210px; padding-top:2px; }
  .doc-note-badge{
    display:inline-flex; margin:5px 0 0; padding:4px 8px; border-radius:6px;
    background:#fff1f2; color:#b4232e; font-size:11.5px; font-weight:800; line-height:1.3;
  }
  #site .doc-row .dr-p{ flex:1; min-width:270px; white-space:normal; }
  .price-stack{ display:flex; flex-direction:column; gap:5px; }
  .price-main{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; color:#263244; }
  .price-main b{ font-size:13px; color:#465367; }
  .price-main strong{ font-size:17px; color:#202a39; }
  .price-separate{ font-size:12.5px; color:#6a7482; line-height:1.45; }
  .price-separate b{ color:#c62e38; }
  .price-alt{
    align-self:flex-start; display:inline-flex; padding:5px 9px; border:1px solid #efb6ba;
    border-radius:999px; background:#fff7f7; color:#a62630; font-size:12px; font-weight:800;
  }
  .req-callout{
    margin:14px 0 18px; padding:17px 18px; border:2px solid #efb0b5; border-radius:14px;
    background:linear-gradient(135deg,#fff7f7,#fff); box-shadow:0 7px 18px rgba(189,37,48,.07);
  }
  .req-callout-head{ display:flex; gap:12px; align-items:flex-start; }
  .req-callout-icon{
    display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px;
    border-radius:10px; background:#df343d; color:#fff; font-size:19px;
  }
  .req-callout-title{ color:#252f3f; font-size:16px; font-weight:900; }
  .req-callout-sub{ margin-top:3px; color:#6c7582; font-size:12.5px; }
  .req-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; }
  .req-item{ padding:10px 11px; border:1px solid #ead9da; border-radius:9px; background:#fff; color:#3e4858; font-size:13px; font-weight:750; }
  .req-item::before{ content:'✓'; color:#c52b35; font-weight:900; margin-right:6px; }
  .req-item a{ color:#a62630; text-decoration:underline; font-size:12px; }
  .req-callout-foot{ margin-top:10px; color:#6c7582; font-size:12px; line-height:1.55; }
  .req-callout-foot a{ color:#a62630; font-weight:800; text-decoration:underline; }
  .ci-required{ margin-top:10px; padding:10px 11px; border-left:4px solid #df343d; border-radius:8px; background:#fff5f5; }
  .ci-required b{ display:block; color:#a62630; font-size:12px; margin-bottom:4px; }
  .ci-required span{ color:#3f4958; font-size:12.5px; line-height:1.55; }

  .checkout-page{ min-height:calc(100vh - 64px); background:#f5f5f3; padding:34px 20px 70px; }
  /* 1080px 안에서 본문이 사이드(360px)에 눌려 서류 제출 영역이 약 680px
     밖에 안 됐다. 1240 으로 넓히면 본문이 860px 가 되어 서류 칸을
     2열로 놓을 수 있다 (요청 260930 — 21번). */
  .checkout-shell{ max-width:1240px; margin:0 auto; }
  .checkout-titlebar{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
  .checkout-titlebar h1{ margin:0; font-size:31px; letter-spacing:-1px; color:#202a39; }
  .checkout-titlebar p{ margin:6px 0 0; color:#697382; font-size:14px; }
  .checkout-back{ border:0; background:transparent; color:#596579; font-weight:800; cursor:pointer; padding:6px 0; }
  .checkout-steps{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
  .checkout-step{ padding:13px 16px; border-radius:10px; background:#e8eaed; color:#7a8492; font-size:13px; font-weight:800; }
  .checkout-step.active{ background:#303b4b; color:#fff; }
  .checkout-step.done{ background:#e5f4ea; color:#22733c; }
  .checkout-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
  .checkout-card{ background:#fff; border:1px solid #dedfe2; border-radius:16px; padding:24px; box-shadow:0 8px 24px rgba(32,42,57,.05); }
  .checkout-card h2{ margin:0 0 5px; color:#202a39; font-size:20px; }
  .checkout-card .card-sub{ margin:0 0 20px; color:#747e8c; font-size:13px; }
  .checkout-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
  .checkout-form-grid .wide{ grid-column:1/-1; }
  .checkout-form-actions{ display:flex; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid #ececed; }
  .checkout-summary{ position:sticky; top:84px; }
  .checkout-summary .cs-item{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #ececed; font-size:13px; }
  .checkout-summary .cs-item span{ color:#4d5868; }
  .checkout-summary .cs-item b{ color:#202a39; white-space:nowrap; }
  .checkout-required{ margin-top:17px; padding:14px; border:2px solid #efb6ba; border-radius:12px; background:#fff7f7; }
  .checkout-required h3{ margin:0; color:#a62630; font-size:14px; }
  .checkout-required p{ margin:4px 0 9px; color:#6d5960; font-size:12px; }
  .checkout-required ul{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
  .checkout-required li{ color:#374151; font-size:12.5px; font-weight:700; }
  .checkout-required li::before{ content:'✓'; color:#c52b35; margin-right:6px; }
  .checkout-pay-note{ margin-top:13px; padding:11px 12px; border-radius:9px; background:#f1f3f5; color:#566171; font-size:12px; line-height:1.55; }
  .checkout-success{ text-align:center; padding:6px 0 10px; }
  .checkout-success-icon{ display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:#e4f4e9; color:#19733a; font-size:30px; }
  .checkout-success h2{ font-size:27px; }
  .checkout-success p{ color:#657181; line-height:1.65; }
  .checkout-next{ margin-top:14px; padding:15px; border-radius:12px; background:#f5f7f8; text-align:left; }
  .checkout-next ol{ margin:9px 0 0; padding-left:20px; color:#485465; font-size:13px; line-height:1.9; }
  @media(max-width:820px){
    #site .doc-row{ flex-wrap:wrap; }
    #site .doc-row .dr-n,#site .doc-row .dr-p{ min-width:100%; }
    .req-list{ grid-template-columns:1fr; }
    .checkout-grid{ grid-template-columns:1fr; }
    .checkout-summary{ position:static; }
  }
  @media(max-width:560px){
    .checkout-page{ padding:24px 14px 50px; }
    .checkout-titlebar{ align-items:flex-start; flex-direction:column-reverse; }
    .checkout-titlebar h1{ font-size:27px; }
    .checkout-form-grid{ grid-template-columns:1fr; }
    .checkout-form-grid .wide{ grid-column:auto; }
    .checkout-form-actions{ flex-direction:column; }
  }
  /* ===== v1.4 — 목적 동선·가시성·이미지 비율 보완 (260813) ===== */
  #site{ font-size:18px; line-height:1.62; }
  /* 한국어 줄바꿈: 단어 중간 끊김 방지(모바일 제목 '서 류,' 현상 해결) — 260813 v2 */
  #site, #site button, #site input, #site select, #site td, #site th{ word-break:keep-all; overflow-wrap:break-word; }
  #site .muted{ font-size:14.5px; }
  #site .btn{ font-size:16px; }
  #site .btn.sm{ font-size:14.5px; }
  #site .chat-head{ font-size:16px; }
  #site .doc-head,#site .doc-guide,#site .guide{ font-size:15.5px; }
  #site .doc-row .dr-n{ font-size:16.5px; }
  #site .doc-row .dr-p{ font-size:15px; }
  #site .cattable td{ font-size:16px; }
  #site .cattable th{ font-size:14.5px; }
  #toolSection{ padding-top:62px; }
  #toolSection .container-narrow{ max-width:1040px; }
  #toolSection .sec-head{ margin-bottom:22px; }
  #toolSection .sec-title{ font-size:38px; line-height:1.2; }
  #toolSection .sec-sub{ margin-top:10px; font-size:18px; line-height:1.65; }
  #toolSection .wrap{ max-width:980px!important; }
  #site .btn{ min-height:44px; }
  #site .btn.sm{ min-height:38px; padding:8px 13px; }
  #pane-purpose .purpose-progress{
    display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 18px;
    color:#697486; font-size:13px; font-weight:800;
  }
  #pane-purpose .purpose-progress span{ display:flex; align-items:center; gap:6px; }
  #pane-purpose .purpose-progress i{
    display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
    border-radius:50%; background:#e8eaed; color:#707b8c; font-style:normal; font-size:12px;
  }
  #pane-purpose .purpose-progress .done i{ background:#303b4b; color:#fff; }
  #pane-purpose .purpose-progress .current i{ background:var(--brand); color:#fff; }
  #pane-purpose .purpose-progress b{ width:34px; height:1px; background:#cfd3d9; }
  #pane-purpose .pp-lead{ font-size:23px; margin-bottom:22px; }
  #pane-purpose .pp-lead span{ font-size:15.5px; margin-top:7px; }
  #pane-purpose .pp-card{
    min-height:184px; grid-template-columns:68px minmax(0,1fr) 28px; gap:16px;
    padding:23px 21px; border-width:1.5px;
  }
  #pane-purpose .pp-icon{
    width:66px; height:66px; border-radius:18px;
    border:2px solid color-mix(in srgb,var(--purpose) 24%,#fff);
    box-shadow:0 8px 18px color-mix(in srgb,var(--purpose) 14%,transparent),inset 0 0 0 1px rgba(255,255,255,.55);
  }
  #pane-purpose .pp-icon strong{ font-size:26px; letter-spacing:-1.5px; }
  #pane-purpose .pp-icon small{ font-size:9px; margin-top:5px; }
  #pane-purpose .pp-card .pp-kicker{ font-size:11px; margin:2px 0 7px; }
  #pane-purpose .pp-card .pp-title{ font-size:21px; }
  #pane-purpose .pp-card .pp-desc{ font-size:15px; line-height:1.52; margin-top:8px; }
  #pane-purpose .pp-card .pp-sample{ font-size:13px; margin-top:9px; }
  #pane-purpose .pp-arrow{ width:28px; height:28px; font-size:16px; margin-top:20px; }
  #pane-purpose .pp-icon{ position:relative; }
  #pane-purpose .intake-help{
    margin-top:18px; padding:15px; border:1px solid #d9dde3; border-radius:12px; background:#f7f8f9;
    font-size:15px;
  }
  .tool-guide-box{
    margin-top:18px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
    padding:17px 18px; border:1px solid #d9dde4; border-radius:13px; background:#fff;
    color:#596579; font-size:14.5px; line-height:1.65;
  }
  .tool-guide-box .guide-no{
    display:flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:9px; background:#303b4b; color:#fff; font-size:14px; font-weight:900;
  }
  .tool-guide-box b{ color:#273142; }
  .hero-live{
    position:absolute; left:0; right:0; bottom:0; z-index:3; height:42px; overflow:hidden;
    border-top:1px solid rgba(255,255,255,.65); background:rgba(255,255,255,.84);
    backdrop-filter:blur(10px); color:#3d4959;
  }
  .hero-live-inner{ max-width:1160px; margin:0 auto; height:42px; display:flex; align-items:center; gap:16px; padding:0 20px; }
  .hero-live-label{ flex:none; display:flex; align-items:center; gap:7px; color:#253041; font-size:12.5px; font-weight:900; }
  .hero-live-label::before{ content:''; width:8px; height:8px; border-radius:50%; background:#27b34b; box-shadow:0 0 0 4px rgba(39,179,75,.13); }
  .hero-live-window{ flex:1; min-width:0; overflow:hidden; }
  .hero-live-track{ display:flex; width:max-content; animation:liveTicker 24s linear infinite; }
  .hero-live-item{ padding-right:48px; white-space:nowrap; font-size:12.5px; }
  .hero-live-item b{ color:#253041; }
  .hero-live-item em{ margin-left:6px; padding:3px 7px; border-radius:999px; background:#e9eef6; color:#356db5; font-style:normal; font-size:10.5px; font-weight:900; }
  #site .mkt-hero .scroll-cue{ bottom:52px; }
  @keyframes liveTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  #processSection .stepcard{ min-width:0; }
  #processSection .stepcard .st{ font-size:19px; }
  #processSection .stepcard .sd{ font-size:15px; }
  @media(max-width:900px){
    #site{ font-size:17px; }
    #toolSection .sec-title{ font-size:33px; }
    #pane-purpose .pp-card{ min-height:176px; }
    .hero-live{ position:relative; height:44px; }
    .hero-live-inner{ height:44px; }
  }
  @media(max-width:640px){
    #toolSection{ padding-left:14px; padding-right:14px; }
    #toolSection .sec-title{ font-size:30px; }
    #toolSection .sec-sub{ font-size:16.5px; }
    #pane-purpose .pp-card{ min-height:166px; grid-template-columns:62px minmax(0,1fr) 26px; }
    #pane-purpose .pp-icon{ width:60px; height:60px; }
    #pane-purpose .pp-card .pp-title{ font-size:20px; }
    .hero-live-label{ display:none; }
    .hero-live-inner{ padding:0 14px; }
  }
  /* ===== v1.5 — 인증 옵션·검색 진입·업로드 화면 정돈 (260813) ===== */
  .price-alt{ background:#f7f8fa; border-color:#d4d9e0; color:#4d5969; }
  .price-alt.apo{ background:#fff3f4; border-color:#efacb2; color:#b4232e; }
  .price-alt.daejo{ background:#eef6ff; border-color:#a9c9ee; color:#285f9f; }
  .ci-notary{ border-left:4px solid #c8ced6; padding:10px 11px; }
  .ci-notary.alt-apo{ background:#fff5f5; border-color:#f1c2c6; border-left-color:#d93642; }
  .ci-notary.alt-apo b{ color:#b4232e; }
  .ci-notary.alt-daejo{ background:#f1f7ff; border-color:#c9ddf4; border-left-color:#3977b9; }
  .ci-notary.alt-daejo b{ color:#285f9f; }

  .route-switch{
    display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0 0 13px;
    padding:7px; border:1px solid #d9dde4; border-radius:13px; background:#eef0f3;
  }
  .route-switch button{
    min-height:48px; border:1px solid transparent; border-radius:9px; background:transparent;
    color:#596579; font:800 15px/1.3 inherit; cursor:pointer;
  }
  .route-switch button.active{ background:#fff; border-color:#d7dbe1; color:#253041; box-shadow:0 4px 12px rgba(31,39,51,.06); }
  .route-switch button:not(.active):hover{ background:rgba(255,255,255,.65); color:#b4232e; }

  #pane-intake .flag-grid{ grid-template-columns:repeat(5,1fr); gap:8px; margin:12px 0 10px; }
  #pane-intake .flag-card{ min-height:82px; padding:9px 7px; gap:3px; border-radius:11px; }
  #pane-intake .flag-card .fg svg{ width:39px; height:26px; }
  #pane-intake .flag-card .fn{ font-size:14px; }
  #pane-intake .flag-card .ft{ font-size:10px; padding:1px 7px; }
  #pane-intake .flag-card.more .fg{ font-size:22px; }
  #pane-purpose .pp-grid{ gap:10px; }
  #pane-purpose .pp-card{
    min-height:148px; grid-template-columns:54px minmax(0,1fr) 24px; gap:13px;
    padding:16px; border-radius:15px;
  }
  #pane-purpose .pp-icon{ width:52px; height:52px; border-radius:14px; }
  #pane-purpose .pp-icon strong{ font-size:23px; }
  #pane-purpose .pp-icon small{ font-size:8px; margin-top:3px; }
  #pane-purpose .pp-card .pp-kicker{ font-size:10px; margin:0 0 4px; }
  #pane-purpose .pp-card .pp-title{ font-size:19px; }
  #pane-purpose .pp-card .pp-desc{ font-size:13.5px; line-height:1.4; margin-top:5px; }
  #pane-purpose .pp-card .pp-sample{ font-size:12px; margin-top:5px; }
  #pane-purpose .pp-arrow{ width:24px; height:24px; margin-top:14px; font-size:14px; }
  #site .doc-row{ padding:11px 13px; margin:6px 0; }
  #site .price-stack{ gap:3px; }
  #site .req-callout{ padding:14px 15px; margin:12px 0 15px; }
  #site .cattable td{ padding-top:10px; padding-bottom:10px; }

  .embassy-followup{
    margin:10px 0 12px; padding:13px 14px; border:1px solid #e2c580; border-left:5px solid #b98618;
    border-radius:10px; background:#fff9e9; color:#6c531b; font-size:14px; line-height:1.6;
  }
  .embassy-followup b{ color:#6a4910; }

  .submit-box{ padding:18px; }
  .submit-box .sb-h{ font-size:17px; line-height:1.45; }
  .submit-box .sb-h .muted{ font-size:14px!important; }
  .submit-box .sb-warn,.sb-idwarn{ padding:10px 12px; font-size:14px; line-height:1.58; }
  .sb-doc{ padding:14px; margin-top:10px; }
  .sb-doc-h{ font-size:16px; line-height:1.45; }
  .sb-doc-h .muted{ font-size:13.5px!important; }
  .sb-tag{ font-size:12px; padding:3px 8px; }
  .sb-modes{ gap:8px 12px; margin:10px 0 9px; }
  .sb-radio{ min-height:40px; padding:8px 12px; font-size:14px; }
  .sb-radio input{ width:16px; height:16px; }
  .sb-up{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; align-items:center; font-size:14px; }
  .sb-up input[type=file]{ width:100%; min-height:44px; padding:7px; border:1px solid #cfd9e4; border-radius:9px; background:#fff; font-size:14px; }
  .sb-up input[type=file]::file-selector-button{ margin-right:10px; padding:7px 10px; border:0; border-radius:7px; background:#eef2f6; color:#253041; font:800 13px/1.2 inherit; cursor:pointer; }
  .sb-up .btn{ min-height:38px; padding:7px 13px; font-size:14px; white-space:nowrap; }
  .sb-hint{ grid-column:1/-1; font-size:13.5px; line-height:1.5; }
  .sb-mail,.sb-donef{ font-size:14px; line-height:1.55; padding:9px 11px; }
  .sb-nouns{ min-height:74px; padding:10px 12px; font-size:14px; }
  .serial-warn{ font-size:13.5px; }
  @media(max-width:900px){
    #pane-intake .flag-grid{ grid-template-columns:repeat(4,1fr); }
    #pane-purpose .pp-card{ min-height:146px; }
  }
  @media(max-width:640px){
    #pane-intake .flag-grid{ grid-template-columns:repeat(2,1fr); }
    #pane-intake .flag-card{ min-height:78px; }
    #pane-purpose .pp-card{ min-height:140px; grid-template-columns:52px minmax(0,1fr) 22px; padding:15px; }
    .route-switch{ grid-template-columns:1fr; }
    .sb-up{ grid-template-columns:1fr; }
    .sb-hint{ grid-column:auto; }
    .sb-up .btn{ justify-self:start; }
  }
  /* ===== v1.6 — 실제 히어로 이미지 반영·모바일 최적화 (260813) ===== */
  html,body{ max-width:100%; overflow-x:hidden; }
  body{ padding-top:70px; }
  .topbar{
    position:fixed!important; top:0; left:0; right:0; width:100%; z-index:80;
  }
  /* 넓은 화면: 오전 시안처럼 1400px 기준축을 사용해 콘텐츠 시작점을 약 x=250px에 맞춤 */
  @media(min-width:1240px){
    #site .hero-inner.container{ width:calc(100% - 120px); max-width:1400px; transform:none; }
    #site .hero-copy{ width:700px; max-width:700px; margin-left:0; margin-right:auto; }
    #site .quick-start,#site .hero-trust{ width:700px; max-width:700px; }
    /* 국가·목적·서비스 그리드는 기존처럼 화면 중앙에 둔다. */
    #toolSection .container-narrow{ width:auto; max-width:1040px; transform:none; margin-left:auto!important; margin-right:auto!important; }
    #toolSection .sec-head{ width:auto; max-width:none!important; margin-left:auto!important; margin-right:auto!important; }
    #toolSection .wrap{ width:100%; max-width:980px!important; margin-left:auto!important; margin-right:auto!important; }
  }
  #site .mkt-hero{
    --hero-photo:url('/images/hero-documents.webp');
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.97) 37%,rgba(255,255,255,.82) 51%,rgba(255,255,255,.20) 70%,rgba(255,255,255,.04) 100%),
      var(--hero-photo),
      var(--hero-art);
    background-position:center,right center,right center;
    background-size:cover,cover,cover;
    background-repeat:no-repeat;
  }
  #site .hero-copy{ max-width:700px; margin-right:auto; }
  #site .quick-start,#site .hero-trust{ max-width:700px; }
  #site .quick-start{ margin-left:0; margin-right:0; }
  #site .hero-trust{ margin-left:0; margin-right:0; background:rgba(255,255,255,.88); backdrop-filter:blur(8px); }
  .process-photo{
    aspect-ratio:5/7;
    background-image:url('/images/process-strip.webp')!important;
    background-size:400% auto!important;
    background-repeat:no-repeat!important;
    background-color:#f3ede2;
  }
  .process-photo.p1{ background-position:0 50%!important; }
  .process-photo.p2{ background-position:33.333% 50%!important; }
  .process-photo.p3{ background-position:66.666% 50%!important; }
  .process-photo.p4{ background-position:100% 50%!important; }
  #processSection .stepcard{ border-color:#ded8cd; }

  @media(max-width:900px){
    body{ padding-top:64px; }
    #site .mkt-hero{
      display:block; min-height:auto; padding-top:196px;
      background-image:
        linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.04) 62%,rgba(250,249,247,.96) 100%),
        var(--hero-photo),
        var(--hero-art);
      background-position:center,72% center,72% center;
      background-size:cover,cover,cover;
      background-repeat:no-repeat;
    }
    #site .hero-inner{
      min-height:auto; padding:28px 18px 26px; align-items:flex-start;
      background:linear-gradient(180deg,rgba(250,249,247,.92),#faf9f7 120px);
    }
    #site .hero-copy{ max-width:680px; margin:0 auto 0 0; text-align:left; }
    #site .hero-copy h1{ font-size:36px; line-height:1.2; letter-spacing:-1.4px; margin-top:14px; }
    #site .hero-copy .lead{ font-size:16.5px; line-height:1.62; }
    #site .hero-copy .lead br{ display:none; }
    #site .hero-copy h1,#site .hero-copy .lead{ margin-left:0; margin-right:0; }
    #site .hero-cta,#site .hero-mini{ justify-content:flex-start; }
    #site .quick-start,#site .hero-trust{ max-width:680px; margin-left:0; margin-right:0; }
    #site .mkt-hero .scroll-cue{ display:none; }
    .hero-live{ position:relative; }
  }

  @media(max-width:640px){
    body{ padding-top:60px; }
    body{ font-size:16px; }
    #site{ font-size:16px; line-height:1.55; }
    .topbar{ height:60px; padding:0 10px 0 13px; }
    .topbar .logo{ font-size:18px; }
    .menu-toggle{ width:40px; height:40px; margin-left:auto; }
    .cartbtn{ width:44px; height:40px; min-height:40px; padding:0; justify-content:center; gap:3px; font-size:0; }
    .cartbtn::before{ content:'🛒'; font-size:17px; }
    .cartbtn .cbadge{ min-width:16px; height:16px; padding:0 4px; font-size:10px; line-height:16px; }
    .topbar.mobile-open nav{ top:60px; max-height:calc(100svh - 72px); overflow-y:auto; }

    #site .mkt-hero{ padding-top:172px; background-position:center,73% center; }
    #site .hero-inner{ padding:22px 14px 22px; }
    #site .hero-badge{ padding:7px 11px; font-size:11.5px; line-height:1.35; }
    #site .hero-copy h1{ font-size:31px; line-height:1.18; letter-spacing:-1.2px; margin:12px 0 12px; }
    #site .hero-copy .lead{ font-size:15.5px; line-height:1.58; }
    #site .hero-cta{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:18px; }
    #site .hero-cta .btn{ width:100%; min-height:48px; }
    #site .hero-mini{ gap:6px 12px; margin-top:14px; font-size:11.5px; }
    #site .quick-start{
      display:flex; gap:10px; margin-top:17px; padding:2px 2px 8px;
      overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
      scrollbar-width:none;
    }
    #site .quick-start::-webkit-scrollbar{ display:none; }
    #site .quick-card{
      min-width:82%; min-height:80px; padding:14px; scroll-snap-align:center;
      box-shadow:0 6px 20px rgba(32,42,57,.07);
    }
    #site .quick-card b{ font-size:16px; }
    #site .quick-card span:last-child{ font-size:12.5px; }
    #site .hero-trust{ grid-template-columns:repeat(2,1fr); margin-top:10px; padding:10px; }
    #site .hero-trust>div{ padding:7px 5px; }
    #site .hero-trust .sv{ font-size:20px; }
    #site .hero-trust .sl{ font-size:11px; }
    .hero-live-inner{ padding:0 12px; }
    .hero-live-item{ padding-right:30px; font-size:11.5px; }

    .section,#toolSection,#processSection{ padding:42px 12px; }
    #toolSection .wrap{ width:100%; margin:0 auto 26px; padding:0; }
    #toolSection .sec-head{ margin-bottom:16px; }
    #toolSection .sec-title{ font-size:28px; }
    #toolSection .sec-sub{ font-size:15.5px; line-height:1.55; }
    .route-switch{ grid-template-columns:1fr 1fr; gap:6px; padding:5px; }
    .route-switch button{ min-height:44px; padding:6px; font-size:13.5px; }
    #pane-intake .flag-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
    #pane-intake .flag-card{ min-width:0; min-height:82px; padding:8px 4px; }
    #pane-intake .flag-card .fn{ font-size:13px; }
    #pane-intake .flag-card .ft{ max-width:100%; font-size:9px; padding:2px 5px; }
    .intake-alt{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .intake-alt .alt-label{ grid-column:1/-1; margin:0 0 2px; }
    .intake-alt .altchip{ width:100%; min-height:43px; margin:0; padding:7px 8px; font-size:12.5px; }
    .intake-help{ line-height:1.55; }
    .intake-help .btn{ display:flex; width:100%; margin:8px 0 0; justify-content:center; }
    .tool-guide-box{ grid-template-columns:1fr; padding:14px; font-size:13.5px; }
    .tool-guide-box .guide-no{ width:auto; height:auto; justify-self:start; padding:5px 9px; }

    #pane-purpose .purpose-progress{ gap:5px; font-size:11px; }
    #pane-purpose .purpose-progress i{ width:23px; height:23px; }
    #pane-purpose .purpose-progress b{ width:16px; }
    #pane-purpose .pp-lead{ font-size:19px; }
    #pane-purpose .pp-lead span{ font-size:13px; }
    #pane-purpose .pp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    #pane-purpose .pp-card{
      min-height:142px; display:block; padding:13px 12px; border-radius:14px;
    }
    #pane-purpose .pp-icon{ width:45px; height:45px; border-radius:12px; margin-bottom:9px; }
    #pane-purpose .pp-icon strong{ font-size:20px; }
    #pane-purpose .pp-icon small{ font-size:7px; }
    #pane-purpose .pp-card .pp-kicker{ font-size:9px; }
    #pane-purpose .pp-card .pp-title{ font-size:17px; }
    #pane-purpose .pp-card .pp-desc{ font-size:12px; line-height:1.4; }
    #pane-purpose .pp-card .pp-sample,#pane-purpose .pp-arrow{ display:none; }

    #site .chat-head{ padding:12px 13px; font-size:14.5px; }
    #pane-work .chatbox>div:last-child{ padding:12px!important; }
    #site .doc-row{ padding:12px; gap:8px; }
    #site .doc-row .dr-n{ font-size:15.5px; }
    #site .doc-row .dr-p{ font-size:14px; min-width:100%; }
    #site .cattable:not(.apo-table) tr:not(.catsep){ padding:12px; }
    #site .cattable td{ font-size:14.5px; }
    .req-callout{ padding:13px; }

    #processSection .steps{
      display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory; padding:2px 2px 12px; scrollbar-width:none;
    }
    #processSection .steps::-webkit-scrollbar{ display:none; }
    #processSection .stepcard{ flex:0 0 84%; scroll-snap-align:center; }
    .process-photo{ aspect-ratio:5/7; }
    #processSection .stepcard .st{ font-size:18px; }
    #processSection .stepcard .sd{ font-size:14px; }
    .process-qna{ margin-top:22px; padding-top:22px; }
    .qna-lead h3{ font-size:23px; }
    .qna-lead h3 br{ display:none; }

    .drawer-head{ padding:14px 15px; }
    .drawer-body{ padding:12px; }
    .drawer-foot{ max-height:48svh; overflow-y:auto; padding:12px 14px; }
    .cart-item{ padding:12px; }
    .cart-item .ci-mid{ flex-wrap:wrap; }
    .cart-item .ci-price{ flex-basis:100%; margin-left:0; text-align:right; }
    .cart-item .ci-notary select{ display:block; width:100%; margin:7px 0 0; }
    .cart-opts{ padding:10px; }

    .checkout-page{ padding:20px 10px 42px; }
    .checkout-titlebar{ gap:8px; margin-bottom:16px; }
    .checkout-titlebar h1{ font-size:25px; }
    .checkout-titlebar p{ font-size:13px; }
    .checkout-steps{ gap:6px; }
    .checkout-step{ padding:11px 9px; font-size:12px; }
    .checkout-card{ padding:16px 13px; border-radius:13px; }
    .checkout-card h2{ font-size:19px; }
    .checkout-summary .cs-item{ align-items:flex-start; }
    .checkout-summary .cs-item span{ min-width:0; }
    .checkout-form-actions .btn{ width:100%; }
    .submit-box{ padding:13px; }
    .sb-doc{ padding:12px; }
    .sb-up .btn{ width:100%; justify-content:center; }
  }
  @media(max-width:340px){
    #pane-intake .flag-grid,#pane-purpose .pp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .topbar .logo{ font-size:16px; }
    #site .hero-copy h1{ font-size:28px; }
  }
  @media(prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; scroll-snap-type:none; }
    *,*::before,*::after{ scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }
    .hero-live-track{ animation:none; }
  }

.intake-lead{ text-align:center; font-size:19px; font-weight:900; color:#123a5e; margin:0; }
    .intake-lead span{ display:block; font-size:13.5px; font-weight:600; color:#5b6b7d; margin-top:5px; }
    .flag-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0 14px; }
    .flag-card{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:16px 10px; cursor:pointer; transition:.15s; display:flex; flex-direction:column; align-items:center; gap:5px; box-shadow:0 4px 16px rgba(18,58,92,.05); }
    .flag-card:hover{ border-color:#1d5686; transform:translateY(-3px); box-shadow:0 12px 26px rgba(18,58,92,.13); }
    .flag-card .fg{ font-size:34px; line-height:1; }
    .flag-card .fg svg{ width:46px; height:31px; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.28); display:block; margin:0 auto; }
    .flag-card .fn{ font-size:14.5px; font-weight:800; color:#123a5e; }
    .flag-card .ft{ font-size:10.5px; font-weight:800; border-radius:20px; padding:1px 9px; }
    .flag-card .ft.apo{ background:#e6f0fb; color:#1d5686; }
    .flag-card .ft.emb{ background:#fbeee0; color:#a5651b; }
    .flag-card.more{ border-style:dashed; }
    .flag-card.more .fg{ font-size:26px; color:#8795a4; }
    .flag-card.more .ft{ background:#eef1f4; color:#8795a4; }
    .intake-alt{ text-align:center; margin-top:4px; }
    .intake-alt .alt-label{ font-size:12.5px; color:#8795a4; margin-right:4px; }
    .altchip{ background:#eef3f8; border:1px solid var(--line); border-radius:20px; padding:6px 13px; font-size:12.5px; font-weight:700; color:#123a5e; cursor:pointer; margin:0 4px 6px 0; }
    .altchip:hover{ background:#e4ecf3; }
    .intake-help{ text-align:center; margin-top:14px; color:#5b6b7d; font-size:14px; }
    .intake-help .btn{ margin-left:6px; }
    /* 2단계 목적 선택 */
    .pp-lead{ text-align:center; font-size:18px; font-weight:900; color:#123a5e; margin:0 0 16px; }
    .pp-lead b{ color:#1d5686; }
    .pp-lead span{ display:block; font-size:13px; font-weight:600; color:#5b6b7d; margin-top:5px; }
    .pp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .pp-card{ text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; cursor:pointer; transition:.15s; }
    .pp-card:hover{ border-color:#1d5686; transform:translateY(-2px); box-shadow:0 10px 24px rgba(18,58,92,.12); }
    .pp-card b{ display:block; font-size:15.5px; color:#123a5e; font-weight:800; }
    .pp-card span{ font-size:12.5px; color:#5b6b7d; }
    /* 3단계 서류 제안 */
    .doc-head{ font-size:13px; color:#5b6b7d; margin-bottom:4px; }
    .doc-head b{ color:#123a5e; }
    .docset{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
    .docpill{ background:#e8f3ec; color:#2f6b45; font-weight:800; font-size:13.5px; border-radius:8px; padding:7px 13px; }
    .docpill.opt{ background:#fff; border:1px dashed #c7cdd6; color:#5b6b7d; font-weight:600; }
    .doc-guide{ background:#f0f5fb; border:1px solid #d6e4f5; border-radius:9px; padding:10px 14px; font-size:12.8px; color:#33506e; margin:10px 0; }
    .doc-row{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 14px; margin:7px 0; }
    .doc-row .dr-n{ font-weight:800; color:#123a5e; font-size:14px; flex:1; }
    .doc-row .dr-n .dr-opt{ font-size:10.5px; font-weight:800; color:#8795a4; background:#eef1f5; border-radius:20px; padding:1px 7px; margin-left:4px; }
    .doc-row .dr-p{ font-size:12.5px; color:#5b6b7d; white-space:nowrap; }
    @media(max-width:640px){ .doc-row{ flex-wrap:wrap; } .doc-row .dr-p{ flex-basis:100%; } }
    @media(max-width:640px){ .flag-grid{ grid-template-columns:repeat(2,1fr); } .pp-grid{ grid-template-columns:1fr; } }

.fm-bg{ position:fixed; inset:0; background:rgba(15,24,38,.5); z-index:90; display:none; align-items:center; justify-content:center; padding:20px; }
  .fm-bg.open{ display:flex; }
  .fm{ background:#fff; border-radius:16px; max-width:520px; width:100%; padding:24px 26px; box-shadow:0 24px 60px rgba(0,0,0,.3); }
  .fm h3{ margin:0 0 4px; font-size:19px; font-weight:900; color:#123a5e; }
  .fm .fm-sub{ font-size:13px; color:#5c6879; margin-bottom:16px; }
  .fm-row{ display:flex; align-items:center; gap:12px; border:1px solid #e2e7ee; border-radius:11px; padding:13px 15px; margin:9px 0; }
  .fm-row .fr-n{ flex:1; font-weight:800; color:#1c2431; font-size:14.5px; }
  .fm-row .fr-d{ font-size:12px; color:#8795a4; margin-top:2px; font-weight:500; }
  .fm-x{ display:block; margin:16px auto 0; background:#eef3f8; border:none; border-radius:10px; padding:11px 22px; font-weight:800; color:#123a5e; cursor:pointer; }
  .cart-opts{ background:#f6f9fc; border:1px solid #e2e7ee; border-radius:11px; padding:10px 12px; margin-bottom:12px; }
  .cart-opts .copt{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:#3a4658; padding:6px 4px; cursor:pointer; line-height:1.45; }
  .cart-opts .copt input{ margin-top:3px; width:16px; height:16px; accent-color:#e8a33d; flex:none; }
  .cart-opts .copt b{ color:#1c2431; }
  .cart-opts .opt-fee{ color:#123a5e; }

/* ===== 여기부터 프로젝트 고유 — 디자인 패치보다 뒤에 와야 한다 ===== */
/* 로고 방어선 — CSS 가 늦게 로드돼도 원본 크기로 튀어나오지 않게 */
.topbar .logo img { max-width: 100%; }

/* ===== 체크박스·라디오 정상화 =====
 * 프로토타입에서 온 전역 규칙 `select,input{ width:100%; padding:8px 10px; ... }`
 * 이 체크박스에도 걸려서, 체크박스가 폭 100% 상자가 되고 글리프만 그 안에 떠
 * 라벨 텍스트와 멀찍이 떨어져 보였다(개인정보 동의 줄).
 * 전역 규칙을 고치면 기존 입력칸이 전부 흔들리므로, 여기서만 되돌린다. */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  accent-color: #e8a33d;
  cursor: pointer;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid rgba(43,108,176,.45);
  outline-offset: 1px;
  box-shadow: none;
}

/* 동의 줄 — 체크박스를 첫 줄 글자에 맞춰 붙인다 */
.agree {
  align-items: flex-start;
  gap: 9px;
}
.agree input[type="checkbox"] {
  flex: 0 0 16px;   /* 늘어나지도 줄어들지도 않게 고정 */
  margin-top: 2px;  /* 첫 줄 텍스트의 시각적 중심에 맞춤 */
}
.agree span { flex: 1; }

/* =====================================================================
 * 상담사 아바타
 *
 * 움직이는 원본(240×240 · 약 500KB)은 상담 창 머리말에만 쓴다.
 * 말풍선은 대화가 길어지면 수십 개가 되고, 플로팅 버튼은 모든 방문자에게
 * 처음부터 보이므로 둘 다 정지본(96×96 · 2KB)을 쓴다.
 *
 * 원본이 상반신 사진이라 작은 원에 그대로 넣으면 얼굴이 너무 작다.
 * 1.35배 확대해 얼굴이 원을 채우게 한다 (1.6배는 머리 위가 잘린다).
 * 잘라내기는 .avatar-clip 이 맡으므로 img 에는 radius 를 주지 않는다 —
 * 확대와 겹치면 모양이 어긋난다.
 * ===================================================================== */

.msg .av,
.avatar-clip {
  overflow: hidden;
  border-radius: 50%;
  padding: 0;
}
.msg .av img,
.avatar-clip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.35);
  transform-origin: 50% 30%;   /* 얼굴 높이에 맞춰 확대 */
}

/* ── 상담 창 머리말 — 접속 중 표시를 오른쪽 아래에 겹친다 ── */
#pane-chat .chat-head { gap: 11px; }
#pane-chat .chat-head .agent {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: block;
}
#pane-chat .chat-head .avatar-clip {
  width: 36px;
  height: 36px;
  display: block;
  background: #dbe7f2;                        /* 로딩 중 빈 원 방지 */
  box-shadow: 0 0 0 2px rgba(255,255,255,.55);
}
#pane-chat .chat-head .agent .dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px #143f63;              /* 헤더 배경색으로 테두리를 낸다 */
}

/* ── 플로팅 상담 버튼 — 말풍선 아이콘 대신 상담사 얼굴 ──
 * 카카오 노랑은 버튼 바탕에 남겨 테두리 링으로 보이게 하고,
 * '상담' 글자는 아래쪽에 알약으로 얹는다. 얼굴을 가리지 않는다. */
.fbtn.kko {
  position: relative;
  padding: 0;
  gap: 0;
  overflow: visible;
}
.fbtn.kko .avatar-clip {
  position: absolute;
  inset: 3px;                                  /* 3px 만큼 노란 링이 드러난다 */
  width: auto;
  height: auto;
  background: #f0e4b8;
}
.fbtn.kko .lbl {
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  background: #FEE500;
  color: #3a1d1d;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.2px;
  white-space: nowrap;    /* 없으면 버튼 폭에 눌려 '상/담' 두 줄로 접힌다 */
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(0,0,0,.28);
  pointer-events: none;                        /* 클릭은 버튼이 받는다 */
}

@media (max-width: 900px) {
  .fbtn.kko .lbl { font-size: 9px; padding: 3px 7px; }
}

/* =====================================================================
 * 칼럼 (/column)
 *
 * 가이드와 같은 .guide-page 뼈대 위에 목록 카드와 본문 서식만 얹는다.
 * 본문은 Markdown 라이브러리가 만든 HTML 이라 태그 종류가 한정돼 있다.
 * ===================================================================== */

.col-meta { color:#7b8a99; font-size:13px; margin:-8px 0 18px; }

/* 목록 카드 */
.col-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:14px 0 8px; }
.col-card { border:1px solid var(--line,#e2e8ef); border-radius:14px; background:#fff; transition:.14s; }
.col-card:hover { border-color:#bcd3e6; box-shadow:0 8px 22px rgba(18,58,92,.10); transform:translateY(-2px); }
.col-card a { display:block; padding:16px 17px; color:inherit; text-decoration:none; }

/* 카드 썸네일 — 그림이 있는 글만. 없으면 지금까지처럼 글자만 나온다.
   overflow 를 카드에 걸어야 위쪽 모서리가 그림에 잘리지 않는다. */
.col-card.has-thumb { overflow:hidden; }
.col-card.has-thumb a { padding-top:0; }
.col-thumb { display:block; margin:0 -17px 13px; background:#f1f5f8; }
.col-thumb img { width:100%; height:158px; object-fit:cover; display:block; }
.col-card h3 { font-size:16px; color:#123a5c; margin:8px 0 7px; line-height:1.45; letter-spacing:-.4px; }
.col-card p { font-size:13.5px; color:#5b6b7c; line-height:1.6; margin:0; }
.col-card time { display:block; margin-top:10px; font-size:12px; color:#93a2b1; }
.col-cat { display:inline-block; background:#eef4fa; border:1px solid #d7e6f2; color:#2e6da4;
           border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:700; }

/* 본문 — 마크다운 출력 */
.col-body { font-size:15.5px; line-height:1.85; color:#2c3846; }
.col-body p { margin:0 0 17px; }
.col-body h2 { font-size:20px; color:#123a5c; margin:36px 0 12px; letter-spacing:-.5px;
               padding-bottom:8px; border-bottom:2px solid #e6eef6; }
.col-body h3 { font-size:17px; color:#123a5c; margin:26px 0 9px; }
.col-body h4 { font-size:15.5px; color:#1d5583; margin:20px 0 7px; }
.col-body ul, .col-body ol { margin:0 0 17px; padding-left:22px; }
.col-body li { margin-bottom:7px; }
.col-body strong { color:#123a5c; }
.col-body code { background:#eef3f8; border:1px solid #dde7f0; border-radius:5px;
                 padding:1px 6px; font-size:13.5px; color:#1d5583; }
.col-body blockquote { margin:0 0 18px; padding:13px 17px; background:#fbf7ee;
                       border-left:4px solid #e8a33d; border-radius:0 10px 10px 0; color:#5a4a2e; }
.col-body blockquote p { margin:0; }
.col-body hr { border:none; border-top:1px solid #e6eef6; margin:30px 0; }
.col-body a { color:#1d5583; text-decoration:underline; text-underline-offset:2px; }

/* 본문 그림 — 폭을 넘지 않게. 도표는 배경을 깔아야 흰 여백이 떠 보이지 않는다 */
.col-body img { display:block; max-width:100%; height:auto; margin:22px auto;
                border:1px solid #e6eef6; border-radius:12px; background:#fff; }

/* 표는 좁은 화면에서 가로로만 스크롤시킨다 — 페이지 전체가 흔들리면 안 된다 */
.col-body .md-table { overflow-x:auto; margin:0 0 18px; }
.col-body table { width:100%; border-collapse:collapse; font-size:14px; min-width:340px; }
.col-body th { background:#f2f7fb; color:#123a5c; font-weight:700; text-align:left;
               padding:10px 12px; border-bottom:2px solid #dde8f2; white-space:nowrap; }
.col-body td { padding:10px 12px; border-bottom:1px solid #eef3f8; vertical-align:top; }

/* FAQ */
.col-faq { display:flex; flex-direction:column; gap:10px; }
.col-q { border:1px solid var(--line,#e2e8ef); border-radius:12px; padding:14px 16px; background:#fff; }
.col-q h3 { font-size:15px; color:#123a5c; margin:0 0 6px; }
.col-q p { margin:0; font-size:14px; color:#4c5b6b; line-height:1.7; }

/* 쪽 넘기기 */
.pager { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:26px 0 0; }
.pager a, .pager span { min-width:34px; text-align:center; padding:7px 10px; border-radius:9px;
                        border:1px solid var(--line,#e2e8ef); font-size:13.5px; text-decoration:none; color:#3c4c5c; }
.pager a:hover { background:#eef4fa; }
.pager .on { background:#123a5c; border-color:#123a5c; color:#fff; font-weight:700; }

/* 분류 칩 선택 상태 — .g-links a 를 그대로 쓰되 현재 분류만 반전 */
.g-links a.on { background:#123a5c; color:#fff; border-color:#123a5c; }

@media (max-width:640px) {
  .col-list { grid-template-columns:1fr; }
  .col-body { font-size:15px; }
}

/* =====================================================================
 * 가이드 진입 구역 · 푸터 링크
 *
 * 상단 메뉴 항목은 대부분 data-act(JS) 라 크롤러가 따라가지 못한다.
 * 여기 있는 것들은 전부 진짜 <a href> 이고, /guide 아래 1,038페이지로
 * 들어가는 유일한 통로다.
 * ===================================================================== */

#guideHub .g-sub-label {
  margin: 22px 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #4a5f73;
  letter-spacing: -.2px;
}
#guideHub .g-sub-label:first-of-type { margin-top: 6px; }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 12px 0 10px;
}
.foot-links a {
  color: #cfe0ec;
  font-size: 13px;
  text-decoration: none;
  opacity: .92;
}
.foot-links a:hover { color: #fff; text-decoration: underline; }

/* =====================================================================
 * 한국어 줄바꿈 (수정요청 260813 §7)
 *
 * 375px 에서 제목이 '해외 제출 서 / 류,' 처럼 단어 중간에서 끊겼다.
 * 브라우저 기본값(break-word 계열)은 한국어를 음절 단위로 쪼갠다.
 * keep-all 은 어절 단위로 끊고, 끊을 데가 없는 긴 영문·URL 만
 * overflow-wrap 이 받아 준다.
 *
 * site.css 는 고객 화면에서만 불린다 (관리자는 admin.css) — 지시대로
 * 관리자 화면에는 적용되지 않는다.
 * ===================================================================== */
body,
button, input, select, textarea,
th, td {
  word-break: keep-all;
  overflow-wrap: break-word;
}


/* =====================================================================
 * 국기 — 이모지가 아니라 이미지
 *
 * Windows 에는 국기 이모지 글꼴이 없다. Segoe UI Emoji 가 지역표시자
 * 조합을 국기로 그리지 않아 🇺🇸 가 빈칸이나 'US' 두 글자로 보인다.
 * 국내 방문자 대다수가 Windows 라 사실상 전부에게 안 보이던 상태였다.
 *
 * 그래서 SVG 를 직접 호스팅해 <img> 로 그린다 (flag-icons, MIT).
 * SVG 가 없는 국가는 이모지가 그대로 남는다 — 맥·모바일에서는 보인다.
 * ===================================================================== */

/* 국기 그리드 카드 안 (큰 국기) */
.flag-card img.fg-img {
  display: block;
  width: 34px;
  height: auto;
  margin: 0 auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
}

/* 글줄 안에 섞여 나오는 국기 */
.fg-inline.fg-img {
  display: inline-block;
  width: 20px;
  height: auto;
  vertical-align: -3px;
  margin-right: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* 제목 안에서는 글자 크기에 맞춰 키운다 */
h1 .fg-inline.fg-img { width: 30px; vertical-align: -4px; }

@media (max-width: 640px) {
  .flag-card img.fg-img { width: 28px; }
}

/* 가이드에서 지정해 넘어온 서류 — 73종 목록에서 눈에 띄게 */
.doc-row.doc-focus {
  background: #fff7f7;
  box-shadow: inset 3px 0 0 var(--brand, #df343d);
  border-radius: 8px;
}

/* =====================================================================
 * '다른 방식으로 시작' 칩 — 한 줄 유지
 *
 * 칩 5개가 1280px 에서는 한 줄에 들어가지만(790/948px), 좁은 데스크톱·
 * 태블릿에서는 접힌다. 접히면 라벨과 칩이 어긋나 보여서 가로로만
 * 밀리게 한다 — 세로로 늘어나 다음 안내를 밀어내는 것보다 낫다.
 *
 * 모바일(640px 이하)은 시안대로 2열 그리드를 그대로 둔다.
 * ===================================================================== */
@media (min-width: 641px) {
  .intake-alt {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    /* 스크롤바가 생겨도 칸이 흔들리지 않게 */
    scrollbar-width: thin;
  }
  .intake-alt .alt-label { flex: 0 0 auto; margin-right: 2px; }
  .intake-alt .altchip {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }
}

/* 개인 / 법인 선택 — 영사인증 요금이 갈리는 나라에서만 나온다 */
.tier-pick { margin:12px 0 4px; padding:12px 14px; border:1px solid #f0dcae;
             background:#fffaf0; border-radius:12px; font-size:13.5px; color:#7a5a12; }
.tier-opts { display:flex; gap:10px; margin-top:9px; flex-wrap:wrap; }
.tier-opt { flex:1 1 220px; display:flex; align-items:center; gap:9px; cursor:pointer;
            padding:11px 13px; border:1.5px solid var(--line); border-radius:10px;
            background:#fff; color:#2c3846; }
.tier-opt.on { border-color:#1d6ba8; box-shadow:0 0 0 3px #dbeafe; }
.tier-opt input { width:16px; height:16px; accent-color:#1d6ba8; flex:none; }
.tier-opt > span { flex:1; line-height:1.45; }
.tier-opt strong { color:var(--navy); white-space:nowrap; font-size:14.5px; }

/* 줄별 납품일 (시안 260813) — 4장 이상은 고객이 희망일을 직접 찍는다 */
.ci-deliv { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#334;
            margin-top:6px; padding:6px 8px; background:#f5f9fd; border:1px solid #e2e8ef; border-radius:8px; }
.ci-wish { border:1px solid #cdd7e0; border-radius:6px; padding:4px 6px; font-size:12px; }

/* ===== 서류 제출 — 신분증·영문명·중문명·발송주소 (시안 260813) ===== */
.sb-idtype { display:flex; flex-wrap:wrap; gap:8px 14px; margin:8px 0 6px; }
.sb-enname { background:#f4f8fc; border:1px solid #d9e5ef; border-radius:8px;
  padding:9px 11px; font-size:12.5px; margin:6px 0; }
.sb-enname input { width:100%; margin-top:6px; border:1px solid #cfd9e2; border-radius:7px;
  padding:8px 10px; font-size:13px; }
.sb-cnopt { display:block; margin:9px 0 0; font-size:12.5px; cursor:pointer; }
.sb-cnbox input { width:100%; margin-top:7px; border:1px solid #cfd9e2; border-radius:7px;
  padding:8px 10px; font-size:13px; }
.sb-addr { margin-top:8px; background:#fff; border:1px dashed #d3b98a; border-radius:8px;
  padding:9px 11px; font-size:12.5px; line-height:1.65; color:#5a4a2a; }

/* 견적 확인용 안내 — 복합기 경고와 구분되게 노란 계열로 둔다 */
.submit-box .sb-warn.sb-warn-first { background:#fff4e0; border-color:#e8c88a; color:#6b5417; }

/* ===== 진행 절차 단계 상세 (개선의견 09-⑦) =====
   카드를 button 으로 바꿨으므로 브라우저 기본 버튼 모양을 지운다.
   ⚠️ 선택자에 #processSection 을 붙여야 한다 — 기존 #processSection .stepcard
   (ID 선택자)가 클래스만으로는 이기지 못한다. */
#processSection .stepcard { display:block; width:100%; border:1px solid var(--line,#e2e8ef);
  font:inherit; color:inherit; cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:border-color .14s, box-shadow .14s, transform .14s; }
#processSection .stepcard:hover { border-color:#bcd3e6; box-shadow:0 8px 22px rgba(18,58,92,.10); }
#processSection .stepcard .more { padding:10px 19px 0; font-size:13px; font-weight:700;
  color:var(--brand,#df343d); }
#processSection .stepcard.active { border-color:var(--brand,#df343d);
  box-shadow:0 0 0 3px rgba(223,52,61,.12); }
#processSection .stepcard.active .more { color:#7a1f25; }
#processSection .stepcard.active .more::after { content:' (닫기)'; font-weight:600; }

.steppanel { margin-top:14px; border:1px solid #dbe4ec; border-radius:14px; background:#fff;
  box-shadow:0 8px 22px rgba(18,58,92,.07); overflow:hidden; }
.steppanel .sp-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 16px; background:#f2f7fb; border-bottom:1px solid #dbe4ec; }
.steppanel .sp-no { width:26px; height:26px; border-radius:50%; background:var(--brand,#df343d);
  color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.steppanel .sp-h b { font-size:16px; color:#123a5c; }
.steppanel .sp-meta { font-size:12.5px; color:#5b6b7d; background:#fff; border:1px solid #dbe4ec;
  border-radius:999px; padding:3px 10px; }
.steppanel .sp-x { margin-left:auto; border:0; background:transparent; cursor:pointer;
  font-size:15px; color:#7a8794; padding:4px 6px; }
.steppanel .sp-b { padding:15px 17px; font-size:14.5px; line-height:1.75; color:#2c3846; }
.steppanel .sp-b b { color:#123a5c; }

@media(max-width:640px){
  #processSection .stepcard .more { font-size:14px; }
  .steppanel .sp-b { font-size:15px; }
}

/* 진행 조회 담당자 (개선의견 09-⑥) — 누구에게 물어야 하는지 */
.mp-staff { margin:8px 0 0; padding:9px 12px; border-radius:9px; background:#f2f7fb;
  border:1px solid #d8e6f2; font-size:13px; color:#28425a; }
.mp-staff b { color:#0f3d5c; }
.mp-staff a { color:#1d5686; font-weight:700; }

/* ===== 완성본 샘플 (개선의견 09-⑧) ===== */
.dr-act { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.btn.wire.xs { padding:5px 10px; font-size:12px; min-height:32px; background:#fff;
  border:1.5px solid #cfd9e2; color:#41586c; }
.btn.wire.xs:hover { border-color:var(--navy,#123a5c); color:var(--navy,#123a5c); }

.sm-head { font-size:13.5px; font-weight:700; color:#0f3d5c; padding-bottom:10px;
  border-bottom:1px solid #e3ebf2; margin-bottom:12px; }
.sm-list { display:grid; gap:10px; }
.sm-page { display:grid; grid-template-columns:34px 92px 1fr; gap:12px; align-items:center;
  border:1px solid #dde5ec; border-radius:11px; padding:10px 12px; background:#fff; cursor:pointer;
  transition:border-color .14s, box-shadow .14s; }
.sm-page:hover { border-color:#9cc0e0; box-shadow:0 4px 14px rgba(18,58,92,.10); }
.sm-page.off { cursor:default; background:#fafbfc; }
.sm-page.off:hover { border-color:#dde5ec; box-shadow:none; }
.sm-no { width:28px; height:28px; border-radius:50%; background:#0f3d5c; color:#fff;
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.sm-img img { width:92px; height:64px; object-fit:cover; border-radius:7px; border:1px solid #e0e6ec;
  display:block; background:#f3f5f7; }
.sm-wait { width:92px; height:64px; border-radius:7px; border:1px dashed #cfd8e0; background:#f5f7f9;
  display:flex; align-items:center; justify-content:center; font-size:11px; color:#8a97a4;
  text-align:center; line-height:1.35; }
.sm-txt b { font-size:14px; color:#1a2a38; }
.sm-from { display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700; color:#4a5c6b;
  background:#eef3f8; border:1px solid #dbe4ec; border-radius:4px; padding:1px 6px; }
.sm-desc { font-size:12.5px; color:#5b6b7a; line-height:1.55; margin-top:3px; }

.sm-zoom { position:fixed; inset:0; background:rgba(12,24,36,.72); z-index:140;
  display:none; align-items:center; justify-content:center; padding:20px; }
.sm-zoom-in { background:#fff; border-radius:14px; max-width:760px; width:100%;
  max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
.sm-zoom-h { display:flex; align-items:center; gap:10px; padding:12px 15px;
  border-bottom:1px solid #e3ebf2; background:#f4f8fb; }
.sm-zoom-h b { color:#0f3d5c; font-size:15px; }
.sm-x { margin-left:auto; border:0; background:transparent; font-size:16px; cursor:pointer; color:#7a8794; }
.sm-zoom-in img { flex:1; min-height:0; width:100%; object-fit:contain; background:#eef1f4; }
.sm-zoom-f { display:flex; align-items:center; gap:12px; padding:11px 15px;
  border-top:1px solid #e3ebf2; }
.sm-zoom-f .sm-desc { flex:1; margin:0; text-align:center; }
.sm-zoom-f .btn[disabled] { opacity:.4; cursor:default; }

@media(max-width:600px){
  .sm-page { grid-template-columns:28px 72px 1fr; gap:9px; }
  .sm-img img, .sm-wait { width:72px; height:52px; }
  .sm-zoom { padding:10px; }
  .sm-zoom-f { flex-wrap:wrap; }
  .sm-zoom-f .sm-desc { order:3; flex-basis:100%; }
}

/* 완료본 스캔 링크 (개선의견 09-⑥) */
.mp-scan { display:inline-block; margin:6px 8px 0 0; padding:6px 11px; border-radius:8px;
  background:#fff; border:1px solid #cfe6d6; color:#1e7a3d; font-size:12.5px; font-weight:700;
  text-decoration:none; }
.mp-scan:hover { background:#eef7f0; }

/* 샘플 안내 문구 (시안 ds-note · ds-src) */
.sm-note { font-size:13px; line-height:1.65; color:#33465a; background:#f4f8fb;
  border:1px solid #dbe7f1; border-radius:9px; padding:10px 12px; margin:0 0 12px; }
.sm-src { font-size:12.5px; line-height:1.65; color:#4d5f70; margin:12px 0 0;
  padding-top:10px; border-top:1px solid #e8edf2; }

/* ===== 260917 통합노트 10번 — 장바구니 공증방법 잘림 =====
   공증방법 줄에만 안내(.cnote)가 같은 줄에 들어가 선택 상자를 43px 로 밀어냈다.
   안내는 아래 줄로 내리고, 라벨은 「번역 원문 장수」가 한 줄에 들어가게 넓힌다. */
.ci-field { flex-wrap:wrap; }
.ci-field label { flex:0 0 96px; }
.ci-field select { flex:1 1 160px; min-width:0; }
.ci-field .cnote { flex:0 0 100%; margin:2px 0 0 104px; }
@media (max-width:480px) { .ci-field label { flex-basis:86px; } .ci-field .cnote { margin-left:0; } }

/* ===== 260917 통합노트 5번 — 모달이 떠 있어도 상단 메뉴를 누를 수 있게 =====
   모달 배경(z-index 100)이 상단바(80)를 덮어 메뉴가 먹지 않았다.
   배경을 상단바 아래에서 시작한다. 메뉴를 누르면 모달은 스크립트가 닫는다. */
.modal-bg { top:64px; }
@media (max-width:900px) { .modal-bg { top:60px; } }
.checkout-backs { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }