:root{--pri:#2563eb;--pri-d:#1d4ed8;--bg:#f8fafc;--sf:#fff;--tx:#0f172a;--tx2:#64748b;--bd:#e2e8f0;--r:12px}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:'Inter','Pretendard',sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;padding:12px}
.container{max-width:860px;margin:0 auto;background:var(--sf);padding:24px;border-radius:var(--r);box-shadow:0 4px 6px -1px rgb(0 0 0/.1)}
h1{font-size:1.5rem;font-weight:700;margin-bottom:20px;line-height:1.3}
h2{font-size:1.2rem;margin-top:28px;margin-bottom:14px;border-bottom:2px solid var(--bd);padding-bottom:8px}
h3{font-size:1rem;margin-top:20px;margin-bottom:8px}
.summary{background:#eff6ff;border-left:4px solid var(--pri);padding:16px;margin-bottom:24px;border-radius:0 var(--r) var(--r) 0}
.summary ul{list-style:none}.summary li{font-size:.95rem;font-weight:600;color:var(--pri-d);margin-bottom:4px}
.summary li::before{content:'✓ '}
table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.8rem}
table caption{text-align:right;font-size:.75rem;color:var(--tx2);margin-bottom:6px;font-weight:500}
th,td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--bd)}
th:first-child,td:first-child{text-align:left}
th{background:#f1f5f9;font-weight:600;color:var(--tx2);position:sticky;top:0}
tr:hover{background:#f8fafc}
.highlight-row{background:#eff6ff!important;font-weight:600}
.meth{font-size:.82rem;color:var(--tx2);background:#f8fafc;padding:16px;border-radius:8px;border:1px solid var(--bd);margin-top:16px}
.meth ul{margin-left:16px;margin-top:8px}
.nav-links{margin-top:32px;padding-top:16px;border-top:1px solid var(--bd);display:flex;gap:8px;flex-wrap:wrap}
.nav-links a{color:var(--pri);text-decoration:none;font-size:.8rem;padding:6px 12px;border:1px solid var(--pri);border-radius:20px;transition:all .2s}
.nav-links a:hover{background:var(--pri);color:#fff}
.calc-wrap{margin-bottom:24px}
.calc-wrap summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#eff6ff,#e0f2fe);border:1px solid #bfdbfe;padding:14px 16px;border-radius:var(--r);font-weight:700;font-size:.95rem;color:var(--pri-d);transition:background .2s}
.calc-wrap summary::-webkit-details-marker{display:none}
.calc-wrap summary::before{content:'▶';font-size:.7rem;transition:transform .2s;display:inline-block}
.calc-wrap[open] summary::before{transform:rotate(90deg)}
.calc-wrap summary:hover{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.calc-wrap .calc-summary-result{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--pri)}
.calc-box{background:linear-gradient(135deg,#eff6ff,#e0f2fe);border:1px solid #bfdbfe;border-top:none;padding:16px;border-radius:0 0 var(--r) var(--r)}
.calc-wrap[open] summary{border-radius:var(--r) var(--r) 0 0}
.calc-box label{font-weight:600;margin-right:4px;font-size:.9rem}
.calc-box input,.calc-box select,.calc-box button{padding:8px 10px;border:1px solid var(--bd);border-radius:8px;font-size:.9rem;margin:4px}
.calc-box input,.calc-box select{width:160px}
.calc-box button{background:var(--pri);color:#fff;border:none;cursor:pointer;font-weight:600;padding:8px 16px}
.calc-box button:hover{background:var(--pri-d)}
#calc-result{margin-top:10px;font-weight:600;color:var(--pri-d);font-size:.9rem}
.formula{background:#fefce8;border:1px solid #fde68a;padding:14px 16px;border-radius:8px;margin-top:16px;font-size:.82rem;line-height:1.8}
.formula code{background:#fef3c7;padding:2px 4px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.78rem}
.raw-table-wrap{max-height:600px;overflow:auto;border:1px solid var(--bd);border-radius:8px;margin-top:16px;-webkit-overflow-scrolling:touch}
.raw-table-wrap table{margin-bottom:0;min-width:700px}
.left-align{text-align:left!important}
.legal{background:#fef2f2;border:1px solid #fecaca;padding:16px;border-radius:8px;margin-top:24px;font-size:.8rem;color:#991b1b;line-height:1.7}
.legal h3{color:#991b1b;margin-top:0}
.breadcrumbs{font-size:.8rem;color:var(--tx2);margin-bottom:16px}
.breadcrumbs a{color:var(--pri);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.index-card{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;padding:20px;border-radius:var(--r);margin-bottom:24px;display:flex;justify-content:space-between;align-items:center}
.index-label{font-weight:700;color:var(--tx);font-size:1.05rem}
.index-value{font-size:2rem;font-weight:800;color:var(--pri-d)}
.ai-badge{background:#f8fafc;border:1px solid var(--bd);padding:12px 16px;border-radius:8px;margin-top:24px;font-size:.8rem;color:var(--tx2);line-height:1.5;display:flex;align-items:center;gap:8px}
.ai-badge-icon{font-size:1.15rem}
.ai-badge-text{font-weight:500}
.ai-badge span[id^="count-"]{font-weight:700;color:var(--tx)}
.key-summary{background:#f8fafc;border-left:4px solid var(--pri);padding:16px;margin-bottom:20px;border-radius:0 var(--r) var(--r) 0;font-size:.88rem}
.key-summary-title{font-weight:700;color:var(--tx);margin-bottom:10px;font-size:.95rem;display:flex;align-items:center;gap:6px}
.key-summary ul{list-style:none}
.key-summary li{margin-bottom:8px;line-height:1.6;position:relative;padding-left:14px}
.key-summary li::before{content:"•";position:absolute;left:0;color:var(--pri)}
.key-summary li strong{color:var(--tx)}
.usage-guide ul{list-style:none}
.usage-guide li{margin-bottom:6px;position:relative;padding-left:14px}
.company-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.company-cell img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  object-fit: contain;
  background: #fff;
}
.logo-fallback {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--pri);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gender-switch { display:flex; gap:6px; justify-content:center; margin-bottom:10px; }
.gs { padding:6px 18px; border:1px solid var(--bd); border-radius:6px; background:var(--bg); cursor:pointer; font-size:.85rem; }
.gs.active { background:var(--pri); color:#fff; border-color:var(--pri); }
@media(max-width:640px){
  body{padding:8px}
  .container{padding:16px;border-radius:8px}
  h1{font-size:1.25rem}
  h2{font-size:1.05rem}
  table{font-size:.72rem}
  th,td{padding:6px 4px}
  .calc-wrap summary{padding:12px 14px;font-size:.88rem}
  .calc-box{padding:12px}
  .calc-box input,.calc-box select,.calc-box button{padding:8px;font-size:.85rem;width:100%;margin:4px 0}
  .calc-box div{display:flex;flex-direction:column}
  .nav-links a{font-size:.75rem;padding:5px 10px}
  .summary li{font-size:.85rem}
  .raw-table-wrap{max-height:400px}
  .index-card{flex-direction:column;gap:10px;text-align:center}
  .index-value{font-size:1.75rem}
}
/* AI Chatbot Widget Styling */
.chat-widget { display: none; /* 임시 비활성화 대기 상태 - 활성화하려면 'display: none;'을 삭제하세요 */ position:fixed; bottom:20px; right:20px; z-index:9999; font-family:inherit }
.chat-btn { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 24px rgb(37 99 235/.35); transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); border:none; outline:none }
.chat-btn:hover { transform:scale(1.08) rotate(5deg); box-shadow:0 12px 28px rgb(37 99 235/.5) }
.chat-btn svg { width:26px; height:26px; fill:currentColor; transition:transform .3s }
.chat-btn.active svg { transform:rotate(90deg) }
.chat-window { position:fixed; bottom:90px; right:20px; width:360px; height:500px; background:rgba(255,255,255,0.95); border:1px solid rgba(15,23,42,0.08); border-radius:16px; box-shadow:0 12px 36px rgba(0,0,0,0.15); display:flex; flex-direction:column; overflow:hidden; transform:scale(0.9) translateY(20px); opacity:0; pointer-events:none; transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.chat-window.active { transform:scale(1) translateY(0); opacity:1; pointer-events:auto }
.chat-header { background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between }
.chat-title { font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:8px }
.chat-status-dot { width:8px; height:8px; border-radius:50%; background:#10b981; display:inline-block; animation:pulse 2s infinite }
@keyframes pulse { 0% { transform:scale(0.95); box-shadow:0 0 0 0 rgba(16,185,129,0.7) } 70% { transform:scale(1); box-shadow:0 0 0 6px rgba(16,185,129,0) } 100% { transform:scale(0.95); box-shadow:0 0 0 0 rgba(16,185,129,0) } }
.chat-close { background:none; border:none; color:rgba(255,255,255,0.8); cursor:pointer; font-size:1.2rem; transition:color .2s }
.chat-close:hover { color:#fff }
.chat-body { flex:1; padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; font-size:.85rem; scrollbar-width:thin }
.chat-msg { max-width:85%; padding:10px 14px; border-radius:12px; line-height:1.5; word-break:break-word; box-shadow:0 2px 4px rgba(0,0,0,0.02) }
.chat-msg.bot { background:#f1f5f9; color:#0f172a; align-self:flex-start; border-top-left-radius:2px }
.chat-msg.user { background:#2563eb; color:#fff; align-self:flex-end; border-top-right-radius:2px }
.chat-input-area { padding:14px 20px; border-top:1px solid #e2e8f0; display:flex; gap:8px; background:#fff; align-items:center }
.chat-input { flex:1; border:1px solid #cbd5e1; padding:10px 14px; border-radius:24px; font-size:.85rem; outline:none; transition:border-color .2s; font-family:inherit }
.chat-input:focus { border-color:#2563eb }
.chat-send { width:36px; height:36px; border-radius:50%; background:#2563eb; border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; outline:none }
.chat-send:hover { background:#1d4ed8 }
.chat-send svg { width:16px; height:16px; fill:currentColor }
.chat-loader { display:flex; align-items:center; gap:4px; padding:8px 12px; background:#f1f5f9; border-radius:12px; width:fit-content; align-self:flex-start; border-top-left-radius:2px }
.chat-loader-dot { width:6px; height:6px; background:#94a3b8; border-radius:50%; animation:bounce 1.4s infinite ease-in-out both }
.chat-loader-dot:nth-child(1) { animation-delay:-0.32s }
.chat-loader-dot:nth-child(2) { animation-delay:-0.16s }
@keyframes bounce { 0%, 80%, 100% { transform:scale(0) } 40% { transform:scale(1) } }
@media(max-width:640px) {
  .chat-window {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: -webkit-fill-available !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    transform: translateY(100%) !important;
    opacity: 1 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .chat-window.active {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  .chat-header {
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
  }
  .chat-input-area {
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .chat-input {
    font-size: 16px !important;
  }
  .chat-body {
    overscroll-behavior: contain !important;
  }
}
.chat-settings-panel { position:absolute; top:50px; left:0; width:100%; height:calc(100% - 50px); background:#fff; z-index:10; display:flex; flex-direction:column; padding:20px; transition:transform 0.3s ease; transform:translateY(100%); pointer-events:none; box-sizing:border-box; }
.chat-settings-panel.active { transform:translateY(0)!important; pointer-events:auto!important }