* { box-sizing: border-box; }
    :root {
      --bg: #f6f7fb;
      --text: #111827;
      --muted: #6b7280;
      --line: #e5e7eb;
      --soft: #f9fafb;
      --main: #111827;
      --green: #22c55e;
      --red: #dc2626;
      --blue: #2563eb;
      --orange: #f97316;
      --purple: #7c3aed;
    }
    body { margin: 0; font-family: Arial, 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; word-break: keep-all; overflow-wrap: break-word; }
    .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 24px; }
    header { text-align: center; margin-bottom: 24px; }
    h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: -0.04em; }
    .sub-text { margin: 0; color: var(--muted); font-size: 15px; }
    .card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 8px 20px rgba(17,24,39,.035); margin-bottom: 22px; }
    .card h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -0.02em; }
    .card h3 { margin: 18px 0 10px; font-size: 16px; }
    .top-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
    .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .two-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
    input, select, button { width: 100%; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 12px; font-size: 15px; background: #fff; line-height: 1.45; }
    input[type="checkbox"], input[type="radio"] { width: auto; margin-right: 8px; }
    .time-input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
    .input-with-unit { display: flex; align-items: center; gap: 8px; }
    .input-with-unit input { flex: 1; min-width: 0; }
    .unit-label { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-weight: 800; }
    .field-help { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.4; }
    .recommend-badge { display:inline-flex; align-items:center; padding:3px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; font-weight:900; margin-left:6px; }
    .option-hint { margin-top: 10px; padding: 10px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--line); color: #475569; font-size: 12px; }
    .minimum-wage-box { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f0f9ff; border: 1px solid #bae6fd; color: #075985; font-size: 13px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; }
    .minimum-wage-box strong { font-size: 15px; color:#0c4a6e; }
    .minimum-wage-box button { width:auto; padding:7px 10px; font-size:12px; border-radius:999px; background:#0369a1; color:#fff; }
    #calendarBuildBtn.applied { background:#16a34a; color:#fff; box-shadow:0 8px 18px rgba(22,163,74,.22); }
    .pay-option-card { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-top: 12px; }
    .pay-option-card .check-row { margin: 0; }
    button { border: none; background: var(--main); color: #fff; font-weight: 800; cursor: pointer; transition: .15s ease; border-radius: 12px; }
    button:hover { transform: translateY(-1px); opacity: .92; }
    button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
    .calculate-btn {
      margin-top: 18px;
      padding: 16px 18px;
      border-radius: 16px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #fff;
      font-size: 19px;
      font-weight: 950;
      letter-spacing: -0.02em;
      box-shadow: 0 12px 24px rgba(220, 38, 38, .25);
    }
    .calculate-btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 16px 28px rgba(220, 38, 38, .32); }
    .dirty-notice { display:none; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; font-size:14px; font-weight:950; line-height:1.45; }
    .dirty-notice.show { display:block; }
    .calculate-btn.dirty { background: linear-gradient(135deg, #dc2626, #991b1b); box-shadow: 0 14px 28px rgba(220, 38, 38, .36); animation: dirtyPulse 1.15s ease-in-out infinite alternate; }
    .last-calculated { min-height:18px; margin: 8px 2px 0; color:#6b7280; font-size:12px; font-weight:800; text-align:right; }
    @keyframes dirtyPulse { from { filter:saturate(1); } to { filter:saturate(1.25); } }
    .result-tools-after { margin-top: 14px; }
    .soft-btn { background: #eef2ff; color: var(--text); }
    .danger-btn { background: #fee2e2; color: #991b1b; }
    .purple-btn { background: var(--purple); color: #fff; }
    .ghost-btn { background: #fff; color: var(--text); border: 1px solid var(--line); }
    .mode-pill { display: inline-block; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: #ecfeff; color: #155e75; margin-bottom: 12px; }
    .next-day-pill { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 900; margin-top: 8px; }
    .icon-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
    .day-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #f3f4f6; font-size: 13px; }
    .text-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 2px 7px; border-radius: 999px; background: #eef2ff; color: #334155; font-size: 11px; font-weight: 800; line-height: 1.2; vertical-align: 1px; }
    .text-day-chip { min-width: auto; height: 22px; padding: 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 0; }
    .calendar-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
    .legend-item { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
    .calendar-help-note { margin:10px 0 0; padding:0 2px; color:#6b7280; font-size:12px; font-weight:700; line-height:1.55; }
    .main-calendar-area { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
    .main-calendar-main { min-width: 0; }
    .main-calendar-color-guide { position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.035); }
    .main-calendar-color-guide h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: -0.02em; }
    .guide-help { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .guide-section { margin-top: 11px; }
     .guide-section-title { font-size: 12px; font-weight: 950; color: #374151; margin-bottom: 6px; }
    .guide-section-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
    .guide-section-title-row .guide-section-title { margin-bottom:0; }
    .guide-add-btn { width:26px; height:26px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#eef2ff; color:#1d4ed8; border:1px solid #bfdbfe; font-size:16px; font-weight:950; line-height:1; box-shadow:none; flex:0 0 auto; }
    .guide-add-btn:hover { transform:translateY(-1px); opacity:1; background:#dbeafe; }
    .guide-add-btn.allowance { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
    .guide-add-btn.allowance:hover { background:#ffedd5; }
    .guide-items { display: grid; gap: 6px; }
    .guide-item { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: #374151; padding: 6px 8px; border: 1px solid #eef2f7; border-radius: 999px; background: #f8fafc; }
    .guide-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .schedule-bg-swatch { width: 24px; height: 16px; border-radius: 6px; background: var(--swatch-bg); border: 2px solid var(--swatch-border); flex: 0 0 auto; }
    .guide-empty { color: var(--muted); font-size: 12px; padding: 8px; background: #f9fafb; border-radius: 12px; }
    .day-detail-box { display: none; margin-top: 12px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
    .day-detail-box.show { display: block; }
    .work-layout { margin-top: 16px; }
    .work-calendar-column { min-width: 0; }
    .edit-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; align-items: start; }
    .edit-main { min-width: 0; }
    .side-panel-note { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
    .side-mini-box { padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
    .side-mini-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 900; margin-bottom: 8px; }
    .side-mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .side-mini-weekday { text-align: center; font-size: 10px; color: var(--muted); font-weight: 900; padding: 2px 0; }
    .side-mini-day { min-height: 34px; padding: 3px 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font-size: 11px; font-weight: 900; position: relative; overflow:hidden; }
    .side-mini-day.empty { border: none; background: transparent; cursor: default; }
    .side-mini-day.work { background: var(--mini-work-bg, #f0fdf4); border-color: var(--mini-work-border, #86efac); }
    .side-mini-day.selected { outline: 2px solid var(--main); box-shadow: inset 0 0 0 1px #fff; }
    .side-mini-day.holiday { color: var(--red); }
    .side-mini-day.saturday { color: var(--blue); }
    .side-mini-dots { position:absolute; left:3px; right:3px; bottom:3px; display:flex; justify-content:center; gap:2px; flex-wrap:nowrap; }
    .side-mini-dot { width:4px; height:4px; border-radius:999px; background: var(--dot-color, var(--green)); }

    .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .detail-item { padding: 9px; border-radius: 12px; background: var(--soft); font-size: 13px; }
    .detail-item strong { display: block; font-size: 15px; margin-top: 2px; }
    .detail-item.good { background:#f0fdf4; border:1px solid #bbf7d0; }
    .detail-item.warn { background:#fff7ed; border:1px solid #fed7aa; }
    .detail-note { margin-top:10px; padding:10px; border-radius:12px; background:#f8fafc; border:1px solid var(--line); font-size:12px; color:#475569; }
    .work-summary { margin-top: 7px; font-size: 11px; font-weight: 950; color: #166534; background: #dcfce7; border-radius: 999px; padding: 3px 5px; display: block; white-space: nowrap; overflow: visible; text-overflow: clip; max-width: 100%; letter-spacing: -0.55px; text-align: center; }
    .main-calendar-title { display:flex; align-items:center; justify-content:center; gap:8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background:#f8fafc; border:1px solid var(--line); font-size:18px; font-weight:950; color:var(--text); }
    .main-calendar-title small { font-size:12px; color:var(--muted); font-weight:800; }
    .weekdays, .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
    .weekday { text-align: center; color: var(--muted); font-size: 13px; font-weight: 800; padding: 6px 0; }
    .day { min-height: 118px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 11px; cursor: pointer; position: relative; overflow: hidden; }
    .day:hover { border-color: var(--main); transform: translateY(-1px); }
    .day.empty { background: transparent; border: none; cursor: default; }
    .day-number { font-weight: 900; font-size: 16px; }
    .sunday .day-number, .holiday .day-number { color: var(--red); }
    .saturday .day-number { color: var(--blue); }
    .day.active-work { background: #f0fdf4; border-color: var(--green); }
    .day.pattern-work { background: var(--pattern-bg, #f0fdf4); border-color: var(--pattern-border, var(--green)); }
    .day.selected { outline: 2px solid #111827; outline-offset: 2px; }
    .work-badge, .night-mini { display: inline-block; margin-top: 7px; padding: 4px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; }
    .work-badge { background: #dcfce7; color: #166534; }
    .night-mini { background: #e0f2fe; color: #075985; }
    .holiday-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; background: #fee2e2; color: #991b1b; padding: 3px 5px; border-radius: 999px; }
    .allowance-dots { position: absolute; left: 10px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 20px); }
    .color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--dot-color); box-shadow: 0 0 0 2px rgba(255,255,255,.9); flex: 0 0 auto; }
    .color-palette { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; }
    .color-choice { width: 30px; height: 30px; padding: 0; border-radius: 999px; background: var(--dot-color); border: 3px solid #fff; box-shadow: 0 0 0 1px #d1d5db; }
    .color-choice.selected { box-shadow: 0 0 0 3px #111827; }
    .color-dot.big { width: 14px; height: 14px; box-shadow: none; margin-right: 6px; vertical-align: -2px; }
    .option-box { padding: 16px; border: 1px solid var(--line); border-radius: 14px; margin-top: 14px; background: #fff; }
    .check-row, .radio-row { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 14px; }
    .info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e5e7eb; color: #374151; font-size: 12px; font-weight: 900; margin-left: 4px; cursor: help; position: relative; }
    .info:hover::after, .info:focus::after { content: attr(data-tip); position: absolute; left: 22px; top: -8px; z-index: 20; width: 280px; white-space: normal; background: var(--main); color: white; padding: 10px; border-radius: 10px; font-size: 12px; font-weight: 500; line-height: 1.45; box-shadow: 0 10px 25px rgba(0,0,0,.18); }
    .edit-panel { display: none; margin-top: 16px; padding: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 16px; }
    .edit-panel.show { display: block; }
    .selected-day-title { padding: 12px; background: var(--main); color: #fff; border-radius: 12px; margin-bottom: 14px; font-weight: 900; }
    .quick-weekday-card { max-width: none; margin-left: 0; margin-right: 274px; }
    .weekday-buttons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
    .weekday-buttons button { padding: 10px 4px; font-size: 13px; background: #eef2ff; color: var(--text); border:1px solid #dbeafe; border-radius:12px; box-shadow:none; }
    .allowance-list { margin-top: 14px; display: grid; gap: 12px; }
    .allowance-card { padding: 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 16px; font-size: 13px; }
    .allowance-card.open { background:#fff; border-color:#c7d2fe; box-shadow:0 8px 22px rgba(17,24,39,.06); }
    .allowance-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .allowance-actions .soft-btn { width:auto; padding:8px 10px; font-size:12px; }
    .allowance-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .allowance-title { font-size: 15px; font-weight: 900; display: flex; align-items: center; gap: 4px; }
    .allowance-meta { color: var(--muted); margin-top: 3px; }
    .chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .date-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 800; }
    .chip-x { border: none; background: #fee2e2; color: #991b1b; width: 18px; height: 18px; padding: 0; border-radius: 999px; font-size: 12px; line-height: 18px; }
    .x-btn { width: 32px; height: 32px; padding: 0; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: 16px; flex: 0 0 auto; }
    .date-picker-box { margin-top: 12px; padding: 12px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 14px; }
    .mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
    .mini-weekday { text-align: center; font-size: 11px; color: var(--muted); font-weight: 900; }
    .mini-day { min-height: 42px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font-size: 12px; font-weight: 900; }
    .mini-day.empty { border: none; background: transparent; cursor: default; }
    .mini-day.no-work { opacity: .35; background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
    .mini-day.selected { color: #fff; background: var(--dot-color); border-color: var(--dot-color); }
    .mini-day:hover:not(.empty):not(.no-work) { transform: translateY(-1px); }
    .result-box { margin-top: 16px; background: var(--soft); border-radius: 14px; padding: 16px; }
    .result-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); gap: 12px; }
    .result-line:last-child { border-bottom: none; }
    .result-total { font-size: 22px; font-weight: 900; color: var(--text); }
    .result-total strong { color: var(--red); font-size: 26px; }
    .muted { color: var(--muted); font-size: 13px; }
    .warning { margin-top: 12px; padding: 13px 14px; background: #f9fafb; border: 1px solid var(--line); color: #4b5563; border-radius: 12px; font-size: 13px; line-height: 1.55; }
    .small-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.55; }
    .draft-save-note { margin: 10px auto 0; color: #94a3b8; font-size: 12px; line-height: 1.45; text-align: center; }
    .mini-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 12px; }
    .table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
    .detail-table { width: 100%; border-collapse: collapse; min-width: 920px; font-size: 13px; }
    .detail-table th, .detail-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
    .detail-table th:first-child, .detail-table td:first-child { text-align: left; }
    .detail-table th { background: #f3f4f6; font-size: 12px; color: #374151; }
    .detail-table tr:last-child td { border-bottom: none; }
    .notice-list { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
    .notice-list li { margin: 4px 0; }
    .save-state { margin-top: 8px; color: var(--muted); font-size: 13px; }
    .csv-btn-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 12px; }
    .hidden { display: none !important; }

    .top-save-bar { margin-top: 12px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; align-items:center; }
    .top-save-bar button { width:auto; padding:7px 10px; font-size:12px; border-radius:999px; }
    .top-save-bar .save-state { margin:0; font-size:12px; color:var(--muted); }
    .collapsible-box { border:1px solid var(--line); border-radius:16px; background:#fff; margin-top:12px; overflow:hidden; }
    .collapsible-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; background:#f8fafc; color:var(--text); border:none; border-radius:0; text-align:left; }
    .collapsible-head .head-main { display:flex; align-items:center; gap:10px; min-width:0; }
    .collapsible-head:hover { transform:none; opacity:1; }
    .collapsible-head strong { display:block; font-size:15px; }
    .collapsible-head span { display:block; margin-top:3px; color:var(--muted); font-size:12px; font-weight:500; }
    .collapsible-arrow { width:42px; height:42px; min-width:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#111827; color:#fff; font-size:25px; line-height:1; box-shadow:0 6px 16px rgba(17,24,39,.16); }
    .collapsible-body { display:none; padding:14px; border-top:1px solid var(--line); }
    .collapsible-box.open .collapsible-body { display:block; }
    .header-tools { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; margin-top:12px; }
    .share-box { margin-top:10px; display:none; }
    .share-box.show { display:block; }
    .share-box textarea { width:100%; min-height:74px; border:1px solid #d1d5db; border-radius:12px; padding:10px; resize:vertical; font-size:12px; }
    .tool-note { margin-top:8px; font-size:12px; color:var(--muted); }
    .share-toggle-btn.open { background:#111827; color:#fff; }
    .kakao-share-btn { background:#fee500; color:#111827; }

    .result-summary-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
    .result-summary-card { padding: 15px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(17,24,39,.04); }
    .result-summary-card.primary { background: #fff1f2; border-color: #fecdd3; }
    .result-summary-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; margin-bottom: 5px; }
    .result-summary-card strong { display: block; font-size: 20px; font-weight: 950; letter-spacing: -0.03em; }
    .result-summary-card.primary strong { color: var(--red); font-size: 25px; }
    .result-guide { margin: 12px 0 0; padding: 12px; border-radius: 14px; background:#f8fafc; border:1px solid var(--line); color:#475569; font-size:12px; line-height:1.55; }
    .result-guide strong { color:#111827; }
    .standard-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:#e0f2fe; color:#075985; font-size:11px; font-weight:950; margin-top:6px; }
    .mobile-test-note { margin-top: 10px; padding: 10px; border-radius: 12px; background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; font-size:12px; }
    .pc-guide-note { display:block; margin:12px auto 0; max-width:760px; padding:11px 12px; border-radius:14px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:13px; font-weight:800; line-height:1.45; }
    .mobile-guide-note { display:none; margin:12px auto 0; max-width:680px; padding:11px 12px; border-radius:14px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; font-size:13px; font-weight:800; line-height:1.45; }
    .mobile-allowance-toggle { display:none; width:100%; margin:10px 0 0; padding:14px; border-radius:14px; background:#111827; color:#fff; font-size:15px; align-items:center; justify-content:space-between; gap:10px; }
    .mobile-allowance-body { display:block; }
    .mobile-allowance-legend { display:none; margin-top:10px; padding:10px; border-radius:14px; background:#fff; border:1px solid var(--line); font-size:12px; color:#374151; }
    .mobile-allowance-legend-title { font-weight:950; margin-bottom:7px; }
    .mobile-allowance-legend-items { display:flex; flex-wrap:wrap; gap:7px; }
    .mobile-allowance-item { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; background:#f8fafc; border:1px solid #eef2f7; font-weight:800; }

    .day-detail-tooltip { position: fixed; z-index: 9999; width: 320px; max-width: calc(100vw - 24px); background:#111827; color:#fff; border-radius:16px; padding:12px; box-shadow:0 16px 36px rgba(0,0,0,.28); font-size:12px; line-height:1.45; pointer-events:none; display:none; }
    .day-detail-tooltip.show { display:block; }
    .day-detail-tooltip strong { display:block; font-size:14px; margin-bottom:8px; color:#fff; }
    .day-detail-tooltip .tip-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .day-detail-tooltip .tip-item { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:7px; }
    .day-detail-tooltip .tip-item b { display:block; margin-top:2px; font-size:13px; color:#fff; }
    .day-detail-tooltip .tip-note { margin-top:8px; color:#d1d5db; font-size:11px; }
    body.pc-detail-hover #editPanel { display:none !important; }

    .mobile-day-sheet-backdrop { position:fixed; inset:0; z-index:9998; background:rgba(15,23,42,.42); opacity:0; pointer-events:none; transition:.18s ease; }
    .mobile-day-sheet-backdrop.show { opacity:1; pointer-events:auto; }
    .mobile-day-sheet { position:fixed; left:0; right:0; bottom:0; z-index:9999; max-height:82vh; background:#fff; border-radius:22px 22px 0 0; box-shadow:0 -18px 45px rgba(15,23,42,.28); transform:translateY(105%); transition:.22s ease; padding:10px 14px 18px; display:block; visibility:hidden; pointer-events:none; }
    .mobile-day-sheet.show { visibility:visible; pointer-events:auto; }
    .mobile-day-sheet.show { transform:translateY(0); }
    .mobile-day-sheet-handle { width:44px; height:5px; border-radius:999px; background:#d1d5db; margin:0 auto 10px; }
    .mobile-day-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 2px 10px; border-bottom:1px solid var(--line); }
    .mobile-day-sheet-head strong { font-size:17px; font-weight:950; letter-spacing:-.02em; }
    .mobile-day-sheet-close { width:34px; height:34px; padding:0; border-radius:999px; background:#f3f4f6; color:#111827; font-size:22px; line-height:1; }
    .mobile-day-sheet-close:hover { transform:none; opacity:1; background:#e5e7eb; }
    .mobile-day-sheet-body { overflow:auto; max-height:calc(82vh - 78px); padding-top:12px; }
    .mobile-day-sheet-body .detail-grid { grid-template-columns:1fr 1fr; }
    .mobile-day-sheet-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
    .mobile-day-sheet-actions button { border-radius:14px; padding:13px 10px; font-size:14px; }
    .mobile-sheet-edit-form { display:grid; gap:10px; }
    .mobile-sheet-edit-form .form-grid { grid-template-columns:1fr; gap:10px; }
    .mobile-sheet-edit-note { margin:0 0 10px; padding:10px; border-radius:14px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; font-size:12px; font-weight:800; line-height:1.45; }

    @media (min-width: 901px){
      .mobile-day-sheet { left:50%; right:auto; bottom:auto; top:50%; width:560px; max-width:calc(100vw - 32px); max-height:86vh; border-radius:22px; transform:translate(-50%, -44%) scale(.98); opacity:0; padding:14px 16px 18px; }
      .mobile-day-sheet.show { transform:translate(-50%, -50%) scale(1); opacity:1; }
      .mobile-day-sheet-body { max-height:calc(86vh - 92px); }
    }

    .detail-mode-guide { margin:8px 0 10px; padding:11px 12px; border-radius:14px; background:#ecfeff; border:1px solid #a5f3fc; color:#155e75; font-size:13px; font-weight:850; line-height:1.45; }
    .detail-mode-guide strong { color:#111827; }
    .detail-mode-guide .detail-mode-steps { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
    .detail-mode-guide .detail-mode-step { display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; background:#fff; border:1px solid #cffafe; color:#0f766e; font-size:12px; font-weight:900; }

    .developer-support-card { margin: 24px 0 4px; background: linear-gradient(135deg, #111827, #1f2937); color:#fff; border:0; overflow:hidden; }
    .developer-support-inner { display:grid; grid-template-columns: 1.25fr .75fr; gap:16px; align-items:center; }
    .developer-support-title { display:flex; align-items:center; gap:8px; font-size:20px; font-weight:950; letter-spacing:-0.03em; margin:0 0 6px; }
    .developer-support-text { margin:0; color:#d1d5db; font-size:13px; line-height:1.55; }
    .developer-support-text strong { color:#fde68a; }
    .donation-mini-note { display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:6px 9px; border-radius:999px; background:rgba(250,204,21,.12); color:#fde68a; font-size:12px; font-weight:900; }
    .developer-support-main-btn { background:#facc15; color:#111827; border-radius:16px; padding:15px 16px; font-size:16px; box-shadow:0 12px 24px rgba(250,204,21,.18); }
    .support-heart { color:#dc2626; font-weight:950; font-size:18px; vertical-align:-1px; }
    .developer-support-main-btn:hover { opacity:1; transform:translateY(-2px); }
    .donation-panel { display:none; margin-top:16px; padding:14px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
    .donation-panel.show { display:block; }
    .donation-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
    .donation-panel-head strong { font-size:15px; }
    .donation-panel-head span { color:#d1d5db; font-size:12px; }
    .donation-options { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:9px; }
    .donation-option { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:88px; padding:12px; border-radius:16px; background:#fff; color:#111827; border:1px solid rgba(255,255,255,.18); text-align:left; box-shadow:0 8px 18px rgba(0,0,0,.10); }
    .donation-option::after { content:attr(data-bubble); position:absolute; right:-8px; bottom:-12px; font-size:42px; opacity:.15; transform:rotate(-10deg); }
    .donation-option:hover { opacity:1; transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.16); }
    .donation-option b { font-size:13px; letter-spacing:-0.03em; }
    .donation-option span { color:#6b7280; font-size:12px; font-weight:900; }
    .donation-option small { color:#374151; font-size:11px; font-weight:800; line-height:1.3; }
    .donation-custom-row { display:grid; grid-template-columns: 1fr auto; gap:8px; margin-top:10px; }
    .donation-custom-row input { background:#fff; border-color:rgba(255,255,255,.25); }
    .donation-custom-row button { width:auto; min-width:110px; background:#f97316; color:#fff; border-radius:12px; }
    .donation-placeholder-note { margin:10px 0 0; color:#d1d5db; font-size:12px; line-height:1.45; }
    .donation-pay-link { color:#fde68a; font-weight:950; text-decoration:underline; text-underline-offset:3px; }
    .site-footer { text-align:center; color:var(--muted); font-size:12px; padding:10px 0 2px; }
    @media (max-width:900px){
      .developer-support-inner { grid-template-columns:1fr; }
      .donation-options { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .donation-custom-row { grid-template-columns:1fr; }
      .donation-custom-row button { width:100%; }
    }

    @media (max-width: 900px) {
      .main-calendar-area { grid-template-columns: 1fr; }
      .main-calendar-color-guide { position: static; }
      .container { padding: 14px; }
      .top-grid, .form-grid, .two-grid, .edit-content-layout, .mini-actions, .csv-btn-row, .header-tools { grid-template-columns: 1fr; }
      .day { min-height: 82px; padding: 7px; }
      .quick-weekday-card { margin-right: 0; }
      .weekday-buttons { grid-template-columns: repeat(4, 1fr); }
      .mini-calendar { gap: 4px; }
      .mini-day { min-height: 36px; padding: 4px; font-size: 11px; }
      h1 { font-size: 26px; }
      .info:hover::after, .info:focus::after { left: -120px; top: 24px; width: 240px; }
      .work-badge, .night-mini { font-size: 10px; padding: 3px 5px; }
      .work-summary { font-size: 9px; padding: 3px 4px; letter-spacing: -0.7px; }
      .result-summary-grid { grid-template-columns: 1fr; gap: 8px; }
      .result-summary-card { padding: 13px; }
      .result-summary-card strong { font-size: 18px; }
      .result-summary-card.primary strong { font-size: 23px; }
      .result-line { align-items:flex-start; flex-direction:column; padding:9px 0; }
      .result-line strong { width:100%; text-align:right; }
      .calendar { gap: 5px; }
      .weekdays { gap: 5px; }
      .day { min-height: 70px; border-radius: 12px; }
      .day-number { font-size: 14px; }
      .holiday-badge { position: static; display:inline-block; margin-top:4px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .pc-guide-note { display:none; }
      .mobile-guide-note { display:block; }
      .mobile-allowance-toggle { display:flex; }
      #allowanceSection .mobile-allowance-body { display:none; margin-top:12px; }
      #allowanceSection.open .mobile-allowance-body { display:block; }
      #mobileAllowanceToggle .toggle-arrow { font-size:18px; line-height:1; }
      .quick-weekday-card, #mainCalendarLegend, .work-summary, .icon-row, .night-mini, #editPanel { display:none !important; }
      .main-calendar-area { display:block; }
      .calendar-legend { display:none; }
      .mobile-allowance-legend { display:block; }
      .day.pattern-work, .day.active-work { background:var(--pattern-bg, #f0fdf4) !important; border-color:var(--pattern-border, var(--green)) !important; }
      .day { min-height:58px; padding:8px 6px; display:flex; align-items:flex-start; justify-content:center; }
      .day-number { font-size:15px; font-weight:600; }
      .allowance-dots { left:50%; transform:translateX(-50%); bottom:6px; justify-content:center; max-width:34px; display:grid; grid-template-columns:repeat(2, 8px); gap:2px 3px; }
      .color-dot { width:7px; height:7px; box-shadow:0 0 0 1px rgba(255,255,255,.9); }
      .allowance-more-dot { min-width:14px; height:10px; font-size:7px; grid-column:auto; }
      .holiday-badge { display:none !important; }
      #detailTableAccordion, .detail-table, .table-wrap { display:none !important; }
      #sideMiniCalendarWrap { display:none !important; }
      .mobile-result-details { margin-top:12px; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
      .mobile-result-details-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-radius:0; background:#111827; color:#fff; font-size:15px; }
      .mobile-result-details-body { display:none; padding:12px 14px; }
      .mobile-result-details.open .mobile-result-details-body { display:block; }
      .mobile-day-sheet { display:block; }
    }

    .guide-switch-link { width:auto; display:inline; padding:0 2px 2px; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; font-weight:950; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; box-shadow:none; cursor:pointer; }
    .pc-guide-note .guide-switch-link { color:#2563eb; text-decoration-color:#f97316; }
    .mobile-guide-note .guide-switch-link { color:#dc2626; text-decoration-color:#60a5fa; }
    .guide-switch-link:hover { transform:none; opacity:.78; }
    .guide-switch-link:focus-visible { outline:3px solid rgba(37,99,235,.35); outline-offset:3px; border-radius:6px; }

    body.force-mobile-view .container { max-width:430px; padding:14px; }
    body.force-mobile-view .main-calendar-area { display:block; grid-template-columns:1fr; }
    body.force-mobile-view .main-calendar-color-guide { position:static; }
    body.force-mobile-view .top-grid, body.force-mobile-view .form-grid, body.force-mobile-view .two-grid, body.force-mobile-view .edit-content-layout, body.force-mobile-view .mini-actions, body.force-mobile-view .csv-btn-row, body.force-mobile-view .header-tools { grid-template-columns:1fr; }
    body.force-mobile-view h1 { font-size:26px; }
    body.force-mobile-view .pc-guide-note { display:none; }
    body.force-mobile-view .mobile-guide-note { display:block; }
    body.force-mobile-view .weekday-buttons { grid-template-columns:repeat(4, 1fr); }
    body.force-mobile-view .calendar, body.force-mobile-view .weekdays { gap:5px; }
    body.force-mobile-view .day { min-height:58px; padding:8px 6px; border-radius:12px; display:flex; align-items:flex-start; justify-content:center; }
    body.force-mobile-view .day-number { font-size:15px; font-weight:600; }
    body.force-mobile-view .result-summary-grid { grid-template-columns:1fr; gap:8px; }
    body.force-mobile-view .result-line { align-items:flex-start; flex-direction:column; padding:9px 0; }
    body.force-mobile-view .result-line strong { width:100%; text-align:right; }
    body.force-mobile-view .mobile-allowance-toggle { display:flex; }
    body.force-mobile-view #allowanceSection .mobile-allowance-body { display:none; margin-top:12px; }
    body.force-mobile-view #allowanceSection.open .mobile-allowance-body { display:block; }
    body.force-mobile-view #mobileAllowanceToggle .toggle-arrow { font-size:18px; line-height:1; }
    body.force-mobile-view .quick-weekday-card, body.force-mobile-view #mainCalendarLegend, body.force-mobile-view .work-summary, body.force-mobile-view .icon-row, body.force-mobile-view .night-mini, body.force-mobile-view #detailTableAccordion, body.force-mobile-view .detail-table, body.force-mobile-view .table-wrap, body.force-mobile-view #sideMiniCalendarWrap, body.force-mobile-view #editPanel { display:none !important; }
    body.force-mobile-view .calendar-legend { display:none; }
    body.force-mobile-view .mobile-allowance-legend { display:block; }
    body.force-mobile-view .day.pattern-work, body.force-mobile-view .day.active-work { background:var(--pattern-bg, #f0fdf4) !important; border-color:var(--pattern-border, var(--green)) !important; }
    body.force-mobile-view .allowance-dots { left:50%; transform:translateX(-50%); bottom:6px; justify-content:center; max-width:34px; display:grid; grid-template-columns:repeat(2, 8px); gap:2px 3px; }
    body.force-mobile-view .color-dot { width:7px; height:7px; box-shadow:0 0 0 1px rgba(255,255,255,.9); }
    body.force-mobile-view .allowance-more-dot { min-width:14px; height:10px; font-size:7px; grid-column:auto; }
    body.force-mobile-view .holiday-badge { display:none !important; }
    body.force-mobile-view .mobile-result-details { margin-top:12px; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
    body.force-mobile-view .mobile-result-details-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-radius:0; background:#111827; color:#fff; font-size:15px; }
    body.force-mobile-view .mobile-result-details-body { display:none; padding:12px 14px; }
    body.force-mobile-view .mobile-result-details.open .mobile-result-details-body { display:block; }
    body.force-mobile-view .mobile-day-sheet { display:block; }

    body.force-pc-view { min-width:1180px; }
    body.force-pc-view .container { max-width:1240px; padding:24px; }
    body.force-pc-view .pc-guide-note { display:block; }
    body.force-pc-view .mobile-guide-note { display:none; }
    body.force-pc-view .top-grid { grid-template-columns:1fr 1fr 1fr 1fr; }
    body.force-pc-view .form-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    body.force-pc-view .two-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    body.force-pc-view .edit-content-layout { grid-template-columns:minmax(0, 1fr) 310px; }
    body.force-pc-view .mini-actions { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    body.force-pc-view .csv-btn-row { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    body.force-pc-view .header-tools { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    body.force-pc-view .main-calendar-area { display:grid; grid-template-columns:minmax(0, 1fr) 260px; }
    body.force-pc-view .main-calendar-color-guide { position:sticky; }
    body.force-pc-view #mainCalendarLegend, body.force-pc-view #sideMiniCalendarWrap { display:block !important; }
    body.force-pc-view .work-summary { display:block !important; }
    body.force-pc-view .icon-row { display:flex !important; }
    body.force-pc-view .night-mini { display:inline-block !important; }
    body.force-pc-view .calendar-legend { display:flex; }
    body.force-pc-view .mobile-allowance-toggle, body.force-pc-view .mobile-allowance-legend, body.force-pc-view .mobile-result-details { display:none !important; }
    body.force-pc-view #allowanceSection .mobile-allowance-body { display:block !important; }
    body.force-pc-view .table-wrap { display:block !important; }
    body.force-pc-view .detail-table { display:table !important; }
    body.force-pc-view .weekday-buttons { grid-template-columns:repeat(7, minmax(0, 1fr)); }
    body.force-pc-view .calendar, body.force-pc-view .weekdays { gap:10px; }
    body.force-pc-view .day { min-height:118px; padding:10px; border-radius:16px; display:block; }
    body.force-pc-view .day-number { font-size:16px; }
    body.force-pc-view .holiday-badge { position:absolute; display:inline-block !important; top:8px; right:8px; }


    .weekday-btn { width:100%; padding:6px 0; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:13px; font-weight:900; box-shadow:none; }
    .weekday-btn:hover { transform:none; background:#eef2ff; color:#111827; }
    .calendar-top-actions { display:flex; justify-content:flex-end; gap:8px; margin:8px 0 10px; }
    .calendar-top-actions button { width:auto; padding:8px 11px; border-radius:999px; font-size:12px; }
    .allowance-more-dot { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:12px; padding:0 3px; border-radius:999px; background:#111827; color:#fff; font-size:8px; font-weight:900; line-height:1; }
    .share-box textarea { font-family: Arial, 'Noto Sans KR', sans-serif; }
    .share-link-short { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:14px; color:#1d4ed8; font-size:14px; font-weight:900; text-decoration:underline; text-underline-offset:3px; }
    .share-link-short span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .share-fallback-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
    .share-fallback-actions[hidden] { display:none; }
    .share-fallback-actions .soft-btn { min-height:34px; padding:8px 11px; font-size:12px; }
    .calendar-feature-note { margin:10px 0 8px; padding:0 2px; border-radius:0; background:transparent; border:0; color:#6b7280; font-size:12px; font-weight:700; line-height:1.55; }
    .weekday-btn { position:relative; }
    .weekday-btn::after { content:'전체'; display:block; margin-top:1px; font-size:9px; font-weight:800; color:#94a3b8; }
    .highlight-row { background:#fff7ed; font-weight:900; }
    .highlight-row td { color:#9a3412; }
    .calendar-top-actions .soft-btn.active { background:#111827; color:#fff; }
    .calendar-top-actions { justify-content:space-between; flex-wrap:wrap; }
    @media (max-width:900px){ .calendar-top-actions button { flex:1 1 140px; } }
    .trust-content-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
    .trust-mini-card { padding:14px; border-radius:16px; background:#fff; border:1px solid var(--line); }
    .trust-mini-card h3 { margin:0 0 8px; font-size:15px; }
    .trust-mini-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
    .policy-section { scroll-margin-top: 18px; }
    .policy-section h2 { display:flex; align-items:center; gap:7px; }
    .policy-text { color:#475569; font-size:13px; line-height:1.7; }
    .policy-text strong { color:#111827; }
    .policy-list { margin:8px 0 0; padding-left:18px; }
    .policy-list li { margin:4px 0; }

    .footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 12px; margin:8px 0; line-height:1.45; }
    .footer-links button, .footer-links a { width:auto; padding:2px 0; border:0; background:transparent; color:#6b7280; font-size:12px; font-weight:800; text-decoration:none; box-shadow:none; }
    .footer-links button:hover, .footer-links a:hover { transform:none; opacity:.75; text-decoration:underline; text-underline-offset:3px; }
    .policy-modal-backdrop { position:fixed; inset:0; z-index:10001; background:rgba(15,23,42,.45); opacity:0; pointer-events:none; transition:.18s ease; }
    .policy-modal-backdrop.show { opacity:1; pointer-events:auto; }
    .policy-modal { position:fixed; left:50%; top:50%; z-index:10002; width:720px; max-width:calc(100vw - 28px); max-height:82vh; background:#fff; border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.30); transform:translate(-50%, -46%) scale(.98); opacity:0; visibility:hidden; pointer-events:none; transition:.18s ease; overflow:hidden; }
    .policy-modal.show { transform:translate(-50%, -50%) scale(1); opacity:1; visibility:visible; pointer-events:auto; }
    .policy-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); background:#f8fafc; }
    .policy-modal-head strong { font-size:19px; font-weight:950; letter-spacing:-0.03em; }
    .policy-modal-close { width:34px; height:34px; padding:0; border-radius:999px; background:#e5e7eb; color:#111827; font-size:23px; line-height:1; }
    .policy-modal-close:hover { transform:none; opacity:1; background:#d1d5db; }
    .policy-modal-body { padding:18px; overflow:auto; max-height:calc(82vh - 68px); color:#475569; font-size:13px; line-height:1.75; }
    .policy-modal-body h3 { margin:0 0 10px; color:#111827; font-size:18px; }
    .policy-modal-body p { margin:0 0 10px; }
    .policy-modal-body ul { margin:8px 0 0; padding-left:18px; }
    .policy-modal-body li { margin:4px 0; }
    .policy-modal-body strong { color:#111827; }
    .policy-modal-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px; }
    .policy-modal-card { padding:12px; border:1px solid var(--line); border-radius:14px; background:#f8fafc; }
    .policy-modal-card b { display:block; color:#111827; margin-bottom:4px; }
    @media (max-width:900px){ .policy-modal-grid { grid-template-columns:1fr; } .footer-links button { font-size:11px; } }

    .cookie-consent { position:fixed; left:16px; right:16px; bottom:16px; z-index:10000; max-width:820px; margin:0 auto; padding:14px; border-radius:18px; background:#111827; color:#fff; box-shadow:0 18px 42px rgba(0,0,0,.28); display:none; gap:12px; align-items:center; justify-content:space-between; }
    .cookie-consent.show { display:flex; }
    .cookie-consent p { margin:0; color:#e5e7eb; font-size:13px; line-height:1.5; }
    .cookie-consent strong { color:#fff; }
    .cookie-consent button { width:auto; min-width:92px; background:#facc15; color:#111827; border-radius:999px; padding:10px 14px; }
    @media (max-width:900px){ .trust-content-grid { grid-template-columns:1fr; } .cookie-consent { flex-direction:column; align-items:stretch; } .cookie-consent button { width:100%; } }


    .policy-section { padding:0; overflow:hidden; }
    .policy-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; background:#fff; color:var(--text); border:0; border-radius:18px; text-align:left; box-shadow:none; }
    .policy-toggle:hover { transform:none; opacity:1; background:#f8fafc; }
    .policy-toggle-title { display:flex; align-items:center; gap:8px; font-size:20px; font-weight:950; letter-spacing:-0.02em; }
    .policy-toggle-sub { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:700; }
    .policy-toggle-arrow { width:34px; height:34px; min-width:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#111827; color:#fff; font-size:18px; }
    .policy-section .policy-body { display:none; padding:0 20px 20px; border-top:1px solid var(--line); }
    .policy-section.open .policy-body { display:block; }
    .policy-section.open .policy-toggle-arrow { transform:rotate(180deg); }


    /* v14: 상세정보 팝업 가독성 개선 */
    .detail-label { display:block; color:#6b7280; font-size:12px; font-weight:900; margin-bottom:4px; letter-spacing:-0.02em; }
    .detail-value { display:block; color:#111827; font-size:15px; font-weight:950; line-height:1.35; letter-spacing:-0.02em; word-break:keep-all; }
    .day-detail-tooltip .detail-label { color:#d1d5db; }
    .day-detail-tooltip .detail-value { color:#fff; }
    .mobile-day-sheet-body .tip-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
    .mobile-day-sheet-body .tip-item { padding:11px 10px; border-radius:14px; background:#f8fafc; border:1px solid #e5e7eb; min-width:0; }
    .mobile-day-sheet-body .tip-item.total { grid-column:1 / -1; background:#fff1f2; border-color:#fecdd3; }
    .mobile-day-sheet-body .tip-item.total .detail-value { color:#dc2626; font-size:18px; }
    .mobile-day-sheet-body .tip-note { margin-top:10px; padding:10px 11px; border-radius:14px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; font-size:12px; font-weight:800; line-height:1.45; }
    .day-detail-tooltip .tip-item.total { grid-column:1 / -1; }
    .developer-support-text .donation-mobile-break { display:inline; }
    @media (max-width:900px){
      .mobile-day-sheet-body .tip-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; }
      .mobile-day-sheet-body .tip-item { padding:10px 9px; border-radius:13px; }
      .detail-label { font-size:11px; margin-bottom:3px; }
      .detail-value { font-size:14px; }
      .mobile-day-sheet-body .tip-item.total .detail-value { font-size:17px; }
      .developer-support-main-btn { white-space:nowrap; font-size:15px; padding:14px 16px; }
      .developer-support-text .donation-mobile-break { display:block; height:4px; }
    }



    /* v15: PC 화면에서 모바일 버전으로 전환했을 때도 후원 영역 모바일 가독성 적용 */
    body.force-mobile-view .developer-support-inner { grid-template-columns:1fr; }
    body.force-mobile-view .developer-support-main-btn { white-space:nowrap; font-size:15px; padding:14px 16px; width:100%; text-align:center; }
    body.force-mobile-view .developer-support-text .donation-mobile-break { display:block; height:4px; }
    body.force-mobile-view .donation-options { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    body.force-mobile-view .donation-custom-row { grid-template-columns:1fr; }
    body.force-mobile-view .donation-custom-row button { width:100%; }

    /* v16: 첫 화면 정리 + 단계별 접기 UI */
    .hero-proof-line { display:inline-flex; align-items:center; justify-content:center; margin:10px auto 0; padding:8px 13px; border-radius:999px; background:#111827; color:#fff; font-size:14px; font-weight:950; letter-spacing:-0.03em; box-shadow:0 8px 18px rgba(17,24,39,.14); }
    .step-card { padding:0; overflow:hidden; }
    .step-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:18px 20px; border:0; background:#fff; color:var(--text); text-align:left; cursor:pointer; border-radius:18px; font-size:20px; font-weight:950; letter-spacing:-0.02em; }
    .step-toggle:hover { background:#f8fafc; }
    .step-toggle-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
    .step-toggle-title { display:block; white-space:normal; }
    .step-toggle-sub { display:block; color:var(--muted); font-size:12px; font-weight:800; line-height:1.35; letter-spacing:-0.01em; }
    .step-arrow { width:auto; min-width:74px; height:36px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#111827; color:#fff; font-size:13px; font-weight:950; line-height:1; transition:.15s ease; white-space:nowrap; }
    .step-card.step-open .step-arrow { background:#eef2ff; color:#111827; }
    .step-body { display:none; padding:0 20px 20px; border-top:1px solid var(--line); }
    .step-card.step-open .step-body { display:block; }
    .step-card.step-collapsed { box-shadow:0 5px 14px rgba(0,0,0,.025); }
    .step-card.step-collapsed .step-toggle { border-radius:18px; }
    .step-progress-note { margin:0 0 12px; padding:10px 11px; border-radius:12px; background:#f8fafc; border:1px solid var(--line); color:#475569; font-size:12px; font-weight:800; line-height:1.45; }
    .step-complete-row { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:14px; border-top:1px dashed #d1d5db; }
    .step-complete-btn { width:auto; min-width:150px; padding:12px 15px; border-radius:999px; background:#111827; color:#fff; font-size:14px; font-weight:950; }
    .step-card.step-locked .step-toggle { cursor:default; opacity:.72; }
    .step-card.step-locked .step-arrow { display:none; }
    .step-card.step-completed .step-arrow { background:#eef2ff; color:#111827; }
    .calculation-section { margin: 2px 0 20px; padding: 0; background: transparent; border: 0; box-shadow: none; }
    .calculation-section .calculate-btn { margin-top:0; }
    @media (max-width:900px){ .hero-proof-line { font-size:12px; padding:7px 10px; max-width:100%; } .step-toggle { padding:15px 14px; font-size:17px; border-radius:16px; } .step-body { padding:0 14px 16px; } .step-arrow { min-width:68px; height:32px; padding:0 10px; font-size:12px; } .step-complete-row { justify-content:stretch; } .step-complete-btn { width:100%; } }



    /* final: 추가수당 카테고리 내부의 2중 접힘 제거 */
    #allowanceSection .mobile-allowance-toggle { display: none !important; }
    #allowanceSection .mobile-allowance-body { display: block !important; margin-top: 0 !important; }
    body.force-mobile-view #allowanceSection .mobile-allowance-body { display: block !important; margin-top: 0 !important; }


    /* Lawzero branding + SEO visual refresh */
    .lawzero-brand { display:inline-flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 12px; padding:7px 12px; border:1px solid rgba(239,68,68,.18); background:#fff; border-radius:999px; box-shadow:0 8px 20px rgba(17,24,39,.06); }
    .lawzero-brand img { width:34px; height:34px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
    .lawzero-brand-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
    .lawzero-brand-text strong { font-size:14px; font-weight:950; letter-spacing:-.02em; color:#111827; }
    .lawzero-brand-text span { font-size:10px; font-weight:900; color:#ef4444; letter-spacing:.02em; text-transform:uppercase; }
    .site-hero-banner { margin:0 auto 20px; max-width:980px; border-radius:22px; overflow:hidden; background:#ef4444; box-shadow:0 18px 45px rgba(239,68,68,.18); border:1px solid rgba(255,255,255,.8); }
    .site-hero-banner img { display:block; width:100%; height:auto; }
    .hero-main-desc { max-width:760px; margin:0 auto; line-height:1.7; }
    .seo-keyword-box { display:inline-flex; align-items:center; justify-content:center; margin:14px auto 0; max-width:880px; padding:9px 15px; border-radius:999px; background:#111827; color:#fff; font-size:13px; font-weight:950; line-height:1.45; box-shadow:0 8px 18px rgba(17,24,39,.14); }
    .seo-keyword-box strong { color:inherit; }
    .site-footer .lawzero-footer-brand { margin-top:6px; color:#111827; font-weight:950; }
    .site-footer .lawzero-footer-brand span { color:#ef4444; }
    @media (max-width:900px){
      .site-hero-banner { margin:0 auto 16px; border-radius:16px; }
      .seo-keyword-box { font-size:12px; padding:8px 12px; border-radius:16px; }
    }

/* Mobile app and in-app browser refinements */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  background: var(--bg);
}

/* Final mobile nav guard for SEO/info pages */
@media (max-width: 640px) {
  .seo-pill-links,
  .seo-nav,
  .guide-nav,
  .info-nav,
  .page-nav,
  .pill-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: wrap !important;
    padding-bottom: 0 !important;
  }

  .seo-pill,
  .guide-pill,
  .info-nav a,
  .page-nav a,
  .pill-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 9px 8px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    flex: initial !important;
  }

  .seo-pill-links > :last-child:nth-child(odd),
  .seo-nav > :last-child:nth-child(odd),
  .guide-nav > :last-child:nth-child(odd),
  .info-nav > :last-child:nth-child(odd),
  .page-nav > :last-child:nth-child(odd),
  .pill-nav > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* v50-final: keep mobile drawer and chevrons above all legacy SEO overrides */
.collapsible-head .collapsible-arrow,
#legalOptionSection .compact-info-accordion .collapsible-arrow {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.collapsible-head .collapsible-arrow::before,
#legalOptionSection .compact-info-accordion .collapsible-arrow::before {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform .16s ease !important;
}

.collapsible-box.open .collapsible-head .collapsible-arrow::before,
.collapsible-head[aria-expanded="true"] .collapsible-arrow::before {
  transform: translateY(3px) rotate(225deg) !important;
}

@media (max-width: 768px) {
  .global-site-header .desktop-nav,
  .global-site-header .global-nav {
    display: none !important;
  }

  .global-site-header .mobile-menu-button {
    display: inline-flex !important;
  }
}

/* v49: quiet document-style SEO pages */
section[id],
.guide-section,
.guide-anchor {
  scroll-margin-top: 100px;
}

body:has(.main-doc) {
  background: #fff !important;
}

body:has(.main-doc) .global-nav a {
  font-size: 14px !important;
  font-weight: 700 !important;
}

body:has(.main-doc) .main-doc,
.container.main-doc,
.container.main-doc.info-page,
.container.main-doc.guide-page,
.container.main-doc.seo-page {
  max-width: 820px !important;
  padding: 34px 24px 28px !important;
}

body:has(.main-doc) .doc-hero,
body:has(.main-doc) .seo-hero,
.container.seo-service .seo-hero {
  margin: 0 0 34px !important;
  padding: 8px 0 22px !important;
  border: 0 !important;
  border-bottom: 1px solid #eef0f3 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.main-doc) .seo-hero::before,
body:has(.main-doc) .seo-hero::after {
  display: none !important;
}

body:has(.main-doc) .seo-hero-inner {
  display: block !important;
}

body:has(.main-doc) .seo-hero-copy,
body:has(.main-doc) .seo-hero h1,
body:has(.main-doc) .seo-hero-description {
  max-width: 760px !important;
}

body:has(.main-doc) .seo-hero-panel,
body:has(.main-doc) .seo-visual {
  display: none !important;
}

body:has(.main-doc) .doc-eyebrow,
body:has(.main-doc) .seo-kicker {
  margin: 0 0 10px !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body:has(.main-doc) .doc-hero h1,
body:has(.main-doc) .seo-hero h1,
body:has(.main-doc) .info-page > header h1,
.seo-page h1 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(34px, 5vw, 48px) !important;
  line-height: 1.18 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

body:has(.main-doc) .seo-hero-description,
body:has(.main-doc) .doc-hero .sub-text,
body:has(.main-doc) .info-page > header .sub-text {
  margin-top: 14px !important;
  color: #4b5563 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}

body:has(.main-doc) main,
body:has(.main-doc) article,
.seo-page article {
  max-width: 760px !important;
  margin: 0 !important;
}

body:has(.main-doc) article > section,
body:has(.main-doc) article > .card,
.seo-page article > .card {
  margin: 0 0 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.main-doc) article > section:first-child,
body:has(.main-doc) article > .card:first-child,
.seo-page article > .card:first-child {
  padding: 0 0 2px !important;
  border: 0 !important;
  background: transparent !important;
}

body:has(.main-doc) h2,
body:has(.main-doc) .card h2,
.seo-page .card h2 {
  margin: 0 0 14px !important;
  color: #111827 !important;
  font-size: clamp(26px, 3vw, 30px) !important;
  line-height: 1.28 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

body:has(.main-doc) .card h2::before,
.seo-page .card h2::before {
  display: none !important;
}

body:has(.main-doc) h3,
body:has(.main-doc) .card h3,
.seo-page .card h3 {
  margin: 22px 0 8px !important;
  font-size: clamp(20px, 2.4vw, 22px) !important;
  line-height: 1.35 !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

body:has(.main-doc) p,
body:has(.main-doc) li,
body:has(.main-doc) td,
body:has(.main-doc) th,
.seo-page p,
.seo-page li {
  color: #374151 !important;
  font-size: 16px !important;
  line-height: 1.82 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body:has(.main-doc) p {
  margin: 0 0 16px !important;
}

body:has(.main-doc) .lead {
  color: #1f2937 !important;
  font-size: 16px !important;
  line-height: 1.86 !important;
}

body:has(.main-doc) strong {
  font-weight: 760 !important;
}

body:has(.main-doc) ul,
body:has(.main-doc) ol {
  margin: 12px 0 0 !important;
  padding-left: 20px !important;
}

body:has(.main-doc) li + li {
  margin-top: 6px !important;
}

.doc-toc {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  padding: 0;
}

.doc-toc a {
  display: block;
  padding: 9px 0;
  border: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.doc-toc a:hover {
  color: #dc2626;
}

body:has(.main-doc) .content-grid,
body:has(.main-doc) .three-grid,
body:has(.main-doc) .info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

body:has(.main-doc) .example-card,
body:has(.main-doc) .mini-card,
body:has(.main-doc) .faq-item {
  padding: 16px !important;
  border: 1px solid #eef0f3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body:has(.main-doc) .highlight-box,
body:has(.main-doc) .summary-box,
body:has(.main-doc) .notice-box,
body:has(.main-doc) .formula {
  margin: 16px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid #edf0f3 !important;
  border-radius: 8px !important;
  background: #fafafa !important;
  color: #374151 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-weight: 500 !important;
}

body:has(.main-doc) .table-wrap {
  margin-top: 14px !important;
  border: 1px solid #edf0f3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body:has(.main-doc) .guide-table,
body:has(.main-doc) .seo-table {
  font-size: 15px !important;
}

body:has(.main-doc) .guide-table th,
body:has(.main-doc) .guide-table td,
body:has(.main-doc) .seo-table th,
body:has(.main-doc) .seo-table td {
  padding: 11px 12px !important;
  border-bottom: 1px solid #edf0f3 !important;
}

body:has(.main-doc) .guide-table th,
body:has(.main-doc) .seo-table th {
  background: #fafafa !important;
  color: #4b5563 !important;
  font-size: 14px !important;
  font-weight: 720 !important;
}

body:has(.main-doc) .cta-panel {
  margin-top: 48px !important;
  padding: 24px !important;
  border-radius: 8px !important;
  background: #111827 !important;
  color: #fff !important;
}

body:has(.main-doc) .cta-panel h2 {
  color: #fff !important;
  font-size: 24px !important;
}

body:has(.main-doc) .cta-panel .sub-text {
  color: #d1d5db !important;
}

body:has(.main-doc) .cta-button {
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

body:has(.main-doc) footer,
body:has(.main-doc) .site-footer {
  margin-top: 48px !important;
  padding-top: 20px !important;
  border-top: 1px solid #eef0f3 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}

@media (max-width: 760px) {
  section[id],
  .guide-section,
  .guide-anchor {
    scroll-margin-top: 88px;
  }

  body:has(.main-doc) .main-doc,
  .container.main-doc,
  .container.main-doc.info-page,
  .container.main-doc.guide-page,
  .container.main-doc.seo-page {
    max-width: 100% !important;
    padding: 24px 18px !important;
  }

  body:has(.main-doc) .doc-hero h1,
  body:has(.main-doc) .seo-hero h1,
  body:has(.main-doc) .info-page > header h1,
  .seo-page h1 {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }

  body:has(.main-doc) .content-grid,
  body:has(.main-doc) .three-grid,
  body:has(.main-doc) .info-grid {
    grid-template-columns: 1fr !important;
  }

  body:has(.main-doc) p,
  body:has(.main-doc) li,
  body:has(.main-doc) td,
  body:has(.main-doc) th,
  .seo-page p,
  .seo-page li {
    font-size: 15.5px !important;
    line-height: 1.78 !important;
  }
}

/* v50: mobile drawer navigation and stable CSS chevrons */
.mobile-menu-button,
.mobile-drawer,
.mobile-drawer-overlay {
  display: none;
}

.collapsible-arrow {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-size: 0 !important;
  line-height: 1;
}

.collapsible-arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}

.collapsible-box.open .collapsible-arrow::before,
.collapsible-head[aria-expanded="true"] .collapsible-arrow::before {
  transform: translateY(3px) rotate(225deg);
}

@media (max-width: 768px) {
  body.mobile-drawer-open {
    overflow: hidden;
  }

  .global-site-header {
    position: sticky;
    top: 0;
    z-index: 10020;
  }

  .global-nav-inner {
    display: grid !important;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    min-height: 56px;
    padding: 0 14px !important;
  }

  .global-brand {
    justify-self: center;
    font-size: 18px !important;
  }

  .desktop-nav,
  .global-nav {
    display: none !important;
  }

  .mobile-menu-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #111827;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    box-shadow: none;
  }

  .mobile-menu-button:hover {
    transform: none;
    opacity: 1;
    background: #f3f4f6;
  }

  .mobile-menu-button span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: block;
    background: rgba(17, 24, 39, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }

  .mobile-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10040;
    display: block;
    width: min(82vw, 320px);
    padding: 18px 18px 24px;
    background: #fff;
    box-shadow: 18px 0 40px rgba(15, 23, 42, .2);
    transform: translateX(-105%);
    transition: transform .22s ease;
  }

  .mobile-drawer.open {
    transform: translateX(0);
  }

  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef0f3;
  }

  .mobile-drawer-head strong {
    color: #111827;
    font-size: 20px;
    font-weight: 800;
  }

  .mobile-drawer-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: #111827;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    box-shadow: none;
  }

  .mobile-drawer-close:hover {
    transform: none;
    opacity: 1;
    background: #e5e7eb;
  }

  .mobile-drawer-nav {
    display: grid;
    gap: 2px;
    padding-top: 14px;
  }

  .mobile-drawer-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 4px;
    border-radius: 8px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-drawer-nav a:hover {
    background: #f9fafb;
    color: #dc2626;
  }
}

@media (min-width: 769px) {
  .mobile-menu-button,
  .mobile-drawer,
  .mobile-drawer-overlay {
    display: none !important;
  }
}

/* v50-final: keep drawer/nav and accordion icons above legacy overrides */
.collapsible-head .collapsible-arrow,
#legalOptionSection .compact-info-accordion .collapsible-arrow {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.collapsible-head .collapsible-arrow::before,
#legalOptionSection .compact-info-accordion .collapsible-arrow::before {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform .16s ease !important;
}

.collapsible-box.open .collapsible-head .collapsible-arrow::before,
.collapsible-head[aria-expanded="true"] .collapsible-arrow::before {
  transform: translateY(3px) rotate(225deg) !important;
}

@media (max-width: 768px) {
  .global-site-header .desktop-nav,
  .global-site-header .global-nav {
    display: none !important;
  }

  .global-site-header .mobile-menu-button {
    display: inline-flex !important;
  }
}

/* v22: calm document typography, FAQ/notice list layout, compact footer */
body:has(.seo-service) {
  overflow-x: hidden;
}

.container.main-doc,
.container.seo-service {
  line-height: 1.68 !important;
}

.container.seo-service,
.container.main-doc.info-page,
.container.main-doc.guide-page,
.container.main-doc.seo-page {
  font-size: 15px !important;
}

.container.seo-service .doc-hero,
.container.seo-service .seo-hero {
  margin-bottom: 34px !important;
}

.container.seo-service .seo-hero h1,
.container.seo-service .doc-hero h1,
body:has(.main-doc) .doc-hero h1,
body:has(.main-doc) .info-page > header h1,
.seo-service h1 {
  font-size: clamp(32px, 4.4vw, 44px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.seo-service .card h2,
.seo-service h2,
.doc-list > h2 {
  font-size: clamp(22px, 2.4vw, 25px) !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

.seo-service .card h3,
.seo-service h3,
.doc-list h3 {
  font-size: clamp(17px, 1.8vw, 19px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.seo-service p,
.seo-service li,
.seo-service table,
.seo-service .lead,
.seo-service .sub-text,
.seo-hero-description {
  font-size: 15px !important;
  line-height: 1.68 !important;
}

.seo-service .lead {
  font-size: 16px !important;
}

.seo-service .doc-eyebrow,
.seo-service .seo-kicker,
.doc-meta {
  font-size: 12px !important;
}

body:has(.category-tabs) .container.seo-service main > article.card,
body:has(.doc-meta) .container.seo-service main > section.card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.category-tabs {
  margin: 0 0 34px !important;
  padding: 0 0 18px;
  border-bottom: 1px solid #e5e7eb;
}

.category-tabs a {
  border-radius: 7px !important;
  background: #fff !important;
  font-size: 13px !important;
}

.doc-list {
  gap: 0 !important;
  margin: 0 !important;
}

.doc-list + .doc-list {
  margin-top: 42px !important;
}

.doc-list > h2 {
  margin: 0 0 10px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid #111827;
}

.doc-list article,
.doc-list details,
.doc-row {
  padding: 22px 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.doc-list article:first-of-type {
  border-top: 0 !important;
}

.doc-list article h2,
.doc-list article h3,
.doc-row h2,
.doc-row h3 {
  margin: 0 0 8px !important;
  color: #111827 !important;
  font-weight: 780 !important;
}

.doc-list article p,
.doc-row p {
  max-width: 760px;
  margin: 0 !important;
  color: #475569 !important;
}

.doc-meta {
  margin-bottom: 7px !important;
  color: #64748b !important;
  font-weight: 650 !important;
}

.site-footer .footer-contact,
.doc-footer .footer-contact,
body:has(.main-doc) footer .footer-contact {
  display: flex !important;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  margin: 10px 0 8px !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.site-footer .footer-contact a,
.doc-footer .footer-contact a,
body:has(.main-doc) footer .footer-contact a {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.site-footer .lawzero-footer-brand,
.doc-footer .lawzero-footer-brand,
.site-footer .footer-copy,
.doc-footer .footer-copy,
body:has(.main-doc) footer .lawzero-footer-brand,
body:has(.main-doc) footer .footer-copy {
  margin-top: 6px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
}

@media (max-width: 640px) {
  .container.seo-service,
  .container.main-doc.info-page,
  .container.main-doc.guide-page,
  .container.main-doc.seo-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .container.seo-service .seo-hero h1,
  .container.seo-service .doc-hero h1,
  body:has(.main-doc) .doc-hero h1,
  body:has(.main-doc) .info-page > header h1,
  .seo-service h1 {
    font-size: 30px !important;
  }

  .seo-service .card h2,
  .seo-service h2,
  .doc-list > h2 {
    font-size: 21px !important;
  }

  .seo-service p,
  .seo-service li,
  .seo-service table,
  .seo-service .sub-text,
  .seo-hero-description {
    font-size: 14.5px !important;
  }

  .category-tabs {
    gap: 7px !important;
    margin-bottom: 32px !important;
    overflow-x: visible !important;
  }

  .site-footer .footer-contact,
  .doc-footer .footer-contact,
  body:has(.main-doc) footer .footer-contact {
    flex-wrap: wrap;
    padding: 0 10px;
  }
}

/* v21: simplified information architecture and document-style SEO pages */
.global-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid #edf0f4;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
}

.global-nav-inner {
  width: min(100%, 1120px);
  padding: 14px 24px;
}

.global-brand {
  font-size: 19px;
  letter-spacing: 0;
}

.global-nav {
  gap: 6px 16px;
}

.global-nav a {
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.global-nav a:hover {
  color: #dc2626;
}

.site-hero-banner {
  margin-bottom: 12px;
}

.pc-guide-note,
.mobile-guide-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  margin: 2px auto 14px;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: none;
}

.guide-switch-link {
  color: #dc2626 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-decoration: none;
}

.container.main-doc,
.container.seo-service {
  font-size: 16px;
  line-height: 1.7;
}

.container.main-doc .card,
.container.seo-service .card {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.container.main-doc .seo-hero,
.container.seo-service .seo-hero,
.container.main-doc .doc-hero {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.container.seo-service .seo-hero h1,
body:has(.main-doc) .doc-hero h1,
body:has(.main-doc) .info-page > header h1 {
  font-size: clamp(30px, 3.4vw, 40px) !important;
  letter-spacing: 0 !important;
}

.guide-table,
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.65;
}

.guide-table th,
.guide-table td,
.doc-table th,
.doc-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

.guide-table th,
.doc-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 850;
}

.doc-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.doc-list article,
.doc-list details,
.doc-row {
  padding: 18px 0;
  border-bottom: 1px solid #e5e7eb;
}

.doc-list h2,
.doc-list h3,
.doc-row h2,
.doc-row h3 {
  margin-top: 0;
  letter-spacing: 0;
}

.doc-meta {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.category-tabs a {
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.category-tabs a:hover {
  border-color: #fecaca;
  color: #dc2626;
}

.site-footer,
.doc-footer,
footer {
  border-top: 1px solid #edf0f4 !important;
  background: #fff;
  text-align: center !important;
}

.footer-inner {
  padding: 28px 20px !important;
}

.footer-links {
  gap: 8px 16px !important;
}

.footer-links a {
  font-size: 13px !important;
  font-weight: 750 !important;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  .global-nav-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }

  .global-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .global-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 30px;
    padding: 4px 2px;
    border-radius: 7px;
    background: #f8fafc;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
  }

  .pc-guide-note,
  .mobile-guide-note {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .container.seo-service .seo-hero h1,
  body:has(.main-doc) .doc-hero h1,
  body:has(.main-doc) .info-page > header h1 {
    font-size: 28px !important;
  }
}

/* High-specificity document guard for legacy SEO overrides */
html body:has(.main-doc) .main-doc {
  width: min(100%, 880px) !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 72px 24px 96px !important;
}

html body:has(.main-doc) .main-doc .seo-hero,
html body:has(.main-doc) .main-doc > header {
  margin: 0 0 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:has(.main-doc) .main-doc .seo-cta-row,
html body:has(.main-doc) .main-doc .seo-hero-panel {
  display: none !important;
}

html body:has(.main-doc) .main-doc article > section,
html body:has(.main-doc) .main-doc article > .card {
  margin: 0 !important;
  padding: 34px 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:has(.main-doc) .main-doc article > section:first-child,
html body:has(.main-doc) .main-doc article > .card:first-child {
  padding-top: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 640px) {
  html body:has(.main-doc) .main-doc {
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 20px 72px !important;
  }

  html body:has(.main-doc) .main-doc .seo-pill-links,
  html body:has(.main-doc) .main-doc .info-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow-x: visible !important;
  }
}

/* Unified document system for SEO, policy, intro, and contact pages */
body:has(.main-doc) {
  margin: 0;
  background: #fff !important;
  color: #0f172a;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:has(.main-doc) .main-doc {
  width: min(100%, 880px) !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 72px 24px 96px !important;
  box-sizing: border-box;
}

body:has(.main-doc) .main-doc,
body:has(.main-doc) .main-doc * {
  letter-spacing: 0;
}

body:has(.main-doc) .doc-hero,
body:has(.main-doc) .seo-hero {
  width: 100% !important;
  margin: 0 0 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.main-doc) .seo-hero::before,
body:has(.main-doc) .seo-hero::after {
  display: none !important;
  content: none !important;
}

body:has(.main-doc) .seo-hero-inner,
body:has(.main-doc) .seo-hero-copy {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

body:has(.main-doc) .doc-eyebrow,
body:has(.main-doc) .seo-kicker {
  display: block !important;
  margin: 0 0 14px !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

body:has(.main-doc) .doc-hero h1,
body:has(.main-doc) .seo-hero h1,
body:has(.main-doc) .info-page > header h1 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(34px, 5vw, 50px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

body:has(.main-doc) .doc-lead,
body:has(.main-doc) .seo-hero-description,
body:has(.main-doc) .info-page > header .sub-text {
  width: 100% !important;
  max-width: 760px !important;
  margin: 18px 0 0 !important;
  color: #334155 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
}

body:has(.main-doc) .doc-nav,
body:has(.main-doc) .seo-pill-links,
body:has(.main-doc) .info-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  overflow-x: visible !important;
}

body:has(.main-doc) .doc-nav a,
body:has(.main-doc) .seo-pill,
body:has(.main-doc) .info-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: normal !important;
  box-shadow: none !important;
}

body:has(.main-doc) .doc-nav a:hover,
body:has(.main-doc) .seo-pill:hover,
body:has(.main-doc) .info-nav a:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

body:has(.main-doc) .seo-cta-row,
body:has(.main-doc) .seo-hero-panel,
body:has(.main-doc) .seo-visual,
body:has(.main-doc) .seo-visual-card,
body:has(.main-doc) .seo-metric-row {
  display: none !important;
}

body:has(.main-doc) main,
body:has(.main-doc) article {
  width: 100% !important;
  max-width: none !important;
}

body:has(.main-doc) article > section,
body:has(.main-doc) .doc-section,
body:has(.main-doc) article > .card {
  width: 100% !important;
  margin: 0 !important;
  padding: 34px 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.main-doc) article > section:first-child,
body:has(.main-doc) article > .card:first-child {
  padding-top: 0 !important;
  border-top: 0 !important;
}

body:has(.main-doc) h2,
body:has(.main-doc) .doc-section h2 {
  margin: 0 0 16px !important;
  color: #0f172a !important;
  font-size: 26px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

body:has(.main-doc) h3 {
  margin: 26px 0 10px !important;
  color: #0f172a !important;
  font-size: 19px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

body:has(.main-doc) p,
body:has(.main-doc) li,
body:has(.main-doc) td,
body:has(.main-doc) th {
  color: #1f2937 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

body:has(.main-doc) p {
  margin: 0 0 14px !important;
}

body:has(.main-doc) ul,
body:has(.main-doc) ol {
  margin: 0 0 16px 22px !important;
  padding: 0 !important;
}

body:has(.main-doc) li + li {
  margin-top: 6px !important;
}

body:has(.main-doc) .lead {
  color: #1f2937 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

body:has(.main-doc) .highlight-box,
body:has(.main-doc) .summary-box,
body:has(.main-doc) .notice-box,
body:has(.main-doc) .formula {
  margin: 18px 0 0 !important;
  padding: 18px 20px !important;
  border: 1px solid #dbe3ec !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  box-shadow: none !important;
}

body:has(.main-doc) .content-grid,
body:has(.main-doc) .three-grid,
body:has(.main-doc) .info-grid,
body:has(.main-doc) .related-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

body:has(.main-doc) .example-card,
body:has(.main-doc) .mini-card,
body:has(.main-doc) .related-list a,
body:has(.main-doc) .faq-item {
  padding: 18px 20px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body:has(.main-doc) .example-card::before,
body:has(.main-doc) .mini-card::before {
  display: none !important;
  content: none !important;
}

body:has(.main-doc) .table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}

body:has(.main-doc) .doc-table,
body:has(.main-doc) .seo-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid #dbe3ec !important;
  background: #fff !important;
}

body:has(.main-doc) .doc-table th,
body:has(.main-doc) .doc-table td,
body:has(.main-doc) .seo-table th,
body:has(.main-doc) .seo-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-align: left !important;
  vertical-align: top !important;
}

body:has(.main-doc) .doc-table th,
body:has(.main-doc) .seo-table th {
  width: 28%;
  color: #0f172a !important;
  font-weight: 750 !important;
  background: #f8fafc !important;
}

body:has(.main-doc) .cta-panel,
body:has(.main-doc) .doc-cta {
  margin-top: 34px !important;
  padding: 28px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  text-align: left !important;
}

body:has(.main-doc) .cta-panel .sub-text {
  color: #475569 !important;
}

body:has(.main-doc) .cta-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin-top: 12px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  background: #dc2626 !important;
  color: #fff !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body:has(.main-doc) footer,
body:has(.main-doc) .doc-footer {
  width: 100% !important;
  margin: 72px 0 0 !important;
  padding: 28px 0 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  text-align: center !important;
}

body:has(.main-doc) .footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px 18px !important;
  margin: 0 0 16px !important;
}

.global-site-header {
  width: 100%;
  border-bottom: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, .96);
}

.global-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 18px 24px;
  box-sizing: border-box;
}

.global-brand {
  flex: 0 0 auto;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.global-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
}

.global-nav a {
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.global-nav a:hover,
.global-brand:hover {
  color: #dc2626;
}

[hidden] {
  display: none !important;
}

body:has(.main-doc) .doc-nav,
body:has(.main-doc) .seo-pill-links,
body:has(.main-doc) .info-nav {
  display: none !important;
}

.site-footer,
.doc-footer {
  width: 100%;
  border-top: 1px solid #e2e8f0 !important;
  text-align: center !important;
}

.footer-inner {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 32px 24px;
  box-sizing: border-box;
  text-align: center;
}

.site-footer .footer-links,
.doc-footer .footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px 18px !important;
  margin: 0 0 16px !important;
}

.site-footer .footer-contact,
.doc-footer p {
  margin: 0 0 14px !important;
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.site-footer .footer-contact a,
.site-footer .footer-links a,
.doc-footer a {
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.site-footer .lawzero-footer-brand {
  margin-top: 12px !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  .global-nav-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 20px;
  }

  .global-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    width: 100%;
  }

  .global-nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
  }

  .footer-inner {
    padding: 28px 20px;
  }
}

body:has(.main-doc) footer a,
body:has(.main-doc) footer p {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

@media (max-width: 640px) {
  body:has(.main-doc) .main-doc {
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 20px 72px !important;
  }

  body:has(.main-doc) .doc-hero,
  body:has(.main-doc) .seo-hero {
    margin-bottom: 42px !important;
  }

  body:has(.main-doc) .doc-hero h1,
  body:has(.main-doc) .seo-hero h1,
  body:has(.main-doc) .info-page > header h1 {
    font-size: 32px !important;
    line-height: 1.16 !important;
  }

  body:has(.main-doc) .doc-lead,
  body:has(.main-doc) .seo-hero-description,
  body:has(.main-doc) .info-page > header .sub-text {
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  body:has(.main-doc) .doc-nav,
  body:has(.main-doc) .seo-pill-links,
  body:has(.main-doc) .info-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body:has(.main-doc) .doc-nav a,
  body:has(.main-doc) .seo-pill,
  body:has(.main-doc) .info-nav a {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    text-align: center !important;
  }

  body:has(.main-doc) .doc-nav > :last-child:nth-child(odd),
  body:has(.main-doc) .seo-pill-links > :last-child:nth-child(odd),
  body:has(.main-doc) .info-nav > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  body:has(.main-doc) article > section,
  body:has(.main-doc) article > .card {
    padding: 28px 0 !important;
  }

  body:has(.main-doc) h2 {
    font-size: 24px !important;
  }

  body:has(.main-doc) .cta-button {
    width: 100% !important;
  }
}
/* SEO document mode - terminal cascade layer */
.seo-service .seo-hero-panel,
.seo-service .seo-visual,
.seo-service .seo-visual-card,
.seo-service .seo-metric-row {
  display: none !important;
}

.seo-service .seo-hero,
.info-page .seo-hero,
.seo-page .seo-hero,
.guide-page .seo-hero {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(.seo-service) .container.seo-service .seo-hero,
body:has(.seo-service) .container.info-page .seo-hero,
body:has(.seo-service) .container.guide-page .seo-hero,
body:has(.seo-service) .container.seo-page .seo-hero {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(.seo-service) .container.seo-service .seo-hero::before,
body:has(.seo-service) .container.seo-service .seo-hero::after,
body:has(.seo-service) .container.info-page .seo-hero::before,
body:has(.seo-service) .container.info-page .seo-hero::after,
body:has(.seo-service) .container.guide-page .seo-hero::before,
body:has(.seo-service) .container.guide-page .seo-hero::after,
body:has(.seo-service) .container.seo-page .seo-hero::before,
body:has(.seo-service) .container.seo-page .seo-hero::after {
  display: none !important;
  content: none !important;
}

.seo-service .seo-hero-inner,
.info-page .seo-hero-inner,
.seo-page .seo-hero-inner,
.guide-page .seo-hero-inner {
  display: block !important;
}

.seo-service .seo-hero-copy,
.info-page .seo-hero-copy,
.seo-page .seo-hero-copy,
.guide-page .seo-hero-copy,
.seo-service article,
.info-page article,
.seo-page article,
.guide-page article {
  width: 100% !important;
  max-width: 860px !important;
}

.seo-service article > .card,
.info-page article > .card,
.seo-page article > .card,
.guide-page article > .card,
body:has(.seo-service) .seo-service .card {
  margin: 0 !important;
  padding: 36px 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.seo-service article > .card:first-child,
.info-page article > .card:first-child,
.seo-page article > .card:first-child,
.guide-page article > .card:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.seo-service .seo-hero h1,
.info-page .seo-hero h1,
.seo-page .seo-hero h1,
.guide-page .seo-hero h1 {
  color: #0f172a !important;
}

.seo-service .seo-hero-description,
.info-page .seo-hero-description,
.seo-page .seo-hero-description,
.guide-page .seo-hero-description,
.seo-service article p,
.info-page article p,
.seo-page article p,
.guide-page article p,
.seo-service article li,
.info-page article li,
.seo-page article li,
.guide-page article li {
  color: #475569 !important;
}

/* Final document-style override for SEO, policy, and intro pages */
.seo-service .seo-hero-panel,
.seo-service .seo-visual,
.seo-service .seo-visual-card,
.seo-service .seo-metric-row {
  display: none !important;
}

.seo-service article > .card,
.info-page article > .card,
.seo-page article > .card,
.guide-page article > .card,
body:has(.seo-service) .seo-service .card {
  margin: 0 !important;
  padding: 36px 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.seo-service article > .card:first-child,
.info-page article > .card:first-child,
.seo-page article > .card:first-child,
.guide-page article > .card:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.seo-service .seo-hero,
.info-page .seo-hero,
.seo-page .seo-hero,
.guide-page .seo-hero {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.seo-service .seo-hero-inner,
.info-page .seo-hero-inner,
.seo-page .seo-hero-inner,
.guide-page .seo-hero-inner {
  display: block !important;
}

.seo-service .seo-hero-copy,
.info-page .seo-hero-copy,
.seo-page .seo-hero-copy,
.guide-page .seo-hero-copy {
  width: 100% !important;
  max-width: 860px !important;
}

.seo-service .seo-hero h1,
.info-page .seo-hero h1,
.seo-page .seo-hero h1,
.guide-page .seo-hero h1 {
  color: #0f172a !important;
}

.seo-service .seo-hero-description,
.info-page .seo-hero-description,
.seo-page .seo-hero-description,
.guide-page .seo-hero-description,
.seo-service article p,
.info-page article p,
.seo-page article p,
.guide-page article p,
.seo-service article li,
.info-page article li,
.seo-page article li,
.guide-page article li {
  color: #475569 !important;
}

.seo-service .highlight-box,
.seo-service .summary-box,
.seo-service .formula,
.seo-service .example-card,
.seo-service .mini-card,
.info-page .mini-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.seo-service .highlight-box,
.seo-service .summary-box {
  padding: 18px 20px !important;
  color: #334155 !important;
}

.seo-service .example-card::before,
.seo-service .mini-card::before {
  display: none !important;
  content: none !important;
}

.seo-service article,
.info-page article,
.seo-page article,
.guide-page article {
  max-width: 860px !important;
}

/* FINAL DOCUMENT MODE OVERRIDE */
.seo-service .seo-hero-panel,
.seo-service .seo-visual,
.seo-service .seo-visual-card,
.seo-service .seo-metric-row {
  display: none !important;
}

.seo-service article > .card,
.info-page article > .card,
.seo-page article > .card,
.guide-page article > .card,
body:has(.seo-service) .seo-service .card {
  margin: 0 !important;
  padding: 36px 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.seo-service article > .card:first-child,
.info-page article > .card:first-child,
.seo-page article > .card:first-child,
.guide-page article > .card:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 640px) {
  .seo-pill-links,
  .seo-nav,
  .guide-nav,
  .info-nav,
  .page-nav,
  .pill-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
  }

  .seo-pill,
  .guide-pill,
  .info-nav a,
  .page-nav a,
  .pill-nav a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    white-space: normal !important;
  }

  .seo-pill-links > :last-child:nth-child(odd),
  .seo-nav > :last-child:nth-child(odd),
  .guide-nav > :last-child:nth-child(odd),
  .info-nav > :last-child:nth-child(odd),
  .page-nav > :last-child:nth-child(odd),
  .pill-nav > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

/* vNext final override: clean document pages */
body:has(.seo-service),
body:has(.info-page),
body:has(.seo-page),
body:has(.guide-page) {
  background: #f8fafc !important;
}

.container.seo-service,
.container.info-page,
.container.seo-page,
.container.guide-page {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 48px 24px 32px !important;
  overflow-x: hidden !important;
}

.seo-service header,
.info-page header,
.seo-page header,
.guide-page header {
  margin: 0 0 34px !important;
  padding: 0 !important;
  text-align: left !important;
}

.container.seo-service .seo-hero {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.container.seo-service .seo-hero::after,
.seo-service .card h2::before,
.info-page .card h2::before,
.mini-card::before,
.related-list a::before,
.example-card::before {
  content: none !important;
  display: none !important;
}

.seo-hero-inner {
  display: block !important;
}

.seo-hero-panel,
.seo-visual,
.seo-visual-card,
.seo-metric-row {
  display: none !important;
}

.seo-kicker {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #dc2626 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.container.seo-service .seo-hero h1,
.info-page h1,
.seo-page h1,
.guide-page h1 {
  max-width: 780px !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(34px, 5vw, 52px) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.seo-hero-description,
.info-page .sub-text,
.seo-page .sub-text,
.guide-page .sub-text {
  max-width: 780px !important;
  margin: 16px 0 0 !important;
  color: #334155 !important;
  font-size: 18px !important;
  line-height: 1.72 !important;
  text-align: left !important;
}

.seo-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.seo-cta,
.seo-secondary-cta,
.cta-button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 11px 16px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

.seo-cta,
.cta-button {
  border: 1px solid #dc2626 !important;
  background: #dc2626 !important;
  color: #fff !important;
}

.seo-secondary-cta {
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  color: #0f172a !important;
}

.seo-pill-links,
.seo-nav,
.guide-nav,
.info-nav,
.page-nav,
.pill-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 20px !important;
  overflow: visible !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

.seo-pill,
.guide-pill,
.info-nav a,
.page-nav a,
.pill-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
}

.seo-service main,
.info-page main,
.seo-page main,
.guide-page main {
  margin-top: 0 !important;
}

.seo-service article,
.info-page article,
.seo-page article,
.guide-page article {
  display: block !important;
}

.seo-service article > .card,
.info-page article > .card,
.seo-page article > .card,
.guide-page article > .card,
body:has(.seo-service) .seo-service .card {
  margin: 0 !important;
  padding: 36px 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.seo-service article > .card:first-child,
.info-page article > .card:first-child,
.seo-page article > .card:first-child,
.guide-page article > .card:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.seo-service .card h2,
.info-page .card h2,
.seo-page .card h2,
.guide-page .card h2 {
  display: block !important;
  margin: 0 0 16px !important;
  color: #0f172a !important;
  font-size: clamp(23px, 3vw, 30px) !important;
  font-weight: 950 !important;
  line-height: 1.28 !important;
}

.seo-service .card h3,
.info-page .card h3,
.seo-page .card h3,
.guide-page .card h3,
.faq-item h3 {
  margin: 22px 0 8px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.seo-service p,
.seo-service li,
.info-page p,
.info-page li,
.seo-page p,
.seo-page li,
.guide-page p,
.guide-page li,
.lead {
  color: #1e293b !important;
  font-size: 17px !important;
  line-height: 1.78 !important;
}

.highlight-box,
.summary-box,
.notice-box,
.contact-box,
.formula {
  margin: 18px 0 0 !important;
  padding: 16px 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #1e293b !important;
}

.formula {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

.content-grid,
.three-grid,
.related-list,
.info-grid,
.time-band {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.mini-card,
.related-list a,
.example-card,
.time-band div {
  min-height: 0 !important;
  padding: 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #0f172a !important;
}

.mini-card strong,
.example-card strong,
.related-list a {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.mini-card span,
.mini-card p,
.example-card span,
.related-list span {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.example-result {
  color: #dc2626 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.table-wrap {
  margin-top: 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.cta-panel,
.cta-panel h2,
.cta-panel p,
.cta-panel .sub-text {
  background: transparent !important;
  color: #0f172a !important;
  text-align: left !important;
}

.footer-links {
  justify-content: flex-start !important;
  gap: 8px 16px !important;
}

.seo-service footer,
.info-page footer,
.seo-page footer,
.guide-page footer {
  margin-top: 12px !important;
  padding: 28px 0 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  text-align: left !important;
}

@media (max-width: 640px) {
  .container.seo-service,
  .container.info-page,
  .container.seo-page,
  .container.guide-page {
    padding: 32px 16px 28px !important;
  }

  .container.seo-service .seo-hero h1,
  .info-page h1,
  .seo-page h1,
  .guide-page h1 {
    font-size: 32px !important;
  }

  .seo-hero-description,
  .info-page .sub-text,
  .seo-page .sub-text,
  .guide-page .sub-text {
    font-size: 16px !important;
  }

  .seo-cta-row,
  .seo-pill-links,
  .seo-nav,
  .guide-nav,
  .info-nav,
  .page-nav,
  .pill-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: visible !important;
  }

  .seo-cta-row {
    grid-template-columns: 1fr !important;
  }

  .seo-cta,
  .seo-secondary-cta,
  .cta-button,
  .seo-pill,
  .guide-pill,
  .info-nav a,
  .page-nav a,
  .pill-nav a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .seo-pill-links > :last-child:nth-child(odd),
  .seo-nav > :last-child:nth-child(odd),
  .guide-nav > :last-child:nth-child(odd),
  .info-nav > :last-child:nth-child(odd),
  .page-nav > :last-child:nth-child(odd),
  .pill-nav > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .content-grid,
  .three-grid,
  .related-list,
  .info-grid,
  .time-band {
    grid-template-columns: 1fr !important;
  }

  .seo-service article > .card,
  .info-page article > .card,
  .seo-page article > .card,
  .guide-page article > .card {
    padding: 30px 0 !important;
  }
}

/* vNext: document-first SEO and policy pages */
body:has(.seo-service),
body:has(.info-page),
body:has(.seo-page),
body:has(.guide-page) {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.container.seo-service,
.container.info-page,
.container.seo-page,
.container.guide-page {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 48px 24px 32px !important;
  overflow-x: hidden !important;
}

.seo-service header,
.info-page header,
.seo-page header,
.guide-page header {
  margin: 0 0 34px !important;
  padding: 0 !important;
  text-align: left !important;
}

.container.seo-service .seo-hero {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.container.seo-service .seo-hero::after {
  content: none !important;
}

.seo-hero-inner {
  display: block !important;
}

.seo-hero-copy,
.container.seo-service .seo-hero h1,
.seo-hero-description,
.info-page h1,
.info-page .sub-text {
  max-width: 780px !important;
}

.seo-kicker {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #dc2626 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.container.seo-service .seo-hero h1,
.info-page h1,
.seo-page h1,
.guide-page h1 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(34px, 5vw, 52px) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.seo-hero-description,
.info-page .sub-text,
.seo-page .sub-text,
.guide-page .sub-text {
  margin: 16px 0 0 !important;
  color: #334155 !important;
  font-size: 18px !important;
  line-height: 1.72 !important;
  text-align: left !important;
}

.seo-hero-panel,
.seo-visual,
.seo-visual-card,
.seo-metric-row {
  display: none !important;
}

.seo-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.seo-cta,
.seo-secondary-cta,
.cta-button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 11px 16px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

.seo-cta,
.cta-button {
  border: 1px solid #dc2626 !important;
  background: #dc2626 !important;
  color: #fff !important;
}

.seo-secondary-cta {
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  color: #0f172a !important;
}

.seo-pill-links,
.seo-nav,
.guide-nav,
.info-nav,
.page-nav,
.pill-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 20px !important;
  overflow: visible !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

.seo-pill,
.guide-pill,
.info-nav a,
.page-nav a,
.pill-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  flex: 0 1 auto !important;
}

.seo-service main,
.info-page main,
.seo-page main,
.guide-page main {
  margin-top: 0 !important;
}

.seo-service article,
.info-page article,
.seo-page article,
.guide-page article {
  display: block !important;
}

.seo-service article > .card,
.info-page article > .card,
.seo-page article > .card,
.guide-page article > .card,
body:has(.seo-service) .seo-service .card {
  margin: 0 !important;
  padding: 36px 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.seo-service article > .card:first-child,
.info-page article > .card:first-child,
.seo-page article > .card:first-child,
.guide-page article > .card:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.seo-service .card h2,
.info-page .card h2,
.seo-page .card h2,
.guide-page .card h2 {
  display: block !important;
  margin: 0 0 16px !important;
  color: #0f172a !important;
  font-size: clamp(23px, 3vw, 30px) !important;
  font-weight: 950 !important;
  line-height: 1.28 !important;
}

.seo-service .card h2::before,
.info-page .card h2::before,
.seo-page .card h2::before,
.guide-page .card h2::before {
  content: none !important;
}

.seo-service .card h3,
.info-page .card h3,
.seo-page .card h3,
.guide-page .card h3,
.faq-item h3 {
  margin: 22px 0 8px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}

.seo-service p,
.seo-service li,
.info-page p,
.info-page li,
.seo-page p,
.seo-page li,
.guide-page p,
.guide-page li,
.lead {
  color: #1e293b !important;
  font-size: 17px !important;
  line-height: 1.78 !important;
}

.seo-service ul,
.info-page ul,
.seo-page ul,
.guide-page ul {
  margin: 14px 0 0 !important;
  padding-left: 22px !important;
}

.seo-service li,
.info-page li,
.seo-page li,
.guide-page li {
  margin-bottom: 8px !important;
}

.highlight-box,
.summary-box,
.notice-box,
.contact-box {
  margin: 18px 0 0 !important;
  padding: 16px 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1e293b !important;
  box-shadow: none !important;
}

.formula {
  margin: 18px 0 !important;
  padding: 18px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}

.content-grid,
.three-grid,
.related-list,
.info-grid,
.time-band {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.mini-card,
.related-list a,
.example-card,
.time-band div {
  min-height: 0 !important;
  padding: 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #0f172a !important;
}

.mini-card::before,
.related-list a::before,
.related-list a[data-icon]::before,
.example-card::before {
  content: none !important;
}

.mini-card strong,
.example-card strong,
.related-list a {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.mini-card span,
.mini-card p,
.example-card span,
.related-list span {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.example-result {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #dc2626 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.table-wrap {
  margin-top: 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow-x: auto !important;
}

.seo-table th,
.seo-table td,
.guide-table th,
.guide-table td {
  padding: 14px !important;
  color: #1e293b !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.seo-table th,
.guide-table th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 900 !important;
}

.faq-item {
  padding: 20px 0 !important;
  border-top: 1px solid #e2e8f0 !important;
}

.cta-panel {
  text-align: left !important;
  background: transparent !important;
  color: #0f172a !important;
}

.cta-panel h2,
.cta-panel p,
.cta-panel .sub-text {
  color: #0f172a !important;
}

.text-link {
  color: #dc2626 !important;
  font-weight: 850 !important;
  border-bottom-color: rgba(220, 38, 38, .28) !important;
}

.footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px 16px !important;
  margin: 0 0 14px !important;
}

.footer-links a,
.footer-links button {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.seo-service footer,
.info-page footer,
.seo-page footer,
.guide-page footer {
  margin-top: 12px !important;
  padding: 28px 0 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  text-align: left !important;
}

.seo-service footer p,
.info-page footer p,
.seo-page footer p,
.guide-page footer p {
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

@media (max-width: 640px) {
  .container.seo-service,
  .container.info-page,
  .container.seo-page,
  .container.guide-page {
    padding: 32px 16px 28px !important;
  }

  .container.seo-service .seo-hero h1,
  .info-page h1,
  .seo-page h1,
  .guide-page h1 {
    font-size: 32px !important;
  }

  .seo-hero-description,
  .info-page .sub-text,
  .seo-page .sub-text,
  .guide-page .sub-text {
    font-size: 16px !important;
  }

  .seo-cta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .seo-cta,
  .seo-secondary-cta,
  .cta-button {
    width: 100% !important;
  }

  .seo-pill-links,
  .seo-nav,
  .guide-nav,
  .info-nav,
  .page-nav,
  .pill-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
  }

  .seo-pill,
  .guide-pill,
  .info-nav a,
  .page-nav a,
  .pill-nav a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 9px 8px !important;
    white-space: normal !important;
  }

  .seo-pill-links > :last-child:nth-child(odd),
  .seo-nav > :last-child:nth-child(odd),
  .guide-nav > :last-child:nth-child(odd),
  .info-nav > :last-child:nth-child(odd),
  .page-nav > :last-child:nth-child(odd),
  .pill-nav > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .content-grid,
  .three-grid,
  .related-list,
  .info-grid,
  .time-band {
    grid-template-columns: 1fr !important;
  }

  .seo-service article > .card,
  .info-page article > .card,
  .seo-page article > .card,
  .guide-page article > .card {
    padding: 30px 0 !important;
  }

  .seo-service p,
  .seo-service li,
  .info-page p,
  .info-page li,
  .seo-page p,
  .seo-page li,
  .guide-page p,
  .guide-page li,
  .lead {
    font-size: 16px !important;
  }
}

body {
  min-height: 100svh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

button,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: rgba(17, 24, 39, .12);
}

button,
[role="button"],
.share-link-short {
  min-height: 44px;
}

body.is-toss-inapp #developerSupport,
body.is-toss-inapp #kakaoShareBtn,
body.is-toss-inapp .developer-support-card,
body.is-toss-inapp .donation-panel {
  display: none !important;
}

body.is-toss-inapp .toss-primary-share-btn {
  background: #0064ff;
  color: #fff;
  border: 1px solid #0057e0;
  box-shadow: 0 10px 22px rgba(0, 100, 255, .18);
}

body.is-toss-inapp .header-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

textarea {
  font-family: Arial, 'Noto Sans KR', sans-serif;
}

@media (max-width:900px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .container {
    padding: 14px 12px calc(24px + env(safe-area-inset-bottom));
  }

  input,
  select,
  textarea,
  button {
    min-height: 46px;
    font-size: 16px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-height: auto;
    transform: scale(1.08);
  }

  .card,
  .option-box,
  .pay-option-card,
  .allowance-card {
    border-radius: 14px;
    padding: 16px;
  }

  .top-save-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .top-save-bar button {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    font-size: 13px;
  }

  .top-save-bar .save-state {
    grid-column: 1 / -1;
    text-align: center;
  }

  .calculate-btn {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 20;
    min-height: 56px;
  }

  .share-box textarea {
    display: block;
    min-height: 88px;
    margin-top: 8px;
    word-break: break-all;
  }

  .share-link-short {
    min-height: 48px;
  }

  body.is-toss-inapp .header-tools {
    grid-template-columns: 1fr;
  }

  .mobile-day-sheet {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* v42: final winning step hierarchy */
.card.step-card,
body.force-mobile-view .card.step-card {
  margin-bottom: 14px !important;
  border: 1px solid #e8edf3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .04) !important;
  overflow: hidden !important;
}

.card.step-card.step-open,
body.force-mobile-view .card.step-card.step-open {
  border-color: rgba(15, 23, 42, .18) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .075) !important;
}

.card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-completed:not(.step-open) {
  border-color: rgba(37, 99, 235, .14) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;
}

.card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open) {
  border-color: #edf1f5 !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .03) !important;
  opacity: 1 !important;
}

.step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle {
  min-height: 76px !important;
  padding: 15px 15px !important;
  gap: 12px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
}

.step-card.step-completed:not(.step-open) .step-toggle,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle {
  min-height: 68px !important;
  padding: 12px 14px !important;
  gap: 11px !important;
  background: #fff !important;
}

.step-card.step-locked:not(.step-open) .step-toggle,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
  min-height: 62px !important;
  padding: 10px 13px !important;
  gap: 10px !important;
  background: #fff !important;
}

.step-card.step-open .step-toggle-title,
body.force-mobile-view .step-card.step-open .step-toggle-title {
  font-size: 16.5px !important;
  line-height: 1.18 !important;
  color: #111827 !important;
}

.step-card.step-completed:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-title {
  font-size: 15.5px !important;
  line-height: 1.16 !important;
  color: #111827 !important;
}

.step-card.step-locked:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
  font-size: 15px !important;
  line-height: 1.14 !important;
  color: #344054 !important;
}

.step-card.step-open .step-toggle-sub,
body.force-mobile-view .step-card.step-open .step-toggle-sub {
  font-size: 10.75px !important;
  line-height: 1.18 !important;
  opacity: .72 !important;
}

.step-card.step-completed:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-sub {
  font-size: 10.25px !important;
  line-height: 1.14 !important;
  opacity: .64 !important;
}

.step-card.step-locked:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-sub {
  font-size: 9.75px !important;
  line-height: 1.1 !important;
  opacity: .52 !important;
}

.step-card.step-open .step-arrow,
body.force-mobile-view .step-card.step-open .step-arrow {
  min-width: 50px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid #0f172a !important;
  background: #0f172a !important;
  color: #fff !important;
  font-size: 10.75px !important;
}

.step-card.step-completed:not(.step-open) .step-arrow,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-arrow {
  min-width: 54px !important;
  height: 27px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  border-color: #dbe5ff !important;
  background: #eef4ff !important;
  color: #1f3b8f !important;
  font-size: 10.5px !important;
}

.step-card.step-locked .step-arrow,
body.force-mobile-view .step-card.step-locked .step-arrow {
  min-width: 42px !important;
  height: 25px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border-color: #e7ebf0 !important;
  background: #f7f9fc !important;
  color: transparent !important;
}

.step-card.step-locked .step-arrow::before,
body.force-mobile-view .step-card.step-locked .step-arrow::before {
  content: "다음" !important;
  color: #7b8494 !important;
  font-size: 10px !important;
}

/* v45: last-mile active red emphasis */
.card.step-card.step-open,
.card.step-card.step-open:hover,
.card.step-card.step-open:focus-within,
body.force-mobile-view .card.step-card.step-open,
body.force-mobile-view .card.step-card.step-open:hover,
body.force-mobile-view .card.step-card.step-open:focus-within {
  border: 2px solid rgba(255, 90, 90, .56) !important;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 90, 90, .14), 0 8px 20px rgba(255, 90, 90, .075) !important;
}

.card.step-card.step-completed:not(.step-open),
.card.step-card.step-completed:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-completed:not(.step-open):hover {
  border: 1px solid #e9eef5 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.card.step-card.step-locked:not(.step-open),
.card.step-card.step-locked:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open):hover {
  border: 1px solid #f0f3f7 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.step-card.step-open .step-toggle,
.step-card.step-open .step-toggle:hover,
.step-card.step-open .step-toggle:focus,
body.force-mobile-view .step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle:hover,
body.force-mobile-view .step-card.step-open .step-toggle:focus {
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
}

/* SEO service pages */
body:has(.seo-service) {
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, .025), transparent 210px),
    linear-gradient(180deg, #fff 0%, #f7f8fb 32%, #f3f5f8 100%);
}

.seo-service {
  --seo-accent: #dc2626;
  --seo-accent-dark: #991b1b;
  --seo-accent-soft: #fff1f2;
  --seo-accent-line: #fecdd3;
  --seo-panel: #ffffff;
  --seo-ink: #111827;
  --seo-muted: #667085;
  max-width: 1040px;
  overflow-x: hidden;
}

.seo-service header {
  text-align: left;
  margin: 0 0 22px;
}

.seo-service .seo-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 310px;
  gap: 28px;
  align-items: center;
  padding: 34px;
  border: 1px solid #edf0f4;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff 0%, var(--seo-accent-soft) 52%, #fff7ed 100%);
  box-shadow: 0 20px 48px rgba(17, 24, 39, .08);
}

.seo-service .seo-hero::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: 34px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--seo-accent);
  opacity: .035;
  filter: blur(20px);
  pointer-events: none;
}

.seo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid var(--seo-accent-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--seo-accent-dark);
  font-size: 13px;
  font-weight: 950;
}

.seo-service h1 {
  max-width: 740px;
  margin: 0;
  color: var(--seo-ink);
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: 0;
}

.seo-hero-copy {
  max-width: 680px;
  margin: 14px 0 0;
  color: #4b5563;
  font-size: 17px;
  line-height: 1.72;
}

.seo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.seo-cta,
.seo-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 950;
  text-decoration: none;
}

.seo-cta {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 14px 26px rgba(220, 38, 38, .24);
}

.seo-secondary-cta {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
}

.seo-visual {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.seo-visual-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 20px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .08);
  backdrop-filter: blur(8px);
}

.seo-visual-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #111827;
  color: #fff;
  font-size: 28px;
}

.seo-visual-label {
  display: block;
  margin-top: 14px;
  color: var(--seo-muted);
  font-size: 13px;
  font-weight: 900;
}

.seo-visual-value {
  display: block;
  margin-top: 3px;
  color: var(--seo-accent);
  font-size: 26px;
  font-weight: 950;
  letter-spacing: 0;
}

.seo-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.seo-metric {
  padding: 13px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fff;
}

.seo-metric span {
  display: block;
  color: var(--seo-muted);
  font-size: 12px;
  font-weight: 900;
}

.seo-metric strong {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 17px;
  font-weight: 950;
}

.seo-service main {
  margin-top: 22px;
}

.seo-service .card {
  border-color: #edf0f4;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .045);
}

.seo-service .card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 23px;
  letter-spacing: 0;
}

.seo-service .card h2::before {
  content: "";
  width: 8px;
  height: 22px;
  border-radius: 999px;
  background: var(--seo-accent);
}

.seo-service p {
  color: #4b5563;
  line-height: 1.76;
}

.seo-nav,
.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 18px;
}

.seo-pill,
.guide-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.text-link {
  color: var(--seo-accent-dark);
  font-weight: 950;
  text-decoration: none;
  border-bottom: 1px solid rgba(220, 38, 38, .28);
}

.lead {
  margin: 0;
  color: #374151;
  font-size: 17px;
  line-height: 1.76;
}

.highlight-box,
.summary-box {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--seo-accent-line);
  border-radius: 14px;
  background: var(--seo-accent-soft);
  color: #7f1d1d;
  line-height: 1.65;
}

.formula {
  margin: 16px 0;
  padding: 16px;
  border-radius: 14px;
  background: #111827;
  color: #fff;
  font-weight: 950;
  line-height: 1.72;
}

.content-grid,
.three-grid,
.related-list {
  display: grid;
  gap: 12px;
}

.content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-grid,
.related-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-card,
.related-list a,
.example-card {
  position: relative;
  display: block;
  min-height: 100%;
  padding: 17px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  text-decoration: none;
}

.mini-card::before,
.related-list a[data-icon]::before,
.example-card::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: var(--seo-accent-soft);
  color: var(--seo-accent-dark);
  font-size: 17px;
  font-weight: 950;
}

.mini-card[data-icon]::before,
.related-list a[data-icon]::before,
.example-card::before {
  content: attr(data-icon);
}

.mini-card strong,
.related-list a {
  font-weight: 950;
}

.mini-card strong,
.example-card strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
  font-size: 16px;
}

.mini-card span,
.related-list span,
.example-card span {
  display: block;
  color: var(--seo-muted);
  font-size: 13px;
  line-height: 1.58;
}

.example-card {
  background: linear-gradient(180deg, #fff 0%, #fff7f7 100%);
}

.example-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #fee2e2;
  color: var(--seo-accent);
  font-size: 22px;
  font-weight: 950;
}

.time-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.time-band div {
  padding: 17px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fff;
}

.time-band strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
}

.table-wrap {
  overflow: auto;
  margin-top: 14px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fff;
}

.seo-table,
.guide-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.seo-table th,
.seo-table td,
.guide-table th,
.guide-table td {
  padding: 14px 15px;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.seo-table th,
.guide-table th {
  background: #f8fafc;
  color: #475467;
  font-size: 13px;
  font-weight: 950;
}

.seo-table tr:last-child td,
.guide-table tr:last-child td {
  border-bottom: 0;
}

.notice-list,
.check-list {
  margin: 14px 0 0;
  padding-left: 18px;
  color: #4b5563;
}

.notice-list li,
.check-list li,
.seo-service ul:not([class]) li {
  margin-bottom: 9px;
  line-height: 1.65;
}

.faq-item {
  padding: 17px 0;
  border-top: 1px solid #edf0f4;
}

.faq-item h3 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 16px;
}

.cta-panel {
  overflow: hidden;
  text-align: left;
  border: 0 !important;
  background: linear-gradient(135deg, #111827 0%, #252f3f 58%, #7f1d1d 100%) !important;
  color: #fff;
}

.cta-panel h2 {
  color: #fff;
}

.cta-panel h2::before {
  background: #ef4444 !important;
}

.cta-panel .sub-text,
.cta-panel p {
  color: #e5e7eb;
}

.cta-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 220px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(220, 38, 38, .28);
}

.seo-service footer {
  padding: 24px 0 4px;
  color: var(--seo-muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 760px) {
  .container.seo-service {
    padding: 16px 14px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .seo-service .seo-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px;
    border-radius: 20px;
    min-width: 0;
  }

  .seo-service .seo-hero *,
  .seo-service .card * {
    min-width: 0;
  }

  .seo-service p,
  .seo-hero-copy,
  .seo-service li {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .seo-service h1 {
    font-size: 30px;
    line-height: 1.2;
  }

  .seo-hero-copy {
    font-size: 15px;
  }

  .seo-hero-actions,
  .seo-nav,
  .guide-nav {
    justify-content: stretch;
  }

  .seo-cta,
  .seo-secondary-cta,
  .cta-button {
    width: 100%;
  }

  .seo-metric-row,
  .content-grid,
  .three-grid,
  .related-list,
  .time-band {
    grid-template-columns: 1fr !important;
  }

  .seo-service .card {
    padding: 20px;
    border-radius: 16px;
    max-width: 100%;
    overflow: hidden;
  }

  .seo-service .card h2 {
    font-size: 20px;
  }
}

/* v47: final visible active step outline */
.card.step-card.step-open,
.card.step-card.step-open:hover,
.card.step-card.step-open:focus-within,
body.force-mobile-view .card.step-card.step-open,
body.force-mobile-view .card.step-card.step-open:hover,
body.force-mobile-view .card.step-card.step-open:focus-within {
  border: 2px solid rgba(255, 90, 90, .56) !important;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 90, 90, .14), 0 8px 20px rgba(255, 90, 90, .075) !important;
}

.card.step-card.step-completed:not(.step-open),
.card.step-card.step-completed:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-completed:not(.step-open):hover {
  border: 1px solid #e9eef5 !important;
  box-shadow: none !important;
}

.card.step-card.step-locked:not(.step-open),
.card.step-card.step-locked:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open):hover {
  border: 1px solid #f0f3f7 !important;
  box-shadow: none !important;
}

.step-card.step-open .step-toggle,
.step-card.step-open .step-toggle:hover,
.step-card.step-open .step-toggle:focus,
body.force-mobile-view .step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle:hover,
body.force-mobile-view .step-card.step-open .step-toggle:focus {
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
}

/* v46: clearer active step outline */
.card.step-card.step-open,
.card.step-card.step-open:hover,
.card.step-card.step-open:focus-within,
body.force-mobile-view .card.step-card.step-open,
body.force-mobile-view .card.step-card.step-open:hover,
body.force-mobile-view .card.step-card.step-open:focus-within {
  border: 2px solid rgba(255, 90, 90, .56) !important;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 90, 90, .14), 0 8px 20px rgba(255, 90, 90, .075) !important;
}

.card.step-card.step-completed:not(.step-open),
.card.step-card.step-completed:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-completed:not(.step-open):hover {
  border: 1px solid #e9eef5 !important;
  box-shadow: none !important;
}

.card.step-card.step-locked:not(.step-open),
.card.step-card.step-locked:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open):hover {
  border: 1px solid #f0f3f7 !important;
  box-shadow: none !important;
}

.step-card.step-open .step-toggle,
.step-card.step-open .step-toggle:hover,
.step-card.step-open .step-toggle:focus,
body.force-mobile-view .step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle:hover,
body.force-mobile-view .step-card.step-open .step-toggle:focus {
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
}

/* v44: restore subtle active red emphasis */
.card.step-card.step-open,
.card.step-card.step-open:hover,
.card.step-card.step-open:focus-within,
body.force-mobile-view .card.step-card.step-open,
body.force-mobile-view .card.step-card.step-open:hover,
body.force-mobile-view .card.step-card.step-open:focus-within {
  border: 2px solid rgba(255, 90, 90, .56) !important;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 90, 90, .14), 0 8px 20px rgba(255, 90, 90, .075) !important;
}

.card.step-card.step-completed:not(.step-open),
.card.step-card.step-completed:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-completed:not(.step-open):hover {
  border: 1px solid #e9eef5 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.card.step-card.step-locked:not(.step-open),
.card.step-card.step-locked:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open):hover {
  border: 1px solid #f0f3f7 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.step-card.step-open .step-toggle,
.step-card.step-open .step-toggle:hover,
.step-card.step-open .step-toggle:focus,
body.force-mobile-view .step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle:hover,
body.force-mobile-view .step-card.step-open .step-toggle:focus {
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
}

.step-card.step-open .step-body,
body.force-mobile-view .step-card.step-open .step-body {
  padding: 9px 14px 14px !important;
}

@media (max-width: 900px) {
  .card.step-card,
  body.force-mobile-view .card.step-card {
    margin-bottom: 12px !important;
    border-radius: 13px !important;
  }

  .step-card.step-open .step-toggle,
  body.force-mobile-view .step-card.step-open .step-toggle {
    min-height: 74px !important;
    padding: 14px 12px !important;
  }

  .step-card.step-completed:not(.step-open) .step-toggle,
  body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle {
    min-height: 66px !important;
    padding: 11px 12px !important;
  }

  .step-card.step-locked:not(.step-open) .step-toggle,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
    min-height: 61px !important;
    padding: 10px 11px !important;
  }

  .step-card.step-open .step-toggle-title,
  body.force-mobile-view .step-card.step-open .step-toggle-title {
    font-size: 15.75px !important;
  }

  .step-card.step-completed:not(.step-open) .step-toggle-title,
  body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-title,
  .step-card.step-locked:not(.step-open) .step-toggle-title,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
    font-size: 15px !important;
  }
}

/* Final mobile nav guard for SEO/info pages */
@media (max-width: 640px) {
  .seo-pill-links,
  .seo-nav,
  .guide-nav,
  .info-nav,
  .page-nav,
  .pill-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: wrap !important;
    padding-bottom: 0 !important;
  }

  .seo-pill,
  .guide-pill,
  .info-nav a,
  .page-nav a,
  .pill-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 9px 8px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    flex: initial !important;
  }

  .seo-pill-links > :last-child:nth-child(odd),
  .seo-nav > :last-child:nth-child(odd),
  .guide-nav > :last-child:nth-child(odd),
  .info-nav > :last-child:nth-child(odd),
  .page-nav > :last-child:nth-child(odd),
  .pill-nav > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Modern SEO service refresh */
body:has(.seo-service) {
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 34%, #f6f8fb 100%);
}

.container.seo-service {
  max-width: 1120px !important;
  padding-top: 24px;
}

.container.seo-service .seo-hero {
  border: 1px solid #e7ebf0;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(255, 247, 247, .82) 62%, rgba(248, 250, 252, .98) 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
}

.container.seo-service .seo-hero::after {
  right: 28px;
  bottom: 28px;
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(239, 68, 68, .16), rgba(15, 23, 42, .08));
  opacity: .42;
  filter: blur(30px);
}

.seo-kicker {
  min-height: 32px;
  margin-bottom: 16px;
  padding: 7px 12px;
  border-color: rgba(220, 38, 38, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
  color: #b91c1c;
  font-size: 12px;
  letter-spacing: 0;
}

.container.seo-service .seo-hero h1 {
  color: #0f172a;
  font-weight: 950;
  letter-spacing: 0 !important;
}

.seo-hero-description {
  color: #475467;
  line-height: 1.66;
}

.seo-cta,
.seo-secondary-cta,
.cta-button {
  min-height: 46px;
  border-radius: 11px !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.seo-cta {
  background: #ef4444;
  box-shadow: 0 10px 22px rgba(239, 68, 68, .2);
}

.seo-secondary-cta {
  border-color: #d9e0e8;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.seo-cta:hover,
.seo-secondary-cta:hover,
.seo-pill:hover,
.cta-button:hover {
  transform: translateY(-1px);
}

.seo-secondary-cta:hover,
.seo-pill:hover {
  border-color: rgba(239, 68, 68, .28) !important;
  background: #fffafa !important;
}

.seo-pill-links,
.seo-nav,
.guide-nav {
  gap: 8px;
}

.seo-pill,
.guide-pill {
  min-height: 36px;
  padding: 8px 12px;
  border-color: #dde3ea !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .035) !important;
  color: #111827 !important;
  font-size: 13px;
}

.seo-hero-panel .seo-visual-card {
  border: 1px solid #e7ebf0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
}

.seo-visual-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #0f172a;
  font-weight: 900;
}

.seo-visual-label,
.seo-stat-card span,
.seo-hero-panel .seo-metric span {
  color: #667085;
}

.seo-visual-value,
.example-result {
  color: #e11d2e;
}

.seo-hero-panel .seo-metric-row {
  border-color: #e7ebf0;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .055);
}

.seo-stat-card,
.seo-hero-panel .seo-metric {
  border-color: #e7ebf0;
}

.seo-service main {
  margin-top: 24px;
}

.seo-service article {
  display: grid;
  gap: 18px;
}

.seo-service article > .card,
body:has(.seo-service) .seo-service .card,
.seo-page article > .card,
.guide-page article > .card,
.info-page article > .card {
  margin-bottom: 0 !important;
  border: 1px solid #e7ebf0 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .04) !important;
}

.seo-page .hero-card,
.guide-page .hero-card {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%) !important;
}

.seo-service .card h2 {
  margin-bottom: 15px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.28;
}

.seo-service .card h2::before {
  width: 5px;
  height: 20px;
  border-radius: 4px;
}

.seo-service p,
.lead {
  color: #344054;
  line-height: 1.72;
}

.highlight-box,
.summary-box {
  border-color: #fed7aa;
  border-radius: 12px;
  background: #fff7ed;
  color: #9a3412;
}

.formula {
  border-radius: 12px;
  background: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.mini-card,
.related-list a,
.example-card,
.time-band div {
  border-color: #e7ebf0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.example-card {
  background: linear-gradient(180deg, #fff 0%, #fff9f9 100%);
}

.mini-card::before,
.related-list a[data-icon]::before,
.example-card::before {
  border-radius: 10px;
}

.table-wrap {
  border-color: #e7ebf0;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .03);
}

.cta-panel {
  border-radius: 16px !important;
  background: linear-gradient(135deg, #101828 0%, #1d2939 58%, #991b1b 100%) !important;
}

@media (max-width: 900px) {
  body:has(.seo-service) {
    background: #f7f8fb;
  }

  .container.seo-service {
    padding: 14px 12px 26px !important;
  }

  .container.seo-service .seo-hero {
    padding: 24px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
  }

  .container.seo-service .seo-hero::after {
    right: 18px !important;
    bottom: 18px !important;
    width: 56px !important;
    height: 56px !important;
    opacity: .2 !important;
    filter: blur(22px) !important;
  }

  .seo-kicker {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .container.seo-service .seo-hero h1 {
    font-size: 31px !important;
    line-height: 1.18 !important;
  }

  .seo-hero-description {
    margin-top: 12px !important;
    font-size: 15px;
    line-height: 1.68;
  }

  .seo-cta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 22px;
  }

  .seo-pill-links {
    display: grid !important;
    grid-template-columns: repeat(2, calc((100% - 8px) / 2)) !important;
    gap: 8px !important;
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .seo-pill {
    display: inline-flex !important;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 9px 8px !important;
    font-size: 12px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    flex: initial !important;
    box-sizing: border-box !important;
  }

  .seo-pill-links .seo-pill:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .seo-hero-panel .seo-visual-card,
  .seo-hero-panel .seo-metric-row {
    border-radius: 14px;
  }

  .seo-hero-panel .seo-visual-card {
    padding: 18px;
  }

  .seo-service article {
    gap: 14px;
  }

  .seo-service article > .card,
  body:has(.seo-service) .seo-service .card,
  .seo-page article > .card,
  .guide-page article > .card,
  .info-page article > .card {
    padding: 20px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035) !important;
  }

  .seo-service .card h2 {
    gap: 8px;
    font-size: 20px;
  }

  .seo-service .card h2::before {
    width: 4px;
    height: 18px;
  }

  .lead {
    font-size: 16px !important;
  }

  .content-grid,
  .three-grid,
  .related-list,
  .time-band {
    gap: 10px;
  }

  .mini-card,
  .related-list a,
  .example-card,
  .time-band div,
  .highlight-box,
  .summary-box,
  .formula {
    border-radius: 12px;
  }

  .example-result {
    font-size: 20px;
  }
}

/* v41: balanced step hierarchy without cramped locked cards */
.card.step-card,
body.force-mobile-view .card.step-card {
  margin-bottom: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #e8edf3 !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .04) !important;
  overflow: hidden !important;
}

.card.step-card.step-open,
body.force-mobile-view .card.step-card.step-open {
  border-color: rgba(15, 23, 42, .18) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .075) !important;
}

.card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-completed:not(.step-open) {
  border-color: rgba(37, 99, 235, .14) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;
}

.card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open) {
  border-color: #edf1f5 !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .03) !important;
  opacity: 1 !important;
}

.step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle {
  min-height: 76px !important;
  padding: 15px 15px !important;
  gap: 12px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
}

.step-card.step-completed:not(.step-open) .step-toggle,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle {
  min-height: 68px !important;
  padding: 12px 14px !important;
  gap: 11px !important;
  background: #fff !important;
}

.step-card.step-locked:not(.step-open) .step-toggle,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
  min-height: 62px !important;
  padding: 10px 13px !important;
  gap: 10px !important;
  background: #fff !important;
}

.step-card.step-open .step-toggle-title,
body.force-mobile-view .step-card.step-open .step-toggle-title {
  font-size: 16.5px !important;
  line-height: 1.18 !important;
  color: #111827 !important;
}

.step-card.step-completed:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-title {
  font-size: 15.5px !important;
  line-height: 1.16 !important;
  color: #111827 !important;
}

.step-card.step-locked:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
  font-size: 15px !important;
  line-height: 1.14 !important;
  color: #344054 !important;
}

.step-card.step-open .step-toggle-sub,
body.force-mobile-view .step-card.step-open .step-toggle-sub {
  font-size: 10.75px !important;
  line-height: 1.18 !important;
  opacity: .72 !important;
}

.step-card.step-completed:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-sub {
  font-size: 10.25px !important;
  line-height: 1.14 !important;
  opacity: .64 !important;
}

.step-card.step-locked:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-sub {
  font-size: 9.75px !important;
  line-height: 1.1 !important;
  opacity: .52 !important;
}

.step-card.step-open .step-arrow,
body.force-mobile-view .step-card.step-open .step-arrow {
  min-width: 50px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid #0f172a !important;
  background: #0f172a !important;
  color: #fff !important;
  font-size: 10.75px !important;
}

.step-card.step-completed:not(.step-open) .step-arrow,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-arrow {
  min-width: 54px !important;
  height: 27px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  border-color: #dbe5ff !important;
  background: #eef4ff !important;
  color: #1f3b8f !important;
  font-size: 10.5px !important;
}

.step-card.step-locked .step-arrow,
body.force-mobile-view .step-card.step-locked .step-arrow {
  min-width: 42px !important;
  height: 25px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border-color: #e7ebf0 !important;
  background: #f7f9fc !important;
  color: transparent !important;
}

.step-card.step-locked .step-arrow::before,
body.force-mobile-view .step-card.step-locked .step-arrow::before {
  content: "다음" !important;
  color: #7b8494 !important;
  font-size: 10px !important;
}

.step-card.step-open .step-body,
body.force-mobile-view .step-card.step-open .step-body {
  padding: 9px 14px 14px !important;
}

@media (max-width: 900px) {
  .card.step-card,
  body.force-mobile-view .card.step-card {
    margin-bottom: 12px !important;
    border-radius: 13px !important;
  }

  .step-card.step-open .step-toggle,
  body.force-mobile-view .step-card.step-open .step-toggle {
    min-height: 74px !important;
    padding: 14px 12px !important;
  }

  .step-card.step-completed:not(.step-open) .step-toggle,
  body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle {
    min-height: 66px !important;
    padding: 11px 12px !important;
  }

  .step-card.step-locked:not(.step-open) .step-toggle,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
    min-height: 61px !important;
    padding: 10px 11px !important;
  }

  .step-card.step-open .step-toggle-title,
  body.force-mobile-view .step-card.step-open .step-toggle-title {
    font-size: 15.75px !important;
  }

  .step-card.step-completed:not(.step-open) .step-toggle-title,
  body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-title,
  .step-card.step-locked:not(.step-open) .step-toggle-title,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
    font-size: 15px !important;
  }
}

/* v18: service polish system for main and SEO pages */
:root {
  --brand-red: #ef4444;
  --brand-red-dark: #dc2626;
  --brand-yellow: #facc15;
  --ink: #101828;
  --ink-soft: #344054;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --service-border: #e6eaf0;
  --service-radius: 18px;
  --service-shadow: 0 14px 38px rgba(16, 24, 40, .06);
}

body {
  background:
    linear-gradient(180deg, #f8fafc 0%, #f6f7fb 36%, #ffffff 100%);
  color: var(--ink);
}

.container {
  max-width: 1180px;
}

header {
  margin-bottom: 26px;
}

h1 {
  color: var(--ink);
  font-size: clamp(30px, 4.8vw, 48px);
  line-height: 1.12;
  letter-spacing: 0;
}

h2,
.card h2 {
  color: var(--ink);
  line-height: 1.28;
  letter-spacing: 0;
}

h3,
.card h3 {
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: 0;
}

p,
li {
  line-height: 1.72;
}

.sub-text,
.muted,
.small-note,
.field-help {
  color: #667085;
}

.card,
.option-box,
.pay-option-card,
.collapsible-box,
.result-box,
.main-calendar-color-guide,
.edit-panel,
.side-mini-box,
.allowance-card {
  border-color: var(--service-border);
  border-radius: var(--service-radius);
  box-shadow: var(--service-shadow);
}

.card {
  padding: 24px;
  margin-bottom: 20px;
}

input,
select,
textarea {
  border-color: #d7dde6;
  border-radius: 14px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(239, 68, 68, .18);
  outline-offset: 2px;
}

button,
.cta-button {
  border-radius: 14px;
}

button:hover,
.cta-button:hover,
.related-list a:hover,
.seo-pill:hover,
.guide-pill:hover,
.info-nav a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.soft-btn,
.ghost-btn {
  border: 1px solid var(--service-border);
}

.lawzero-brand {
  margin-bottom: 14px;
  border-color: rgba(239, 68, 68, .16);
}

.site-hero-banner {
  display: none;
}

.hero-main-desc {
  max-width: 700px;
  font-size: 16px;
  color: var(--ink-soft);
}

.seo-keyword-box {
  background: #fff;
  color: var(--ink);
  border: 1px solid #fee2e2;
  box-shadow: 0 10px 26px rgba(239, 68, 68, .08);
}

.pc-guide-note,
.mobile-guide-note,
.step-progress-note,
.calendar-feature-note,
.result-guide,
.warning {
  border-color: var(--service-border);
  border-radius: 16px;
  box-shadow: none;
}

.step-card {
  background: #fff;
}

.step-toggle {
  border-radius: var(--service-radius);
}

.step-toggle-title {
  font-size: 18px;
}

.step-toggle-sub {
  color: #667085;
}

.step-arrow,
.step-complete-btn,
.selected-day-title {
  background: var(--ink);
}

.calculate-btn {
  min-height: 58px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  box-shadow: 0 16px 32px rgba(220, 38, 38, .22);
}

.calculation-section {
  background: #fff;
  border: 1px solid var(--service-border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--service-shadow);
}

.result-box {
  background: #f8fafc;
  border: 1px solid var(--service-border);
}

.result-summary-card.primary {
  background: #fff7ed;
  border-color: #fed7aa;
}

.result-summary-card.primary strong,
.result-total strong {
  color: var(--brand-red-dark);
}

.developer-support-card {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--service-border);
  box-shadow: var(--service-shadow);
}

.developer-support-text {
  color: #667085;
}

.developer-support-text strong {
  color: var(--ink);
}

.developer-support-main-btn {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  box-shadow: none;
}

.site-footer,
footer {
  margin-top: 24px;
  padding: 24px 0 10px;
  color: #667085;
}

.footer-links {
  gap: 10px 14px;
}

.footer-links a,
.footer-links button {
  color: #475467;
  font-size: 13px;
}

.site-footer .lawzero-footer-brand {
  margin-top: 10px;
}

/* Shared SEO and policy page components */
.seo-page,
.guide-page,
.info-page {
  max-width: 980px !important;
}

.seo-page header,
.guide-page header,
.info-page header {
  padding: 26px 0 8px;
  text-align: center;
}

.seo-page h1,
.guide-page h1,
.info-page h1 {
  max-width: 860px;
  margin: 0 auto 12px;
  font-size: clamp(30px, 6vw, 46px) !important;
}

.seo-page .sub-text,
.guide-page .sub-text,
.info-page .sub-text {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.72;
}

.seo-nav,
.guide-nav,
.info-nav {
  margin-top: 18px !important;
  gap: 8px !important;
}

.seo-pill,
.guide-pill,
.info-nav a {
  min-height: 38px;
  align-items: center;
  border-color: var(--service-border) !important;
  background: #fff !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--service-border) !important;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .04);
}

.seo-page article > .card,
.guide-page article > .card,
.info-page article > .card {
  border-radius: 20px !important;
  border-color: var(--service-border) !important;
  box-shadow: var(--service-shadow) !important;
}

.seo-page .hero-card,
.guide-page .hero-card,
.info-page .info-hero,
.info-page article > .card:first-child {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 247, 237, .92)) !important;
  border-color: #fed7aa !important;
}

.lead {
  color: var(--ink-soft) !important;
  font-size: 17px !important;
  line-height: 1.78 !important;
}

.highlight-box,
.summary-box,
.notice-box,
.contact-box {
  border-radius: 16px !important;
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #9a3412 !important;
}

.formula {
  border-radius: 16px !important;
  background: #172033 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.mini-card,
.trust-mini-card,
.time-band div,
.related-list a {
  border-color: var(--service-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .035);
}

.mini-card span,
.mini-card p,
.trust-mini-card p {
  color: #667085 !important;
}

.table-wrap {
  border-color: var(--service-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .035);
}

.seo-table th,
.guide-table th {
  background: #f8fafc !important;
}

.faq-item {
  border-color: var(--service-border) !important;
}

.faq-item h3 {
  color: var(--ink);
}

.related-list a {
  min-height: 72px;
  color: var(--ink) !important;
}

.related-list a::after {
  content: "바로가기";
  display: block;
  margin-top: 8px;
  color: var(--brand-red-dark);
  font-size: 12px;
  font-weight: 900;
}

.cta-panel {
  background: linear-gradient(135deg, #172033, #101828) !important;
  color: #fff !important;
}

.cta-panel h2 {
  color: #fff !important;
}

.cta-button {
  min-height: 50px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(220, 38, 38, .24) !important;
}

.text-link {
  color: var(--brand-red-dark) !important;
  border-bottom-color: rgba(220, 38, 38, .28) !important;
}

.notice-list,
.check-list,
.seo-page ul,
.guide-page ul,
.info-page ul {
  padding-left: 20px;
}

@media (max-width: 900px) {
  .container {
    padding: 16px 14px calc(26px + env(safe-area-inset-bottom));
  }

  header {
    margin-bottom: 18px;
  }

  h1 {
    font-size: 32px;
  }

  .card,
  .option-box,
  .pay-option-card,
  .calculation-section {
    border-radius: 18px;
  }

  .calculation-section {
    padding: 14px;
  }

  .result-summary-grid {
    grid-template-columns: 1fr;
  }

  .seo-page header,
  .guide-page header,
  .info-page header {
    padding-top: 18px;
  }

  .seo-page .sub-text,
  .guide-page .sub-text,
  .info-page .sub-text {
    font-size: 15px;
  }

  .seo-nav,
  .guide-nav,
  .info-nav {
    justify-content: flex-start !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }

  .seo-pill,
  .guide-pill,
  .info-nav a {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .content-grid,
  .three-grid,
  .info-grid,
  .trust-content-grid,
  .related-list,
  .time-band {
    grid-template-columns: 1fr !important;
  }

  .cta-button {
    width: 100% !important;
  }
}

/* v22: final homepage density pass */
.container {
  max-width: 1080px;
  padding: 20px 18px 28px;
}

body.force-pc-view .container {
  max-width: 1120px;
  padding: 20px 22px 30px;
}

header {
  margin-bottom: 10px;
}

.site-hero-banner {
  width: min(100%, 780px);
  max-width: 780px;
  margin: 0 auto 9px;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(239, 68, 68, .16), 0 6px 14px rgba(16, 24, 40, .05);
}

.seo-keyword-box {
  margin-top: 7px;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.35;
}

.pc-guide-note,
.mobile-guide-note {
  margin-top: 7px;
  padding: 5px 7px 5px 10px;
  font-size: 11px;
  box-shadow: none;
}

.pc-guide-note .guide-switch-link,
.mobile-guide-note .guide-switch-link {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 11px;
}

.step-card {
  margin-bottom: 8px;
  border-radius: 15px;
}

.step-toggle {
  min-height: 48px;
  padding: 8px 12px;
}

.step-toggle-title {
  font-size: 15px;
  font-weight: 950;
  color: #101828;
}

.step-toggle-sub {
  margin-top: 1px;
  font-size: 10px;
  color: #667085;
  font-weight: 800;
}

.step-arrow {
  min-width: 58px;
  height: 28px;
  font-size: 11px;
}

.step-body {
  padding: 0 12px 12px;
}

.step-complete-row {
  margin-top: 10px;
  padding-top: 10px;
}

.step-complete-btn {
  min-width: 124px;
  min-height: 40px;
  padding: 9px 14px;
}

.top-grid,
.form-grid,
.two-grid {
  gap: 8px;
}

label {
  font-size: 13px;
}

input,
select,
button {
  min-height: 42px;
  padding: 9px 11px;
  font-size: 14px;
}

.option-box,
.pay-option-card,
.collapsible-body,
.allowance-card {
  padding: 10px;
  border-radius: 13px;
}

.minimum-wage-box,
.warning,
.step-progress-note,
.calendar-feature-note,
.option-hint {
  margin-top: 8px;
  padding: 9px 10px;
  font-size: 12px;
}

.calculation-section {
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 18px;
}

.calculate-btn {
  min-height: 52px;
  padding: 13px 16px;
  font-size: 17px;
}

.result-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
}

.result-summary-grid {
  gap: 8px;
  margin-bottom: 10px;
}

.result-summary-card {
  padding: 12px;
}

.result-tools-after {
  margin-top: 10px;
}

.collapsible-head {
  padding: 11px 12px;
}

.collapsible-head strong {
  font-size: 14px;
}

.collapsible-head span {
  font-size: 11px;
}

.collapsible-arrow {
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 20px;
}

.header-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.header-tools button {
  min-height: 44px;
  padding: 9px 10px;
}

.share-box textarea {
  min-height: 54px;
}

.developer-support-card {
  margin: 14px 0 2px;
}

.site-footer {
  margin-top: 18px;
  padding: 18px 0 calc(90px + env(safe-area-inset-bottom));
}

.cookie-consent {
  bottom: max(14px, env(safe-area-inset-bottom));
  max-width: 760px;
  padding: 11px 12px;
  border-radius: 16px;
}

.cookie-consent p {
  font-size: 12px;
}

@media (max-width: 900px) {
  .container,
  body.force-mobile-view .container {
    max-width: 430px;
    padding: 10px 10px calc(110px + env(safe-area-inset-bottom));
  }

  header {
    margin-bottom: 8px;
  }

  .site-hero-banner {
    margin-bottom: 7px;
    border-radius: 14px;
  }

  .seo-keyword-box {
    margin-top: 6px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .pc-guide-note,
  .mobile-guide-note {
    margin-top: 6px;
    padding: 4px 6px;
  }

  .step-card {
    margin-bottom: 7px;
  }

  .step-toggle {
    min-height: 44px;
    padding: 7px 9px;
  }

  .step-toggle-title {
    font-size: 14px;
  }

  .step-toggle-sub {
    display: none;
  }

  .step-arrow {
    min-width: 54px;
    height: 26px;
    font-size: 10px;
  }

  .step-body {
    padding: 0 9px 10px;
  }

  input,
  select,
  textarea,
  button {
    min-height: 42px;
    font-size: 15px;
  }

  .calculation-section {
    margin-top: 8px;
    padding: 10px;
  }

  .calculate-btn {
    min-height: 50px;
    font-size: 16px;
  }

  .header-tools {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .site-footer {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

/* v21: branded image hero and compact service controls */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

header {
  margin-bottom: 12px;
}

.site-hero-banner {
  width: min(100%, 860px);
  max-width: 860px;
  margin: 0 auto 10px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .85);
  background: #ef4444;
  box-shadow: 0 18px 42px rgba(239, 68, 68, .18), 0 8px 18px rgba(16, 24, 40, .06);
}

.site-hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.seo-keyword-box {
  margin-top: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
}

.pc-guide-note,
.mobile-guide-note {
  margin-top: 8px;
  padding: 5px 7px 5px 11px;
  gap: 8px;
  font-size: 12px;
  color: #667085;
}

.pc-guide-note .guide-switch-link,
.mobile-guide-note .guide-switch-link {
  min-height: 28px;
  padding: 4px 9px;
  background: #f8fafc;
  color: #344054;
  border-color: #e4e7ec;
}

.step-card {
  margin-bottom: 8px;
  border-radius: 16px;
}

.step-toggle {
  min-height: 48px;
  padding: 9px 12px;
}

.step-toggle-main {
  gap: 0;
}

.step-toggle-title {
  font-size: 15px;
}

.step-toggle-sub {
  font-size: 10px;
  color: #667085;
}

.step-arrow {
  min-width: 60px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

.step-body {
  padding: 0 12px 12px;
}

.step-progress-note,
.option-hint,
.warning,
.small-note,
.field-help {
  font-size: 12px;
}

.option-box,
.pay-option-card,
.collapsible-body,
.allowance-card {
  padding: 10px;
}

.minimum-wage-box,
.result-guide {
  padding: 10px 12px;
}

.top-grid,
.form-grid,
.two-grid {
  gap: 8px;
}

input,
select,
button {
  padding: 9px 11px;
}

.header-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.header-tools button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.tool-icon-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.tool-icon-btn span,
.share-toggle-btn {
  overflow: hidden;
  text-overflow: ellipsis;
}

.kakao-share-btn {
  background: #fee500;
  color: #111827;
  border: 1px solid #fada00;
}

@media (max-width: 900px) {
  .site-hero-banner {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 16px;
  }

  .seo-keyword-box {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.35;
  }

  .pc-guide-note,
  .mobile-guide-note {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px 6px;
    font-size: 11px;
  }

  .step-card {
    margin-bottom: 7px;
  }

  .step-toggle {
    min-height: 46px;
    padding: 8px 10px;
  }

  .step-toggle-title {
    font-size: 15px;
  }

  .step-toggle-sub {
    display: none;
  }

  .step-body {
    padding: 0 10px 10px;
  }

  .header-tools {
    grid-template-columns: 1fr;
  }

  .header-tools button {
    width: 100%;
    white-space: normal;
  }
}

.mobile-guide-note {
  display: none;
}

body.force-mobile-view .pc-guide-note,
body:not(.force-pc-view).force-mobile-view .pc-guide-note {
  display: none;
}

body.force-mobile-view .mobile-guide-note {
  display: inline-flex;
}

body.force-pc-view .pc-guide-note {
  display: inline-flex;
}

body.force-pc-view .mobile-guide-note {
  display: none;
}

@media (max-width: 900px) {
  body:not(.force-pc-view) .pc-guide-note {
    display: none;
  }

  body:not(.force-pc-view) .mobile-guide-note {
    display: inline-flex;
  }
}

.pc-guide-note,
.mobile-guide-note {
  display: none !important;
}

body.view-mode-pc .pc-guide-note {
  display: inline-flex !important;
}

body.view-mode-pc .mobile-guide-note {
  display: none !important;
}

body.view-mode-mobile .pc-guide-note {
  display: none !important;
}

body.view-mode-mobile .mobile-guide-note {
  display: inline-flex !important;
}

header {
  margin-bottom: 14px;
}

.site-hero-banner {
  margin-bottom: 12px;
}

.seo-keyword-box {
  margin-top: 9px;
  margin-bottom: 0;
}

.pc-guide-note,
.mobile-guide-note {
  margin-top: 9px;
  margin-bottom: 0;
}

/* v19: cache-refresh UI corrections */
.site-hero-banner {
  display: block;
  max-width: 760px;
  margin: 0 auto 16px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(239, 68, 68, .16);
  box-shadow: 0 16px 36px rgba(239, 68, 68, .14);
}

.site-hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-main-desc {
  margin-top: 4px;
  font-size: 14px;
}

.seo-keyword-box {
  background: #111827;
  color: #fff;
  border-color: #111827;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .14);
}

.step-card {
  margin-bottom: 14px;
}

.step-toggle {
  min-height: 62px;
  padding: 13px 16px;
}

.step-toggle-title {
  font-size: 17px;
}

.step-toggle-sub {
  font-size: 11px;
}

.step-arrow {
  min-width: 66px;
  height: 32px;
  font-size: 12px;
}

.step-body {
  padding: 0 16px 16px;
}

.step-progress-note,
.option-box,
.pay-option-card,
.collapsible-box {
  margin-top: 10px;
}

.top-grid,
.form-grid,
.two-grid {
  gap: 10px;
}

.header-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.share-box textarea {
  min-height: 56px;
}

.share-link-short {
  margin-top: 8px;
}

.site-footer {
  border-top: 1px solid var(--service-border);
}

@media (max-width: 900px) {
  .site-hero-banner {
    max-width: 100%;
    margin-bottom: 12px;
    border-radius: 16px;
  }

  .hero-main-desc {
    font-size: 13px;
  }

  .step-card {
    margin-bottom: 10px;
  }

  .step-toggle {
    min-height: 56px;
    padding: 11px 12px;
  }

  .step-toggle-title {
    font-size: 16px;
  }

  .step-toggle-sub {
    display: none;
  }

  .step-body {
    padding: 0 12px 14px;
  }

  .header-tools {
    grid-template-columns: 1fr;
  }
}

/* v20: compact step flow and mode polish */
header {
  margin-bottom: 16px;
}

.site-hero-banner {
  max-width: 680px;
  margin-bottom: 12px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(239, 68, 68, .12);
}

.seo-keyword-box {
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 13px;
}

.pc-guide-note,
.mobile-guide-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--service-border);
  color: #475467;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .04);
}

.pc-guide-note .guide-switch-link,
.mobile-guide-note .guide-switch-link {
  width: auto;
  min-height: 30px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  text-decoration: none;
  border: 1px solid #fed7aa;
  font-size: 12px;
}

.step-card {
  margin-bottom: 10px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease, background .16s ease;
}

.step-card:hover {
  border-color: rgba(239, 68, 68, .32);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .08);
  transform: translateY(-1px);
}

.step-card.step-locked {
  opacity: .82;
  background: #fbfcfe;
}

.step-card.step-locked:hover {
  opacity: .94;
}

.step-card.step-open {
  opacity: 1;
  border-color: rgba(239, 68, 68, .42);
  background: linear-gradient(180deg, #fff, #fffafa);
  box-shadow: 0 14px 32px rgba(239, 68, 68, .10);
}

.step-card.step-completed {
  opacity: 1;
}

.step-toggle {
  min-height: 54px;
  padding: 10px 14px;
  gap: 10px;
}

.step-toggle-main {
  gap: 1px;
}

.step-toggle-title {
  font-size: 16px;
  line-height: 1.28;
}

.step-toggle-sub {
  font-size: 11px;
  line-height: 1.25;
}

.step-card.step-locked .step-arrow {
  color: transparent;
  position: relative;
  background: #f2f4f7;
  border: 1px solid #e4e7ec;
}

.step-card.step-locked .step-arrow::before {
  content: "다음";
  position: absolute;
  color: #667085;
}

.step-card.step-open .step-arrow {
  background: #111827;
  color: #fff;
}

.step-body {
  padding: 0 14px 14px;
  animation: stepFadeIn .14s ease-out;
}

@keyframes stepFadeIn {
  from { opacity: .78; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-progress-note,
.small-note,
.muted {
  line-height: 1.5;
}

.option-box,
.pay-option-card {
  padding: 12px;
}

.top-grid,
.form-grid,
.two-grid {
  gap: 8px;
}

label {
  margin-bottom: 4px;
}

input,
select,
button {
  padding: 10px 12px;
}

.header-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.header-tools button {
  min-height: 46px;
}

@media (max-width: 900px) {
  header {
    margin-bottom: 12px;
  }

  .site-hero-banner {
    margin-bottom: 10px;
  }

  .seo-keyword-box {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .pc-guide-note,
  .mobile-guide-note {
    margin-top: 8px;
    font-size: 11px;
  }

  .step-toggle {
    min-height: 50px;
    padding: 9px 10px;
  }

  .step-toggle-sub {
    display: block;
    font-size: 10px;
    max-height: 1.25em;
    overflow: hidden;
  }

  .step-body {
    padding: 0 10px 12px;
  }

  input,
  select,
  textarea,
  button {
    min-height: 44px;
  }

  .header-tools {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* v24: final homepage density pass */
header {
  margin-bottom: 9px;
}

.site-hero-banner {
  max-width: 720px;
  margin-bottom: 8px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(239, 68, 68, .13);
}

.seo-keyword-box {
  margin-top: 5px;
  padding: 6px 12px;
  font-size: 11.5px;
  line-height: 1.35;
  box-shadow: 0 7px 16px rgba(17, 24, 39, .12);
}

.pc-guide-note,
.mobile-guide-note {
  margin-top: 6px;
  padding: 4px 6px 4px 10px;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #667085;
  box-shadow: 0 6px 14px rgba(16, 24, 40, .035);
}

.pc-guide-note .guide-switch-link,
.mobile-guide-note .guide-switch-link {
  min-height: 25px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
}

.step-card {
  margin-bottom: 7px;
  border-radius: 14px;
}

.step-card[data-step-index="1"] {
  border-color: rgba(239, 68, 68, .32);
  box-shadow: 0 11px 28px rgba(239, 68, 68, .085);
}

.step-card[data-step-index="2"].step-locked,
.step-card[data-step-index="3"].step-locked,
.step-card[data-step-index="4"].step-locked {
  opacity: .86;
}

.step-toggle {
  min-height: 46px;
  padding: 8px 11px;
  gap: 8px;
}

.step-card[data-step-index="2"].step-locked .step-toggle,
.step-card[data-step-index="3"].step-locked .step-toggle,
.step-card[data-step-index="4"].step-locked .step-toggle {
  min-height: 42px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.step-toggle-main {
  gap: 0;
}

.step-toggle-title {
  font-size: 14.5px;
  line-height: 1.25;
  letter-spacing: 0;
}

.step-toggle-sub {
  font-size: 10px;
  line-height: 1.25;
  color: #7a8597;
}

.step-card[data-step-index="2"].step-locked .step-toggle-sub,
.step-card[data-step-index="3"].step-locked .step-toggle-sub,
.step-card[data-step-index="4"].step-locked .step-toggle-sub {
  color: #8a94a6;
}

.step-arrow {
  min-width: 52px;
  height: 25px;
  padding: 0 10px;
  font-size: 11px;
}

.step-card.step-locked .step-arrow {
  min-width: 48px;
  height: 24px;
}

.step-body {
  padding: 0 11px 11px;
}

.option-box,
.pay-option-card,
.collapsible-box {
  padding: 9px;
  margin-top: 7px;
}

.top-grid,
.form-grid,
.two-grid,
.salary-summary-grid,
.result-grid {
  gap: 8px;
}

label {
  margin-bottom: 3px;
  font-size: 12px;
}

input,
select,
textarea {
  min-height: 40px;
  padding: 9px 11px;
}

.header-tools {
  gap: 8px;
  margin-top: 7px;
}

.header-tools button {
  min-height: 42px;
  padding: 9px 10px;
}

.cookie-consent {
  max-width: 700px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(16, 24, 40, .92);
  gap: 9px;
}

.cookie-consent p {
  font-size: 11.5px;
  line-height: 1.4;
}

.cookie-consent button {
  min-width: 78px;
  min-height: 34px;
  padding: 7px 11px;
}

@media (max-width: 900px) {
  .container {
    padding-top: 8px;
  }

  header {
    margin-bottom: 8px;
  }

  .site-hero-banner {
    margin-bottom: 7px;
    border-radius: 15px;
  }

  .seo-keyword-box {
    margin-top: 4px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .pc-guide-note,
  .mobile-guide-note {
    margin-top: 5px;
    padding: 4px 5px 4px 9px;
    font-size: 10.5px;
  }

  .step-card {
    margin-bottom: 6px;
  }

  .step-toggle {
    min-height: 43px;
    padding: 7px 10px;
  }

  .step-card[data-step-index="2"].step-locked .step-toggle,
  .step-card[data-step-index="3"].step-locked .step-toggle,
  .step-card[data-step-index="4"].step-locked .step-toggle {
    min-height: 39px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .step-toggle-title {
    font-size: 14px;
  }

  .step-toggle-sub {
    font-size: 9.5px;
  }

  .step-arrow {
    min-width: 48px;
    height: 24px;
    padding: 0 8px;
    font-size: 10.5px;
  }

  .step-body {
    padding: 0 10px 10px;
  }

  .cookie-consent {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px;
  }

  .cookie-consent button {
    min-height: 34px;
  }
}

/* v25: compact mobile work-calendar flow */
#workCalendarSection .step-progress-note {
  margin-top: 0;
  margin-bottom: 7px;
}

#workCalendarSection .mode-pill {
  margin-bottom: 7px;
  padding: 4px 9px;
  font-size: 11px;
}

#workCalendarSection .form-grid {
  gap: 7px;
}

#workCalendarSection .field-help,
#workCalendarSection > .step-body > .small-note {
  font-size: 11px;
  line-height: 1.35;
}

#workCalendarSection > .step-body > .small-note {
  margin-top: 6px;
}

#workCalendarSection .work-layout {
  margin-top: 8px;
}

#workCalendarSection .main-calendar-title {
  margin-bottom: 6px;
  padding: 7px 10px;
  font-size: 15px;
}

#workCalendarSection .detail-mode-guide {
  margin: 6px 0 7px;
  padding: 8px 10px;
  font-size: 11.5px;
}

#workCalendarSection .detail-mode-guide .detail-mode-steps {
  margin-top: 5px;
  gap: 4px;
}

#workCalendarSection .detail-mode-guide .detail-mode-step {
  padding: 3px 7px;
  font-size: 10.5px;
}

#workCalendarSection .calendar-top-actions {
  margin: 6px 0;
  gap: 6px;
}

#workCalendarSection .calendar-top-actions button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 11px;
}

#workCalendarSection .calendar-feature-note {
  margin: 5px 0 5px;
  font-size: 11px;
  line-height: 1.35;
}

#workCalendarSection .weekdays,
#workCalendarSection .calendar {
  gap: 5px;
}

#workCalendarSection .weekday-btn {
  min-height: 28px;
  padding: 3px 0;
  font-size: 12px;
}

#workCalendarSection .weekday-btn::after {
  display: none;
}

@media (max-width: 900px) {
  body.force-mobile-view #workCalendarSection .step-body {
    padding-top: 0;
  }

  body.force-mobile-view #workCalendarSection .step-progress-note {
    margin-bottom: 5px;
    font-size: 11px;
  }

  body.force-mobile-view #workCalendarSection .mode-pill,
  body.force-mobile-view #workCalendarSection > .step-body > .small-note,
  body.force-mobile-view #workCalendarSection .field-help,
  body.force-mobile-view #workCalendarSection .detail-mode-guide,
  body.force-mobile-view #workCalendarSection .calendar-feature-note,
  body.force-mobile-view #workCalendarSection .calendar-help-note {
    display: none;
  }

  body.force-mobile-view #workCalendarSection > .step-body > .form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  body.force-mobile-view #workCalendarSection label {
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 900;
    color: #667085;
  }

  body.force-mobile-view #workCalendarSection input,
  body.force-mobile-view #workCalendarSection select {
    min-height: 34px;
    padding: 6px 7px;
    border-radius: 10px;
    font-size: 13px;
  }

  body.force-mobile-view #workCalendarSection .time-input,
  body.force-mobile-view #workCalendarSection #defaultBreakHours {
    text-align: center;
    font-weight: 900;
  }

  body.force-mobile-view #workCalendarSection .input-with-unit {
    gap: 4px;
  }

  body.force-mobile-view #workCalendarSection .unit-label {
    font-size: 10.5px;
    font-weight: 900;
  }

  body.force-mobile-view #workCalendarSection .work-layout {
    margin-top: 6px;
  }

  body.force-mobile-view #workCalendarSection .main-calendar-title {
    margin-bottom: 4px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 13px;
  }

  body.force-mobile-view #workCalendarSection .calendar-top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 4px 0 5px;
  }

  body.force-mobile-view #workCalendarSection .calendar-top-actions button {
    width: 100%;
    min-height: 30px;
    padding: 4px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    white-space: nowrap;
  }

  body.force-mobile-view #workCalendarSection .weekdays,
  body.force-mobile-view #workCalendarSection .calendar {
    gap: 3px;
  }

  body.force-mobile-view #workCalendarSection .weekday-btn {
    min-height: 23px;
    padding: 2px 0;
    border-radius: 8px;
    font-size: 11px;
  }

  body.force-mobile-view #workCalendarSection .day {
    min-height: 50px;
    padding: 6px 4px;
    border-radius: 10px;
  }

  body.force-mobile-view #workCalendarSection .day-number {
    font-size: 13px;
    font-weight: 800;
  }
}

/* v26: compact allowance and legal option settings */
#allowanceSection .muted,
#legalOptionSection .muted,
#allowanceSection .field-help,
#legalOptionSection .field-help {
  font-size: 11.5px;
  line-height: 1.38;
}

#allowanceSection .form-grid,
#legalOptionSection .form-grid,
#allowanceSection .two-grid {
  gap: 7px;
}

#allowanceSection .form-grid + .form-grid {
  margin-top: 7px !important;
}

#allowanceSection .two-grid {
  margin-top: 8px !important;
}

#allowanceSection .color-palette {
  gap: 5px;
  padding: 3px 0 0;
}

#allowanceSection .color-choice {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

#allowanceSection .allowance-list {
  margin-top: 8px;
  gap: 7px;
}

#allowanceSection .allowance-card {
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

#allowanceSection .allowance-card.open {
  box-shadow: 0 6px 16px rgba(16, 24, 40, .06);
}

#allowanceSection .allowance-head {
  margin-bottom: 7px;
  gap: 7px;
}

#allowanceSection .allowance-title {
  font-size: 13.5px;
}

#allowanceSection .allowance-meta {
  margin-top: 1px;
  font-size: 11px;
}

#allowanceSection .allowance-actions {
  gap: 5px;
}

#allowanceSection .allowance-actions .soft-btn,
#allowanceSection .x-btn {
  min-height: 30px;
}

#allowanceSection .allowance-actions .soft-btn {
  padding: 5px 8px;
  font-size: 11px;
}

#legalOptionSection .option-box,
#legalOptionSection .pay-option-card {
  margin-top: 7px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

#legalOptionSection > .step-body > .option-box:first-child {
  margin-top: 0;
}

#legalOptionSection .check-row,
#legalOptionSection .radio-row {
  min-height: 30px;
  margin: 4px 0;
  gap: 5px;
  font-size: 13px;
  line-height: 1.25;
}

#legalOptionSection .check-row input,
#legalOptionSection .radio-row input {
  margin-right: 4px;
}

#legalOptionSection .info {
  width: 16px;
  height: 16px;
  min-width: 16px;
  font-size: 10px;
  margin-left: 2px;
}

#legalOptionSection #holidayApplyBox {
  margin-top: 6px !important;
  padding: 8px 9px;
  border-color: #eef2f7;
  background: #f8fafc;
}

#legalOptionSection #holidayApplyBox strong,
#legalOptionSection .option-box > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #344054;
}

#legalOptionSection #customTaxBox {
  margin-top: 6px !important;
}

#legalOptionSection #probationRateBox {
  margin-top: 7px !important;
}

#legalOptionSection .compact-info-accordion {
  margin-top: 7px;
  border-radius: 12px;
}

#legalOptionSection .compact-info-accordion .collapsible-head {
  min-height: 42px;
  padding: 8px 10px;
}

#legalOptionSection .compact-info-accordion .collapsible-head strong {
  font-size: 13px;
}

#legalOptionSection .compact-info-accordion .collapsible-head span {
  margin-top: 1px;
  font-size: 10.5px;
}

#legalOptionSection .compact-info-accordion .collapsible-arrow {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 17px;
}

#legalOptionSection .compact-info-accordion .collapsible-body {
  padding: 9px 10px;
}

#legalOptionSection .notice-list {
  margin-top: 6px;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.4;
}

#legalOptionSection .notice-list li {
  margin: 2px 0;
}

@media (max-width: 900px) {
  body.force-mobile-view #allowanceSection .muted,
  body.force-mobile-view #legalOptionSection .muted,
  body.force-mobile-view #allowanceSection .field-help,
  body.force-mobile-view #legalOptionSection .field-help {
    font-size: 10.5px;
    line-height: 1.32;
  }

  body.force-mobile-view #allowanceSection .step-body,
  body.force-mobile-view #legalOptionSection .step-body {
    padding-left: 9px;
    padding-right: 9px;
  }

  body.force-mobile-view #allowanceSection .form-grid,
  body.force-mobile-view #legalOptionSection .form-grid {
    gap: 6px;
  }

  body.force-mobile-view #allowanceSection input,
  body.force-mobile-view #allowanceSection select,
  body.force-mobile-view #legalOptionSection input,
  body.force-mobile-view #legalOptionSection select {
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 13px;
  }

  body.force-mobile-view #allowanceSection label,
  body.force-mobile-view #legalOptionSection label {
    margin-bottom: 2px;
    font-size: 11px;
  }

  body.force-mobile-view #allowanceSection .color-choice {
    width: 22px;
    height: 22px;
  }

  body.force-mobile-view #allowanceSection .two-grid {
    grid-template-columns: 1.35fr .75fr;
    gap: 6px;
  }

  body.force-mobile-view #allowanceSection .two-grid button {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 13px;
  }

  body.force-mobile-view #legalOptionSection .option-box,
  body.force-mobile-view #legalOptionSection .pay-option-card {
    margin-top: 6px;
    padding: 8px 9px;
  }

  body.force-mobile-view #legalOptionSection .check-row,
  body.force-mobile-view #legalOptionSection .radio-row {
    min-height: 28px;
    margin: 3px 0;
    font-size: 12.5px;
  }
}

/* v27: calendar-first mobile input flow */
#workCalendarSection .calendar-time-panel {
  margin: 0 0 6px;
  padding: 8px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fff;
}

#workCalendarSection .calendar-time-panel .mode-pill {
  margin: 0 0 6px;
}

#workCalendarSection .calendar-time-panel .form-grid {
  gap: 6px;
}

#workCalendarSection .calendar-time-panel label {
  margin-bottom: 2px;
  font-size: 11px;
  color: #667085;
}

#workCalendarSection .calendar-time-panel input,
#workCalendarSection .calendar-time-panel select {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 13px;
}

#workCalendarSection .calendar-time-panel .time-input,
#workCalendarSection .calendar-time-panel #defaultBreakHours {
  text-align: center;
  font-weight: 900;
}

#workCalendarSection .calendar-time-panel .field-help {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.25;
}

#workCalendarSection .detail-mode-guide {
  display: none;
}

#workCalendarSection .calendar-top-actions {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  body.force-mobile-view #workCalendarSection .work-layout {
    margin-top: 0;
  }

  body.force-mobile-view #workCalendarSection .main-calendar-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    font-size: 14px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel {
    margin-bottom: 5px;
    padding: 7px;
    border-radius: 12px;
    background: #f8fafc;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .mode-pill {
    display: none;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel label {
    margin-bottom: 2px;
    font-size: 10.5px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel input {
    min-height: 34px;
    padding: 6px 6px;
    font-size: 13px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .input-with-unit {
    gap: 3px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .unit-label {
    font-size: 10px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .field-help {
    display: none;
  }

  body.force-mobile-view #workCalendarSection .calendar-top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 4px 0 5px;
  }

  body.force-mobile-view #workCalendarSection .calendar-top-actions button {
    min-height: 28px;
    padding: 4px 6px;
    font-size: 10.5px;
  }
}

/* v28: tighter mobile settings density */
@media (max-width: 900px) {
  body.force-mobile-view .step-body {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.force-mobile-view input,
  body.force-mobile-view select,
  body.force-mobile-view textarea {
    min-height: 32px;
    padding: 5px 7px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.2;
  }

  body.force-mobile-view label {
    margin-bottom: 1px;
    font-size: 10.5px;
    line-height: 1.15;
  }

  body.force-mobile-view .top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  body.force-mobile-view .top-grid > div {
    min-width: 0;
  }

  body.force-mobile-view .top-grid > div:nth-child(3),
  body.force-mobile-view .top-grid > div:nth-child(4) {
    grid-column: span 2;
  }

  body.force-mobile-view #calendarBuildBtn {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 13px;
  }

  body.force-mobile-view #basicSection .option-box {
    margin-top: 6px;
    padding: 7px 8px;
    border-radius: 11px;
  }

  body.force-mobile-view #basicSection .option-box strong {
    font-size: 12px;
  }

  body.force-mobile-view #basicSection .recommend-badge {
    padding: 2px 5px;
    font-size: 9px;
  }

  body.force-mobile-view #basicSection .radio-row,
  body.force-mobile-view #legalOptionSection .radio-row,
  body.force-mobile-view #legalOptionSection .check-row {
    min-height: 24px;
    margin: 1px 0;
    gap: 3px;
    font-size: 12px;
    line-height: 1.15;
  }

  body.force-mobile-view #basicSection input[type="radio"],
  body.force-mobile-view #legalOptionSection input[type="radio"],
  body.force-mobile-view #legalOptionSection input[type="checkbox"] {
    margin-right: 2px;
    transform: scale(.88);
  }

  body.force-mobile-view #basicSection .muted,
  body.force-mobile-view #basicSection .option-hint {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 10.5px;
    line-height: 1.25;
  }

  body.force-mobile-view .minimum-wage-box {
    margin-top: 5px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 11px;
  }

  body.force-mobile-view .minimum-wage-box strong {
    font-size: 12px;
  }

  body.force-mobile-view .minimum-wage-box button {
    min-height: 28px;
    padding: 4px 7px;
    font-size: 10.5px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel {
    padding: 5px;
    margin-bottom: 4px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .form-grid > div:nth-child(3) {
    grid-column: span 2;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .form-grid > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 5px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel label {
    margin: 0;
    white-space: nowrap;
    color: #667085;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel input {
    min-height: 26px;
    padding: 2px 3px;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-size: 14px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .input-with-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px;
  }

  body.force-mobile-view #workCalendarSection .calendar-top-actions {
    gap: 4px;
    margin: 3px 0 4px;
  }

  body.force-mobile-view #workCalendarSection .weekdays,
  body.force-mobile-view #workCalendarSection .calendar {
    gap: 2px;
  }

  body.force-mobile-view #legalOptionSection .option-box,
  body.force-mobile-view #legalOptionSection .pay-option-card {
    margin-top: 4px;
    padding: 6px 7px;
    border-radius: 10px;
  }

  body.force-mobile-view #legalOptionSection #holidayApplyBox {
    margin-top: 4px !important;
    padding: 5px 7px;
  }

  body.force-mobile-view #legalOptionSection #holidayApplyBox strong,
  body.force-mobile-view #legalOptionSection .option-box > strong {
    margin-bottom: 2px;
    font-size: 11.5px;
  }

  body.force-mobile-view #legalOptionSection .info {
    width: 14px;
    height: 14px;
    min-width: 14px;
    font-size: 9px;
  }

  body.force-mobile-view #legalOptionSection .compact-info-accordion {
    margin-top: 4px;
  }

  body.force-mobile-view #legalOptionSection .compact-info-accordion .collapsible-head {
    min-height: 34px;
    padding: 6px 8px;
  }
}

/* v29: compact step cards */
.step-card {
  margin-bottom: 5px;
  border-radius: 12px;
}

.step-card.step-collapsed {
  box-shadow: 0 5px 14px rgba(16, 24, 40, .045);
}

.step-toggle {
  min-height: 40px;
  padding: 6px 10px;
  gap: 8px;
  border-radius: 12px;
  align-items: center;
}

.step-toggle-main {
  gap: 0;
}

.step-toggle-title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 950;
}

.step-toggle-sub {
  display: -webkit-box;
  margin-top: 1px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 9.5px;
  line-height: 1.22;
  color: #7a8597;
}

.step-arrow {
  flex: 0 0 auto;
  min-width: 50px;
  height: 24px;
  padding: 0 8px;
  font-size: 10.5px;
  border-radius: 999px;
}

.step-card.step-open .step-arrow,
.step-card.step-completed .step-arrow {
  background: #111827;
  color: #fff;
}

.step-card.step-locked {
  opacity: .86;
}

.step-card.step-locked .step-toggle {
  cursor: pointer;
  opacity: 1;
}

.step-card.step-locked .step-arrow {
  display: inline-flex;
  color: transparent;
  position: relative;
  min-width: 42px;
  height: 23px;
  background: #f2f4f7;
  border: 1px solid #e4e7ec;
}

.step-card.step-locked .step-arrow::before {
  content: "다음";
  position: absolute;
  color: #667085;
  font-size: 10px;
}

.step-card[data-step-index="1"] {
  border-color: rgba(239, 68, 68, .30);
  box-shadow: 0 8px 20px rgba(239, 68, 68, .08);
}

.step-body {
  padding: 0 9px 9px;
}

.calculation-section {
  margin-top: 6px;
}

.calculate-btn {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 13px;
  font-size: 16px;
}

@media (max-width: 900px) {
  body.force-mobile-view .step-card {
    margin-bottom: 4px;
    border-radius: 11px;
  }

  body.force-mobile-view .step-toggle {
    min-height: 36px;
    padding: 5px 8px;
    gap: 6px;
    border-radius: 11px;
  }

  body.force-mobile-view .step-toggle-title {
    font-size: 13px;
    line-height: 1.15;
  }

  body.force-mobile-view .step-toggle-sub {
    font-size: 9px;
    line-height: 1.15;
  }

  body.force-mobile-view .step-arrow {
    min-width: 46px;
    height: 22px;
    padding: 0 7px;
    font-size: 10px;
  }

  body.force-mobile-view .step-card.step-locked .step-arrow {
    min-width: 38px;
    height: 21px;
  }

  body.force-mobile-view .step-body {
    padding: 0 8px 8px;
  }

  body.force-mobile-view .calculation-section {
    margin-top: 5px;
  }

  body.force-mobile-view .calculate-btn {
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 15px;
  }
}

/* v30: mobile spacing compression only */
@media (max-width: 900px) {
  body.force-mobile-view .container {
    padding-top: 6px;
  }

  body.force-mobile-view .step-card {
    margin-bottom: 3px;
  }

  body.force-mobile-view .step-toggle {
    min-height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body.force-mobile-view .step-body {
    padding: 0 6px 6px;
  }

  body.force-mobile-view input,
  body.force-mobile-view select,
  body.force-mobile-view textarea {
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body.force-mobile-view .top-grid {
    gap: 4px;
  }

  body.force-mobile-view #calendarBuildBtn {
    min-height: 31px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  body.force-mobile-view #basicSection .option-box,
  body.force-mobile-view #legalOptionSection .option-box,
  body.force-mobile-view #legalOptionSection .pay-option-card {
    margin-top: 3px;
    padding: 5px 6px;
  }

  body.force-mobile-view #basicSection .radio-row,
  body.force-mobile-view #legalOptionSection .radio-row,
  body.force-mobile-view #legalOptionSection .check-row {
    min-height: 21px;
    margin: 0;
    line-height: 1.08;
  }

  body.force-mobile-view #basicSection .option-hint,
  body.force-mobile-view #legalOptionSection .muted,
  body.force-mobile-view #allowanceSection .muted {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.18;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel {
    padding: 4px;
    margin-bottom: 3px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .form-grid {
    gap: 3px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .form-grid > div {
    padding: 3px 4px;
    gap: 4px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel input {
    min-height: 24px;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  body.force-mobile-view #workCalendarSection .main-calendar-title {
    margin-bottom: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  body.force-mobile-view #workCalendarSection .calendar-top-actions {
    margin: 2px 0 3px;
  }

  body.force-mobile-view #workCalendarSection .calendar-top-actions button {
    min-height: 26px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  body.force-mobile-view #legalOptionSection #holidayApplyBox {
    margin-top: 3px !important;
    padding: 4px 6px;
  }

  body.force-mobile-view #legalOptionSection #customTaxBox,
  body.force-mobile-view #legalOptionSection #probationRateBox {
    margin-top: 4px !important;
  }

  body.force-mobile-view #allowanceSection .form-grid,
  body.force-mobile-view #allowanceSection .two-grid {
    gap: 4px;
  }

  body.force-mobile-view #allowanceSection .form-grid + .form-grid,
  body.force-mobile-view #allowanceSection .two-grid {
    margin-top: 4px !important;
  }
}

/* v29: compact input rows with real grouped markup */
#basicSection .basic-input-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

#basicSection .basic-input-stack .form-grid.two-col,
#basicSection .basic-year-month {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#basicSection .basic-input-stack label {
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}

#basicSection .basic-input-stack label > input {
  display: block;
  width: 100%;
  margin-top: 3px;
}

#basicSection #calendarBuildBtn {
  width: auto;
  min-width: 112px;
  white-space: nowrap;
}

#basicSection .option-box {
  margin-top: 8px;
  padding: 10px 12px;
}

#basicSection .radio-row,
#legalOptionSection .radio-row,
#legalOptionSection .check-row,
#legalOptionSection .pay-option-card .check-row {
  min-height: 24px;
  margin: 2px 0;
  gap: 4px;
  line-height: 1.18;
}

#basicSection input[type="radio"],
#legalOptionSection input[type="radio"],
#legalOptionSection input[type="checkbox"] {
  min-height: auto;
  padding: 0;
  margin-right: 3px;
}

#basicSection .option-hint {
  margin-top: 5px;
  padding: 7px 8px;
}

#workCalendarSection .time-entry-grid {
  display: grid;
  gap: 5px;
}

#workCalendarSection .time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#workCalendarSection .time-grid label,
#workCalendarSection .break-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 5px 6px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  font-size: 11px;
  line-height: 1.15;
  color: #667085;
  white-space: nowrap;
}

#workCalendarSection .time-grid input,
#workCalendarSection .break-input input {
  min-height: 28px;
  padding: 3px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-weight: 900;
}

#workCalendarSection .break-input .input-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px;
  min-width: 0;
}

#workCalendarSection .time-entry-grid .field-help {
  margin-top: 0;
}

.mobile-sheet-edit-form .time-entry-grid {
  display: grid;
  gap: 7px;
}

.mobile-sheet-edit-form .time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.mobile-sheet-edit-form .time-grid label,
.mobile-sheet-edit-form .break-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.mobile-sheet-edit-form .time-grid input,
.mobile-sheet-edit-form .break-input input {
  min-height: 30px;
  padding: 3px 4px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 900;
}

.mobile-sheet-edit-form .break-input .input-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px;
}

@media (max-width: 900px) {
  #basicSection .basic-input-stack,
  body.force-mobile-view #basicSection .basic-input-stack {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  #basicSection .basic-input-stack .form-grid.two-col,
  body.force-mobile-view #basicSection .basic-input-stack .form-grid.two-col,
  body.force-mobile-view #basicSection .basic-year-month {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px;
  }

  #basicSection #calendarBuildBtn,
  body.force-mobile-view #basicSection #calendarBuildBtn {
    width: 100%;
    min-height: 30px;
    padding: 5px 8px;
  }

  #basicSection .basic-input-stack label,
  body.force-mobile-view #basicSection .basic-input-stack label {
    font-size: 10.5px;
  }

  #workCalendarSection .time-grid,
  body.force-mobile-view #workCalendarSection .time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .time-entry-grid {
    gap: 4px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .time-grid label,
  body.force-mobile-view #workCalendarSection .calendar-time-panel .break-input {
    padding: 3px 4px;
    gap: 4px;
  }

  body.force-mobile-view #workCalendarSection .calendar-time-panel .time-grid input,
  body.force-mobile-view #workCalendarSection .calendar-time-panel .break-input input {
    min-height: 24px;
    padding: 1px 3px;
    font-size: 14px;
  }

  body.force-mobile-view #basicSection .option-box,
  body.force-mobile-view #legalOptionSection .option-box,
  body.force-mobile-view #legalOptionSection .pay-option-card {
    margin-top: 4px;
    padding: 5px 6px;
  }

  body.force-mobile-view #basicSection .radio-row,
  body.force-mobile-view #legalOptionSection .radio-row,
  body.force-mobile-view #legalOptionSection .check-row,
  body.force-mobile-view #legalOptionSection .pay-option-card .check-row {
    min-height: 20px;
    margin: 0;
    gap: 3px;
  }

  body.force-mobile-view #basicSection input[type="radio"],
  body.force-mobile-view #legalOptionSection input[type="radio"],
  body.force-mobile-view #legalOptionSection input[type="checkbox"] {
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 2px 0 0;
  }
}

/* v31: final override for actual mobile compact rendering */
#workCalendarSection .calendar-time-panel .time-entry-grid,
#workCalendarSection .detail-time-grid,
.mobile-sheet-edit-form .time-entry-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}

#workCalendarSection .calendar-time-panel .time-grid,
#workCalendarSection .detail-time-grid .time-grid,
.mobile-sheet-edit-form .time-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

#workCalendarSection .calendar-time-panel .time-grid label,
#workCalendarSection .calendar-time-panel .break-input,
#workCalendarSection .detail-time-grid .time-grid label,
#workCalendarSection .detail-time-grid .break-input,
.mobile-sheet-edit-form .time-grid label,
.mobile-sheet-edit-form .break-input {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 5px !important;
  gap: 4px !important;
  line-height: 1.1 !important;
}

#workCalendarSection .calendar-time-panel .time-grid input,
#workCalendarSection .calendar-time-panel .break-input input,
#workCalendarSection .detail-time-grid .time-grid input,
#workCalendarSection .detail-time-grid .break-input input,
.mobile-sheet-edit-form .time-grid input,
.mobile-sheet-edit-form .break-input input {
  width: 100% !important;
  min-height: 24px !important;
  padding: 1px 3px !important;
  border: 0 !important;
}

#workCalendarSection .calendar-time-panel .break-input .input-with-unit,
#workCalendarSection .detail-time-grid .break-input .input-with-unit,
.mobile-sheet-edit-form .break-input .input-with-unit {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 2px !important;
}

#workCalendarSection .calendar-time-panel .field-help,
#workCalendarSection .detail-time-grid .field-help,
.mobile-sheet-edit-form .field-help {
  margin: 0 !important;
  line-height: 1.15 !important;
}

#legalOptionSection .compact-option-box,
#basicSection .compact-option-box {
  padding: 5px 7px !important;
  margin-top: 6px !important;
  border-radius: 10px !important;
}

#legalOptionSection .legal-main-options,
#legalOptionSection .tax-option-box {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

#legalOptionSection #holidayApplyBox.compact-option-box {
  margin-top: 3px !important;
  padding: 4px 6px !important;
}

#legalOptionSection .compact-option-list,
#basicSection .compact-option-list {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#legalOptionSection .weekly-holiday-list {
  margin-top: 1px !important;
}

#legalOptionSection .option-row,
#basicSection .option-row,
#legalOptionSection .check-row,
#legalOptionSection .radio-row,
#basicSection .radio-row {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 1px 0 !important;
  gap: 4px !important;
  line-height: 1.08 !important;
  font-size: 11.5px !important;
}

#legalOptionSection .option-row label,
#basicSection .option-row label {
  line-height: 1.08 !important;
  margin: 0 !important;
}

#legalOptionSection .option-row input[type="radio"],
#legalOptionSection .option-row input[type="checkbox"],
#basicSection .option-row input[type="radio"] {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  margin: 0 3px 0 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#legalOptionSection .compact-option-box strong,
#basicSection .compact-option-box strong {
  display: inline-block;
  margin-bottom: 1px;
  font-size: 11.5px;
  line-height: 1.08;
}

#legalOptionSection .compact-option-box .muted {
  font-size: 10px !important;
}

#legalOptionSection .info {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  margin-left: 1px !important;
  font-size: 8px !important;
}

#legalOptionSection #customTaxBox,
#legalOptionSection #probationRateBox {
  margin-top: 4px !important;
}

@media (max-width: 900px) {
  body.force-mobile-view #workCalendarSection .calendar-time-panel .time-grid,
  body.force-mobile-view #workCalendarSection .detail-time-grid .time-grid,
  body.force-mobile-view .mobile-sheet-edit-form .time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.force-mobile-view #legalOptionSection .compact-option-box,
  body.force-mobile-view #basicSection .compact-option-box {
    padding: 5px 7px !important;
    margin-top: 4px !important;
  }

  body.force-mobile-view #legalOptionSection .option-row,
  body.force-mobile-view #basicSection .option-row,
  body.force-mobile-view #legalOptionSection .check-row,
  body.force-mobile-view #legalOptionSection .radio-row,
  body.force-mobile-view #basicSection .radio-row {
    padding: 2px 0 !important;
    padding: 1px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
}

/* v34: buttonless basic settings and unclipped info tooltips */
#basicSection,
#legalOptionSection,
#basicSection .step-body,
#legalOptionSection .step-body {
  overflow: visible !important;
}

#basicSection .basic-input-stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr) !important;
  gap: 8px !important;
  align-items: end !important;
}

#basicSection .basic-year-month {
  display: grid !important;
  grid-template-columns: minmax(132px, 1.45fr) minmax(74px, .75fr) !important;
  gap: 6px !important;
}

#basicSection .basic-wage {
  min-width: 0 !important;
}

#basicSection .basic-input-stack input {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#year {
  min-width: 0 !important;
  font-variant-numeric: tabular-nums;
}

.info {
  z-index: 2;
}

.info.tooltip-active {
  background: #111827 !important;
  color: #fff !important;
}

.info-tooltip-layer {
  position: fixed;
  z-index: 10050;
  display: none;
  width: max-content;
  max-width: 260px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.info-tooltip-layer.show {
  display: block;
}

@media (max-width: 900px) {
  #basicSection .basic-input-stack,
  body.force-mobile-view #basicSection .basic-input-stack {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  #basicSection .basic-year-month,
  body.force-mobile-view #basicSection .basic-year-month {
    grid-template-columns: minmax(138px, 1.45fr) minmax(76px, .75fr) !important;
    gap: 5px !important;
  }

  #basicSection .basic-input-stack input,
  body.force-mobile-view #basicSection .basic-input-stack input {
    min-height: 34px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 14px !important;
  }

  #year,
  body.force-mobile-view #year {
    min-width: 138px !important;
  }

  .info-tooltip-layer {
    max-width: min(260px, calc(100vw - 20px));
    font-size: 11.5px;
    line-height: 1.4;
  }
}

/* v35: stronger basic grid and CSS tooltip fallback */
#basicSection .basic-input-stack .form-grid.two-col.basic-year-month,
body.force-mobile-view #basicSection .basic-input-stack .form-grid.two-col.basic-year-month {
  grid-template-columns: minmax(142px, 1.45fr) minmax(72px, .75fr) !important;
}

#basicSection .basic-input-stack .form-grid.two-col.basic-year-month #year,
body.force-mobile-view #basicSection .basic-input-stack .form-grid.two-col.basic-year-month #year {
  min-width: 142px !important;
}

.info:hover::after,
.info:focus::after {
  content: attr(data-tip) !important;
  position: fixed !important;
  z-index: 10040 !important;
  top: 76px !important;
  right: 12px !important;
  left: auto !important;
  display: block !important;
  width: auto !important;
  max-width: 260px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  background: #111827 !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.28) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.info.tooltip-active::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 900px) {
  .info:hover::after,
  .info:focus::after {
    top: auto !important;
    right: 10px !important;
    bottom: 14px !important;
    max-width: min(260px, calc(100vw - 20px)) !important;
    font-size: 11.5px !important;
  }
}

/* v36: basic settings order, width, and compact height */
#basicSection .basic-input-stack,
body.force-mobile-view #basicSection .basic-input-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  align-items: stretch !important;
}

#basicSection .year-month-row,
body.force-mobile-view #basicSection .year-month-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) !important;
  gap: 10px !important;
  width: 100% !important;
}

#basicSection .wage-row,
body.force-mobile-view #basicSection .wage-row {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#basicSection .year-month-row label,
#basicSection .wage-row,
body.force-mobile-view #basicSection .year-month-row label,
body.force-mobile-view #basicSection .wage-row {
  min-width: 0 !important;
  margin: 0 !important;
}

#basicSection .year-month-row input,
#basicSection .wage-row input,
body.force-mobile-view #basicSection .year-month-row input,
body.force-mobile-view #basicSection .wage-row input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-top: 3px !important;
  padding: 6px 9px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

#basicSection .year-month-row #year,
body.force-mobile-view #basicSection .year-month-row #year {
  min-width: 0 !important;
}

#basicSection .basic-year-month,
#basicSection .basic-wage {
  display: contents !important;
}

/* v37: dense app-style step cards */
.card.step-card {
  padding: 0 !important;
  margin-bottom: 7px !important;
  border-radius: 13px !important;
  box-shadow: 0 5px 14px rgba(17, 24, 39, .035) !important;
  overflow: hidden !important;
}

.step-card.step-collapsed {
  box-shadow: 0 3px 10px rgba(17, 24, 39, .025) !important;
}

.step-toggle {
  min-height: 0 !important;
  padding: 12px 14px !important;
  gap: 9px !important;
  border-radius: 13px !important;
}

.step-card.step-open .step-toggle {
  padding-bottom: 10px !important;
}

.step-toggle-main {
  gap: 1px !important;
}

.step-toggle-title {
  font-size: 16px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.step-toggle-sub {
  margin-top: 1px !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
  font-weight: 750 !important;
  color: #667085 !important;
}

.step-arrow {
  min-width: 58px !important;
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

.step-card.step-locked .step-toggle {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.step-card.step-locked .step-toggle-title {
  font-size: 15px !important;
}

.step-card.step-locked .step-toggle-sub {
  font-size: 10.5px !important;
  line-height: 1.16 !important;
}

.step-body {
  padding: 8px 14px 12px !important;
  border-top-color: #eef2f7 !important;
}

.step-complete-row {
  margin-top: 9px !important;
  padding-top: 8px !important;
  gap: 6px !important;
}

.step-complete-btn {
  width: auto !important;
  min-width: 108px !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
}

#basicSection .minimum-wage-box {
  margin-top: 6px !important;
}

#basicSection .option-box,
#legalOptionSection .option-box,
#legalOptionSection .pay-option-card,
#allowanceSection .option-box {
  margin-top: 6px !important;
}

@media (max-width: 900px) {
  .card.step-card,
  body.force-mobile-view .card.step-card {
    padding: 0 !important;
    margin-bottom: 6px !important;
    border-radius: 12px !important;
  }

  .step-toggle,
  body.force-mobile-view .step-toggle {
    padding: 10px 11px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  .step-toggle-title,
  body.force-mobile-view .step-toggle-title {
    font-size: 15px !important;
    line-height: 1.16 !important;
  }

  .step-toggle-sub,
  body.force-mobile-view .step-toggle-sub {
    font-size: 10px !important;
    line-height: 1.14 !important;
  }

  .step-arrow,
  body.force-mobile-view .step-arrow {
    min-width: 54px !important;
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
  }

  .step-card.step-locked .step-toggle,
  body.force-mobile-view .step-card.step-locked .step-toggle {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .step-body,
  body.force-mobile-view .step-body {
    padding: 7px 10px 10px !important;
  }

  .step-complete-row,
  body.force-mobile-view .step-complete-row {
    margin-top: 8px !important;
    padding-top: 7px !important;
    justify-content: flex-end !important;
  }

  .step-complete-btn,
  body.force-mobile-view .step-complete-btn {
    width: auto !important;
    min-width: 96px !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: 11.5px !important;
  }
}

/* v38: clearer locked step button copy */
.step-arrow,
body.force-mobile-view .step-arrow {
  white-space: nowrap !important;
}

.step-card.step-locked {
  opacity: .96 !important;
}

.step-card.step-locked .step-toggle,
body.force-mobile-view .step-card.step-locked .step-toggle {
  opacity: 1 !important;
  cursor: default !important;
}

.step-card.step-locked .step-arrow,
body.force-mobile-view .step-card.step-locked .step-arrow {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 64px !important;
  width: auto !important;
  height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid #e4e7ec !important;
  background: #f2f4f7 !important;
  color: transparent !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.step-card.step-locked .step-arrow::before,
body.force-mobile-view .step-card.step-locked .step-arrow::before {
  content: "다음" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #667085 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.step-card.step-completed .step-arrow,
body.force-mobile-view .step-card.step-completed .step-arrow {
  min-width: 58px !important;
  background: #eef2ff !important;
  color: #111827 !important;
}

@media (max-width: 900px) {
  .step-card.step-locked .step-arrow,
  body.force-mobile-view .step-card.step-locked .step-arrow {
    min-width: 64px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  .step-card.step-locked .step-arrow::before,
  body.force-mobile-view .step-card.step-locked .step-arrow::before {
    font-size: 10px !important;
  }
}

/* v39: state hierarchy for step cards */
.card.step-card {
  margin-bottom: 12px !important;
  border-radius: 13px !important;
  border-color: #edf0f4 !important;
  background: #fff !important;
}

.card.step-card.step-open {
  border-color: rgba(17, 24, 39, .16) !important;
  box-shadow: 0 8px 22px rgba(17, 24, 39, .07) !important;
}

.card.step-card.step-completed:not(.step-open) {
  border-color: rgba(37, 99, 235, .12) !important;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .035) !important;
}

.card.step-card.step-locked:not(.step-open) {
  border-color: #eef1f5 !important;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .018) !important;
}

.step-card.step-open .step-toggle {
  padding: 15px 16px 12px !important;
  gap: 10px !important;
}

.step-card.step-open .step-toggle-title {
  font-size: 16.5px !important;
  line-height: 1.18 !important;
  color: #111827 !important;
}

.step-card.step-open .step-toggle-sub {
  font-size: 11px !important;
  line-height: 1.2 !important;
  opacity: .78 !important;
}

.step-card.step-completed:not(.step-open) .step-toggle {
  padding: 11px 13px !important;
}

.step-card.step-completed:not(.step-open) .step-toggle-title {
  font-size: 15.5px !important;
  line-height: 1.16 !important;
}

.step-card.step-completed:not(.step-open) .step-toggle-sub {
  font-size: 10.5px !important;
  line-height: 1.14 !important;
  opacity: .7 !important;
}

.step-card.step-locked:not(.step-open) .step-toggle,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
  padding: 8px 11px !important;
  gap: 7px !important;
}

.step-card.step-locked:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
  font-size: 14px !important;
  line-height: 1.12 !important;
  color: #344054 !important;
}

.step-card.step-locked:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-sub {
  margin-top: 0 !important;
  font-size: 9.5px !important;
  line-height: 1.1 !important;
  opacity: .58 !important;
}

.step-arrow,
body.force-mobile-view .step-arrow {
  min-width: 54px !important;
  height: 26px !important;
  padding: 0 9px !important;
  border-radius: 10px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
}

.step-card.step-open .step-arrow,
body.force-mobile-view .step-card.step-open .step-arrow {
  min-width: 50px !important;
  height: 28px !important;
  background: #111827 !important;
  color: #fff !important;
}

.step-card.step-completed .step-arrow,
body.force-mobile-view .step-card.step-completed .step-arrow {
  min-width: 56px !important;
  height: 26px !important;
  background: #eef2ff !important;
  color: #111827 !important;
  border: 1px solid #dfe7ff !important;
}

.step-card.step-locked .step-arrow,
body.force-mobile-view .step-card.step-locked .step-arrow {
  min-width: 60px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  background: #f5f6f8 !important;
  border-color: #eaecf0 !important;
}

.step-card.step-locked .step-arrow::before,
body.force-mobile-view .step-card.step-locked .step-arrow::before {
  font-size: 9.5px !important;
  color: #7b8494 !important;
}

.step-body {
  padding: 9px 14px 13px !important;
}

.step-card.step-open .step-body {
  padding-top: 8px !important;
}

@media (max-width: 900px) {
  .card.step-card,
  body.force-mobile-view .card.step-card {
    margin-bottom: 10px !important;
    border-radius: 12px !important;
  }

  .step-card.step-open .step-toggle,
  body.force-mobile-view .step-card.step-open .step-toggle {
    padding: 13px 12px 10px !important;
  }

  .step-card.step-open .step-toggle-title,
  body.force-mobile-view .step-card.step-open .step-toggle-title {
    font-size: 15.5px !important;
  }

  .step-card.step-open .step-toggle-sub,
  body.force-mobile-view .step-card.step-open .step-toggle-sub {
    font-size: 10px !important;
    line-height: 1.14 !important;
  }

  .step-card.step-completed:not(.step-open) .step-toggle,
  body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle {
    padding: 10px 11px !important;
  }

  .step-card.step-locked:not(.step-open) .step-toggle,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
    padding: 8px 10px !important;
  }

  .step-card.step-locked:not(.step-open) .step-toggle-title,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
    font-size: 13.5px !important;
  }

  .step-card.step-locked:not(.step-open) .step-toggle-sub,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-sub {
    font-size: 9.25px !important;
  }

  .step-arrow,
  body.force-mobile-view .step-arrow {
    height: 25px !important;
    min-width: 52px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .step-card.step-locked .step-arrow,
  body.force-mobile-view .step-card.step-locked .step-arrow {
    min-width: 60px !important;
    height: 24px !important;
  }

  .step-card.step-locked .step-arrow::before,
  body.force-mobile-view .step-card.step-locked .step-arrow::before {
    font-size: 9.25px !important;
  }
}

/* v40: unified clean step-card rhythm */
.card.step-card,
body.force-mobile-view .card.step-card {
  margin-bottom: 12px !important;
  border: 1px solid #e8edf3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
  overflow: hidden !important;
}

.card.step-card.step-open,
.card.step-card.step-completed:not(.step-open),
.card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-open,
body.force-mobile-view .card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open) {
  border-color: #e8edf3 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
  opacity: 1 !important;
}

.step-toggle,
.step-card.step-open .step-toggle,
.step-card.step-completed:not(.step-open) .step-toggle,
.step-card.step-locked:not(.step-open) .step-toggle,
body.force-mobile-view .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
  min-height: 72px !important;
  padding: 14px 14px !important;
  gap: 12px !important;
  align-items: center !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.step-card.step-open .step-toggle {
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
}

.step-toggle-main,
body.force-mobile-view .step-toggle-main {
  gap: 3px !important;
  min-width: 0 !important;
}

.step-toggle-title,
.step-card.step-open .step-toggle-title,
.step-card.step-completed:not(.step-open) .step-toggle-title,
.step-card.step-locked:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-toggle-title,
body.force-mobile-view .step-card.step-open .step-toggle-title,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
  font-size: 16px !important;
  line-height: 1.18 !important;
  color: #111827 !important;
  letter-spacing: 0 !important;
}

.step-toggle-sub,
.step-card.step-open .step-toggle-sub,
.step-card.step-completed:not(.step-open) .step-toggle-sub,
.step-card.step-locked:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-toggle-sub,
body.force-mobile-view .step-card.step-open .step-toggle-sub,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-sub {
  margin-top: 0 !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
  color: #667085 !important;
  opacity: .78 !important;
  font-weight: 700 !important;
}

.step-arrow,
.step-card.step-open .step-arrow,
.step-card.step-completed .step-arrow,
.step-card.step-locked .step-arrow,
body.force-mobile-view .step-arrow,
body.force-mobile-view .step-card.step-open .step-arrow,
body.force-mobile-view .step-card.step-completed .step-arrow,
body.force-mobile-view .step-card.step-locked .step-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  width: auto !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.step-card:not(.step-locked) .step-arrow,
body.force-mobile-view .step-card:not(.step-locked) .step-arrow {
  border: 1px solid #0f172a !important;
  background: #0f172a !important;
  color: #fff !important;
}

.step-card.step-completed:not(.step-open) .step-arrow,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-arrow {
  border-color: #dbe5ff !important;
  background: #eef4ff !important;
  color: #1f3b8f !important;
}

.step-card.step-locked .step-arrow,
body.force-mobile-view .step-card.step-locked .step-arrow {
  position: relative !important;
  min-width: 44px !important;
  height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid #e6eaf0 !important;
  background: #f6f8fb !important;
  color: transparent !important;
}

.step-card.step-locked .step-arrow::before,
body.force-mobile-view .step-card.step-locked .step-arrow::before {
  content: "다음" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #667085 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.step-body,
body.force-mobile-view .step-body {
  padding: 10px 14px 14px !important;
}

@media (max-width: 900px) {
  .card.step-card,
  body.force-mobile-view .card.step-card {
    margin-bottom: 10px !important;
    border-radius: 13px !important;
  }

  .step-toggle,
  .step-card.step-open .step-toggle,
  .step-card.step-completed:not(.step-open) .step-toggle,
  .step-card.step-locked:not(.step-open) .step-toggle,
  body.force-mobile-view .step-toggle,
  body.force-mobile-view .step-card.step-open .step-toggle,
  body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
    min-height: 72px !important;
    padding: 13px 12px !important;
    gap: 10px !important;
    border-radius: 13px !important;
  }

  .step-toggle-title,
  .step-card.step-open .step-toggle-title,
  .step-card.step-completed:not(.step-open) .step-toggle-title,
  .step-card.step-locked:not(.step-open) .step-toggle-title,
  body.force-mobile-view .step-toggle-title,
  body.force-mobile-view .step-card.step-open .step-toggle-title,
  body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-title,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
    font-size: 15.5px !important;
  }

  .step-toggle-sub,
  .step-card.step-open .step-toggle-sub,
  .step-card.step-completed:not(.step-open) .step-toggle-sub,
  .step-card.step-locked:not(.step-open) .step-toggle-sub,
  body.force-mobile-view .step-toggle-sub,
  body.force-mobile-view .step-card.step-open .step-toggle-sub,
  body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-sub,
  body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-sub {
    font-size: 10px !important;
    line-height: 1.16 !important;
  }
}

/* v43: final step hierarchy override */
.card.step-card,
body.force-mobile-view .card.step-card {
  margin-bottom: 14px !important;
  border: 1px solid #e8edf3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .04) !important;
  overflow: hidden !important;
}

.card.step-card.step-open,
body.force-mobile-view .card.step-card.step-open {
  border-color: rgba(15, 23, 42, .18) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .075) !important;
}

.card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-completed:not(.step-open) {
  border-color: rgba(37, 99, 235, .14) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;
}

.card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open) {
  border-color: #edf1f5 !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .03) !important;
  opacity: 1 !important;
}

.step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle {
  min-height: 76px !important;
  padding: 15px !important;
}

.step-card.step-completed:not(.step-open) .step-toggle,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle {
  min-height: 68px !important;
  padding: 12px 14px !important;
}

.step-card.step-locked:not(.step-open) .step-toggle,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle {
  min-height: 62px !important;
  padding: 10px 13px !important;
}

.step-card.step-open .step-toggle-title,
body.force-mobile-view .step-card.step-open .step-toggle-title {
  font-size: 16.5px !important;
  line-height: 1.18 !important;
}

.step-card.step-completed:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-title {
  font-size: 15.5px !important;
  line-height: 1.16 !important;
}

.step-card.step-locked:not(.step-open) .step-toggle-title,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-title {
  font-size: 15px !important;
  line-height: 1.14 !important;
  color: #344054 !important;
}

.step-card.step-open .step-toggle-sub,
body.force-mobile-view .step-card.step-open .step-toggle-sub {
  font-size: 10.75px !important;
  line-height: 1.18 !important;
  opacity: .72 !important;
}

.step-card.step-completed:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-toggle-sub {
  font-size: 10.25px !important;
  line-height: 1.14 !important;
  opacity: .64 !important;
}

.step-card.step-locked:not(.step-open) .step-toggle-sub,
body.force-mobile-view .step-card.step-locked:not(.step-open) .step-toggle-sub {
  font-size: 9.75px !important;
  line-height: 1.1 !important;
  opacity: .52 !important;
}

.step-card.step-open .step-arrow,
body.force-mobile-view .step-card.step-open .step-arrow {
  min-width: 50px !important;
  height: 28px !important;
  border-radius: 9px !important;
  background: #0f172a !important;
  color: #fff !important;
  font-size: 10.75px !important;
}

.step-card.step-completed:not(.step-open) .step-arrow,
body.force-mobile-view .step-card.step-completed:not(.step-open) .step-arrow {
  min-width: 54px !important;
  height: 27px !important;
  border-radius: 9px !important;
  background: #eef4ff !important;
  color: #1f3b8f !important;
  font-size: 10.5px !important;
}

.step-card.step-locked .step-arrow,
body.force-mobile-view .step-card.step-locked .step-arrow {
  min-width: 42px !important;
  height: 25px !important;
  border-radius: 8px !important;
  background: #f7f9fc !important;
  color: transparent !important;
}

.step-card.step-locked .step-arrow::before,
body.force-mobile-view .step-card.step-locked .step-arrow::before {
  content: "다음" !important;
  color: #7b8494 !important;
  font-size: 10px !important;
}

/* v48: final visible active red emphasis */
.card.step-card.step-open,
.card.step-card.step-open:hover,
.card.step-card.step-open:focus-within,
body.force-mobile-view .card.step-card.step-open,
body.force-mobile-view .card.step-card.step-open:hover,
body.force-mobile-view .card.step-card.step-open:focus-within {
  border: 2px solid rgba(255, 90, 90, .56) !important;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 90, 90, .14), 0 8px 20px rgba(255, 90, 90, .075) !important;
}

.card.step-card.step-completed:not(.step-open),
.card.step-card.step-completed:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-completed:not(.step-open),
body.force-mobile-view .card.step-card.step-completed:not(.step-open):hover {
  border: 1px solid #e9eef5 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.card.step-card.step-locked:not(.step-open),
.card.step-card.step-locked:not(.step-open):hover,
body.force-mobile-view .card.step-card.step-locked:not(.step-open),
body.force-mobile-view .card.step-card.step-locked:not(.step-open):hover {
  border: 1px solid #f0f3f7 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.step-card.step-open .step-toggle,
.step-card.step-open .step-toggle:hover,
.step-card.step-open .step-toggle:focus,
body.force-mobile-view .step-card.step-open .step-toggle,
body.force-mobile-view .step-card.step-open .step-toggle:hover,
body.force-mobile-view .step-card.step-open .step-toggle:focus {
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
}

/* SEO final layout guard: keep service pages stable after calculator overrides */
body:has(.seo-service) .container.seo-service {
  width: 100%;
  max-width: 1040px;
}

body:has(.seo-service) .seo-service .card {
  border-color: #edf0f4;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .045);
}

@media (max-width: 760px) {
  body:has(.seo-service) .container.seo-service {
    width: 100%;
    max-width: 100vw;
    padding: 16px 14px;
    overflow-x: hidden;
  }

  body:has(.seo-service) .seo-service .seo-hero {
    width: 100%;
    max-width: 100%;
    padding: 24px 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(.seo-service) .seo-service .seo-hero::after {
    right: 22px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    opacity: .025;
    filter: blur(18px);
  }

  body:has(.seo-service) .seo-service .card {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    overflow: hidden;
  }
}

/* SEO mobile hard override */
@media (max-width: 760px) {
  .container.seo-service {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 16px 14px !important;
    overflow-x: hidden !important;
  }

  .container.seo-service .seo-hero,
  .container.seo-service .card {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .container.seo-service .seo-hero {
    padding: 24px 20px !important;
  }

  .container.seo-service .seo-hero::after {
    right: 22px !important;
    bottom: 22px !important;
    width: 48px !important;
    height: 48px !important;
    opacity: .025 !important;
    filter: blur(18px) !important;
  }

  .container.seo-service .card {
    padding: 20px !important;
  }
}

/* Unified SEO hero layout */
.container.seo-service {
  max-width: 1080px !important;
}

.container.seo-service .seo-hero {
  display: block !important;
  width: 100%;
  margin: 0 0 22px !important;
  padding: 38px 40px !important;
  text-align: left !important;
}

.seo-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 48px;
  align-items: center;
  width: 100%;
}

.seo-hero-copy {
  min-width: 0;
  max-width: 620px !important;
  margin: 0 !important;
  text-align: left !important;
}

.container.seo-service .seo-hero h1 {
  max-width: 620px !important;
  margin: 0 !important;
  font-size: clamp(38px, 4.2vw, 46px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.seo-hero-description {
  max-width: 590px;
  margin: 14px 0 0 !important;
  color: #4b5563;
  font-size: 17px;
  line-height: 1.72;
}

.seo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  align-items: center;
  justify-content: flex-start;
}

.seo-pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  align-items: center;
  justify-content: flex-start;
}

.seo-hero-panel {
  width: 430px;
  min-width: 0;
  justify-self: end;
}

.seo-hero-panel .seo-visual-card,
.seo-hero-panel .seo-metric-row {
  width: 100%;
}

.seo-hero-panel .seo-visual-card {
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .08);
}

.seo-hero-panel .seo-metric-row {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 0;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #edf0f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .055);
}

.seo-stat-card,
.seo-hero-panel .seo-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.seo-stat-card + .seo-stat-card,
.seo-hero-panel .seo-metric + .seo-metric {
  border-top: 1px solid #edf0f4;
}

.seo-stat-card span,
.seo-hero-panel .seo-metric span {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
}

.seo-stat-card strong,
.seo-hero-panel .seo-metric strong,
.seo-visual-value {
  min-width: max-content;
  margin-top: 0;
  font-size: 18px;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.seo-hero-panel .seo-visual-value {
  display: block;
  min-width: 0;
  margin-top: 3px;
  font-size: 26px;
  text-align: left;
}

.seo-cta,
.seo-secondary-cta,
.seo-pill {
  white-space: nowrap;
}

@media (max-width: 900px) {
  html:has(.seo-service),
  body:has(.seo-service) {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container.seo-service {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .container.seo-service .seo-hero,
  .container.seo-service .card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .container.seo-service .seo-hero {
    padding: 24px 14px !important;
  }

  .seo-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .seo-hero-copy,
  .container.seo-service .seo-hero h1,
  .seo-hero-description {
    max-width: 100% !important;
  }

  .container.seo-service .seo-hero h1 {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .seo-hero-description {
    font-size: 15px;
  }

  .seo-cta-row {
    justify-content: stretch;
  }

  .seo-cta,
  .seo-secondary-cta {
    width: 100%;
  }

  .seo-pill-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .seo-pill {
    flex: 0 0 auto;
  }

  .seo-hero-panel {
    width: 100%;
    justify-self: stretch;
  }

  .seo-stat-card,
  .seo-hero-panel .seo-metric {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 14px 15px;
  }

  .seo-stat-card strong,
  .seo-hero-panel .seo-metric strong {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    justify-self: start;
    font-size: clamp(10px, 3.05vw, 14px) !important;
    line-height: 1.15;
    text-align: left;
    letter-spacing: 0;
  }
}

/* Final mobile nav guard for SEO/info pages */
@media (max-width: 640px) {
  .seo-pill-links,
  .seo-nav,
  .guide-nav,
  .info-nav,
  .page-nav,
  .pill-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: wrap !important;
    padding-bottom: 0 !important;
  }

  .seo-pill,
  .guide-pill,
  .info-nav a,
  .page-nav a,
  .pill-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 9px 8px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    flex: initial !important;
  }

  .seo-pill-links > :last-child:nth-child(odd),
  .seo-nav > :last-child:nth-child(odd),
  .guide-nav > :last-child:nth-child(odd),
  .info-nav > :last-child:nth-child(odd),
  .page-nav > :last-child:nth-child(odd),
  .pill-nav > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* v50-final-eof: keep mobile drawer and chevrons above all legacy overrides */
.collapsible-head .collapsible-arrow,
#legalOptionSection .compact-info-accordion .collapsible-arrow {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.collapsible-head .collapsible-arrow::before,
#legalOptionSection .compact-info-accordion .collapsible-arrow::before {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform .16s ease !important;
}

.collapsible-box.open .collapsible-head .collapsible-arrow::before,
.collapsible-head[aria-expanded="true"] .collapsible-arrow::before {
  transform: translateY(3px) rotate(225deg) !important;
}

@media (max-width: 768px) {
  .global-site-header .desktop-nav,
  .global-site-header .global-nav {
    display: none !important;
  }

  .global-site-header .mobile-menu-button {
    display: inline-flex !important;
  }
}

/* v51: SEO cleanup, notice rhythm, and mobile header alignment */
.doc-toc a {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 0 !important;
}

.doc-toc a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #dc2626;
  flex: 0 0 auto;
}

body:has(.main-doc) .doc-hero h1,
body:has(.main-doc) .seo-hero h1,
body:has(.main-doc) .info-page > header h1,
.seo-page h1 {
  font-size: clamp(40px, 4vw, 46px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

body:has(.main-doc) h2,
body:has(.main-doc) .card h2,
.seo-page .card h2 {
  font-size: clamp(24px, 2.5vw, 28px) !important;
  line-height: 1.32 !important;
  font-weight: 700 !important;
}

body:has(.main-doc) h3,
body:has(.main-doc) .card h3,
.seo-page .card h3 {
  font-size: clamp(18px, 2vw, 21px) !important;
  line-height: 1.38 !important;
  font-weight: 650 !important;
}

body:has(.main-doc) p,
body:has(.main-doc) li,
body:has(.main-doc) td,
body:has(.main-doc) th,
.seo-page p,
.seo-page li {
  font-size: 15.5px !important;
  line-height: 1.8 !important;
}

.notice-list-page {
  display: block !important;
}

.notice-list-page .notice-item {
  padding: 0 0 22px !important;
  border-bottom: 1px solid #edf0f3 !important;
  background: transparent !important;
}

.notice-list-page .notice-item + .notice-item {
  margin-top: 22px !important;
}

.notice-list-page .doc-meta {
  display: block;
  margin-bottom: 6px;
  color: #9ca3af !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.notice-list-page .notice-title,
body:has(.main-doc) .notice-list-page .notice-title {
  margin: 0 0 8px !important;
  color: #111827 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.contact-box,
body:has(.main-doc) .contact-box {
  color: #166534 !important;
}

.contact-box a {
  color: #166534 !important;
}

body:has(.main-doc) .cta-panel .sub-text {
  color: #d1d5db !important;
}

@media (max-width: 768px) {
  .global-site-header {
    min-height: 56px !important;
  }

  .global-site-header .global-nav-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 14px !important;
  }

  .global-site-header .mobile-menu-button {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    align-self: center !important;
  }

  .global-site-header .global-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    margin: 0 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  body:has(.main-doc) .doc-hero h1,
  body:has(.main-doc) .seo-hero h1,
  body:has(.main-doc) .info-page > header h1,
  .seo-page h1 {
    font-size: clamp(32px, 8vw, 36px) !important;
  }

  body:has(.main-doc) h2,
  body:has(.main-doc) .card h2,
  .seo-page .card h2 {
    font-size: clamp(22px, 6vw, 24px) !important;
  }

  body:has(.main-doc) h3,
  body:has(.main-doc) .card h3,
  .seo-page .card h3 {
    font-size: 19px !important;
  }

  .notice-list-page .notice-title,
  body:has(.main-doc) .notice-list-page .notice-title {
    font-size: 19.5px !important;
  }
}

/* v56: image logo alignment */
.global-brand.site-logo,
.site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  text-decoration: none;
}

.site-logo img {
  display: block;
  width: auto;
  height: 42px;
  max-width: 170px;
  object-fit: contain;
}

.mobile-drawer-head .drawer-logo {
  justify-content: flex-start;
}

.mobile-drawer-head .drawer-logo img {
  height: 36px;
  max-width: 150px;
}

@media (max-width: 768px) {
  .global-site-header .global-brand.site-logo {
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .global-site-header .site-logo img {
    height: 34px;
    max-width: 140px;
  }
}

/* v58: larger header logo and no manual view-mode switch UI */
.global-site-header .global-nav-inner {
  align-items: center !important;
  min-height: 92px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.global-site-header .global-brand.site-logo {
  min-height: 64px !important;
}

.global-site-header .site-logo img {
  height: 64px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
}

.global-site-header .global-nav {
  align-items: center !important;
}

.pc-guide-note,
.mobile-guide-note,
.guide-switch-link {
  display: none !important;
}

@media (max-width: 768px) {
  .global-site-header {
    min-height: 68px !important;
  }

  .global-site-header .global-nav-inner {
    height: 68px !important;
    min-height: 68px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .global-site-header .global-brand.site-logo {
    height: 68px !important;
    min-height: 68px !important;
  }

  .global-site-header .site-logo img {
    height: 46px !important;
    max-width: 190px !important;
  }
}

/* v57: stable accordion chevrons and calmer calendar chips */
.collapsible-head .collapsible-arrow {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin-top: 0 !important;
  border-radius: 999px !important;
  background: #0f172a !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  overflow: visible !important;
  text-indent: 0 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18) !important;
}

.collapsible-head .collapsible-arrow::before {
  content: "" !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2.25px solid #fff !important;
  border-bottom: 2.25px solid #fff !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform .16s ease !important;
}

.collapsible-box.open .collapsible-head .collapsible-arrow::before,
.collapsible-head[aria-expanded="true"] .collapsible-arrow::before {
  transform: translateY(3px) rotate(225deg) !important;
}

.calendar-legend,
.calendar-help-note {
  align-items: center;
  gap: 8px 12px;
}

.legend-item {
  align-items: center;
  gap: 6px;
}

.text-chip {
  min-width: 44px;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0;
}

.text-day-chip {
  min-width: 34px;
  height: 20px;
  padding: 0 6px;
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .9);
  color: #0f172a;
  font-size: 10px;
}

/* v52: readable light CTA panels on SEO/info pages */
body:has(.main-doc) .cta-panel,
body:has(.main-doc) article > .cta-panel,
body:has(.main-doc) article > section.cta-panel,
.container.main-doc .cta-panel,
.container.seo-service .cta-panel {
  margin-top: 46px !important;
  padding: 24px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  text-align: left !important;
  box-shadow: none !important;
}

body:has(.main-doc) .cta-panel h2,
body:has(.main-doc) .cta-panel h3,
body:has(.main-doc) .cta-panel p,
body:has(.main-doc) .cta-panel .sub-text,
body:has(.main-doc) .cta-panel span:not(.cta-button span),
.container.main-doc .cta-panel h2,
.container.main-doc .cta-panel h3,
.container.main-doc .cta-panel p,
.container.main-doc .cta-panel .sub-text,
.container.seo-service .cta-panel h2,
.container.seo-service .cta-panel h3,
.container.seo-service .cta-panel p,
.container.seo-service .cta-panel .sub-text {
  color: #475569 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body:has(.main-doc) .cta-panel h2,
.container.main-doc .cta-panel h2,
.container.seo-service .cta-panel h2 {
  color: #0f172a !important;
}

body:has(.main-doc) .cta-panel h2::before,
.container.main-doc .cta-panel h2::before,
.container.seo-service .cta-panel h2::before {
  display: none !important;
}

body:has(.main-doc) .cta-panel .cta-button,
.container.main-doc .cta-panel .cta-button,
.container.seo-service .cta-panel .cta-button {
  margin-top: 14px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  text-align: center !important;
}