/* ==========================================================================
   Gold Building — Apple-style theme layer
   --------------------------------------------------------------------------
   Pure CSS. No markup, no element ids, no JS are touched by this file.
   It loads AFTER Tailwind's runtime <style>, so overrides of a Tailwind
   utility carry !important; overrides of the page's own classes do not.
   ========================================================================== */

:root {
    /* Surfaces */
    --ap-bg: #f5f5f7;
    --ap-surface: #ffffff;
    --ap-surface-2: #fafafa;
    --ap-surface-3: #ececf0;
    --ap-dark: #1d1d1f;

    /* Ink */
    --ap-ink: #1d1d1f;
    --ap-ink-2: #424245;
    --ap-ink-3: #6e6e73;
    --ap-ink-4: #86868b;
    --ap-ink-dim: #d2d2d7;

    /* Hairlines */
    --ap-line: rgba(0, 0, 0, .08);
    --ap-line-2: rgba(0, 0, 0, .05);
    --ap-line-strong: rgba(0, 0, 0, .14);
    --ap-line-dark: rgba(255, 255, 255, .12);

    /* Accents */
    --ap-accent: #ff9500;
    --ap-accent-ink: #b26a00;
    --ap-accent-soft: rgba(255, 149, 0, .12);
    --ap-blue: #0071e3;
    --ap-blue-ink: #0058b0;
    --ap-blue-soft: rgba(0, 113, 227, .08);
    --ap-green: #34c759;
    --ap-green-ink: #1c7c3a;
    --ap-red: #ff3b30;
    --ap-red-ink: #cf0f18;

    /* Radius */
    --ap-r-sm: 8px;
    --ap-r: 12px;
    --ap-r-lg: 18px;
    --ap-r-xl: 22px;
    --ap-r-pill: 980px;

    /* Elevation — wide and faint, never tight and dark */
    --ap-e1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .03);
    --ap-e2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -14px rgba(0, 0, 0, .16);
    --ap-e3: 0 2px 6px rgba(0, 0, 0, .04), 0 18px 40px -20px rgba(0, 0, 0, .22);
    --ap-e4: 0 24px 60px -24px rgba(0, 0, 0, .35);

    --ap-ease: cubic-bezier(.25, .1, .25, 1);
    --ap-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* -apple-system resolves to SF Pro for Latin and Apple SD Gothic Neo
       for Hangul on macOS — the authentic pairing for a Korean Apple page. */
    --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Helvetica Neue", "Apple SD Gothic Neo", Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
.gb-sim-font {
    font-family: var(--ap-font);
}

body {
    background-color: var(--ap-bg);
    color: var(--ap-ink);
    letter-spacing: -.011em;
}

::selection {
    background: rgba(0, 113, 227, .18);
}

/* Every figure in the app is a number in a column — lock the digit width. */
body {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   2. Typography — Apple caps UI weight at semibold/bold and tightens
      tracking as size grows. The page leans on 800/900 everywhere.
   -------------------------------------------------------------------------- */

.font-black { font-weight: 700 !important; }
.font-extrabold { font-weight: 700 !important; }
.font-bold { font-weight: 600 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }

h1, h2, h3, h4 {
    letter-spacing: -.021em;
}

.text-6xl, .text-7xl, .text-8xl { letter-spacing: -.03em !important; }
.text-4xl, .text-5xl { letter-spacing: -.025em !important; }
.text-2xl, .text-3xl { letter-spacing: -.021em !important; }
.text-lg, .text-xl { letter-spacing: -.016em !important; }

/* Small all-caps labels: Apple opens the tracking instead of shouting. */
.uppercase {
    letter-spacing: .06em !important;
    font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   3. Palette remap — the page's slate/indigo/orange scale, restated in
      Apple's system colors. Markup keeps its utility classes.
   -------------------------------------------------------------------------- */

.text-slate-900, .text-slate-800, .text-indigo-900 { color: var(--ap-ink) !important; }
.text-slate-700 { color: var(--ap-ink-2) !important; }
.text-slate-600 { color: #515154 !important; }
.text-slate-500 { color: var(--ap-ink-3) !important; }
.text-slate-400 { color: var(--ap-ink-4) !important; }
.text-slate-300, .text-slate-200 { color: var(--ap-ink-dim) !important; }

.text-indigo-600, .text-indigo-500, .text-blue-600 { color: var(--ap-blue) !important; }
.text-blue-800, .text-blue-700, .text-indigo-800 { color: var(--ap-blue-ink) !important; }
.text-indigo-300, .text-indigo-200, .text-blue-400 { color: #7ab8ff !important; }

.text-orange-700, .text-orange-600, .text-orange-900 { color: var(--ap-accent-ink) !important; }
.text-orange-500 { color: #c26a00 !important; }
.text-orange-400, .text-amber-600 { color: #ff9f0a !important; }

.text-emerald-600, .text-green-700, .text-green-600, .text-green-900 { color: var(--ap-green-ink) !important; }
.text-emerald-400, .text-emerald-300, .text-green-400 { color: #30d158 !important; }

.text-red-600, .text-red-500, .text-red-800, .text-red-900, .text-red-700 { color: var(--ap-red-ink) !important; }
.text-red-400, .text-red-300 { color: #ff6961 !important; }

.text-purple-600 { color: #8944ab !important; }
.text-purple-400 { color: #bf5af2 !important; }

.bg-slate-50, .bg-slate-50\/50 { background-color: var(--ap-surface-2) !important; }
.bg-slate-100 { background-color: var(--ap-surface-3) !important; }
.bg-slate-200 { background-color: #e3e3e8 !important; }
.bg-slate-900, .bg-slate-700, .bg-indigo-900 { background-color: var(--ap-dark) !important; }

.bg-indigo-50, .bg-indigo-50\/30, .bg-indigo-100, .bg-blue-50, .bg-blue-100,
.bg-indigo-500\/10 { background-color: var(--ap-blue-soft) !important; }
.bg-indigo-600, .bg-indigo-700, .bg-indigo-500, .bg-blue-600 { background-color: var(--ap-blue) !important; }

.bg-orange-50, .bg-orange-100 { background-color: var(--ap-accent-soft) !important; }
.bg-orange-500 { background-color: var(--ap-accent) !important; }
.bg-amber-50\/60 { background-color: rgba(255, 149, 0, .07) !important; }

.bg-green-50, .bg-green-100, .bg-emerald-50 { background-color: rgba(52, 199, 89, .10) !important; }
.bg-green-500, .bg-green-600, .bg-emerald-500 { background-color: var(--ap-green) !important; }
.bg-red-50, .bg-red-100 { background-color: rgba(255, 59, 48, .08) !important; }

.border-slate-200, .border-slate-300 { border-color: var(--ap-line) !important; }
.border-slate-100 { border-color: var(--ap-line-2) !important; }
.border-orange-400, .border-orange-500, .border-orange-300, .border-orange-200 { border-color: var(--ap-accent) !important; }
.border-blue-400, .border-blue-200, .border-blue-100, .border-indigo-100,
.border-indigo-500, .border-indigo-400\/30, .border-indigo-500\/30, .border-indigo-700 { border-color: rgba(0, 113, 227, .35) !important; }
.border-green-500, .border-green-200, .border-emerald-200, .border-emerald-500\/50 { border-color: rgba(52, 199, 89, .45) !important; }
.border-red-400, .border-red-200 { border-color: rgba(255, 59, 48, .4) !important; }
.border-white\/10 { border-color: rgba(255, 255, 255, .12) !important; }
.border-white\/20, .border-white\/50 { border-color: rgba(255, 255, 255, .22) !important; }

/* --------------------------------------------------------------------------
   4. Shape and elevation — Apple's corners are larger, its shadows softer.
   -------------------------------------------------------------------------- */

.rounded-lg { border-radius: 10px !important; }
.rounded-xl { border-radius: 14px !important; }
.rounded-2xl { border-radius: var(--ap-r-lg) !important; }
.rounded-3xl { border-radius: var(--ap-r-xl) !important; }

.shadow-sm { box-shadow: var(--ap-e1) !important; }
.shadow, .shadow-md { box-shadow: var(--ap-e2) !important; }
.shadow-lg, .shadow-xl { box-shadow: var(--ap-e3) !important; }
.shadow-2xl { box-shadow: var(--ap-e4) !important; }
.shadow-inner { box-shadow: none !important; }

/* --------------------------------------------------------------------------
   5. Header — apple.com's translucent nav, applied over whatever
      background class showTab() happens to have set.
   -------------------------------------------------------------------------- */

#main-header {
    background: rgba(29, 29, 31, .72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ap-line-dark) !important;
    box-shadow: none !important;
    transition: background .5s var(--ap-ease), backdrop-filter .5s var(--ap-ease);
}

/* Over the globe the chrome steps back and lets the scene through. */
#main-header.bg-transparent {
    background: rgba(29, 29, 31, .28) !important;
    border-bottom-color: rgba(255, 255, 255, .07) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
}

#main-header>div {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
}

#main-header h1 {
    background-image: none !important;
    -webkit-text-fill-color: #f5f5f7;
    color: #f5f5f7 !important;
    font-weight: 600 !important;
    font-size: calc(24px * var(--ap-text-chrome)) !important;
    letter-spacing: -.022em !important;
    filter: none !important;
}

#main-header p {
    color: rgba(255, 255, 255, .48) !important;
    font-weight: 500 !important;
    font-size: calc(11px * var(--ap-text-chrome)) !important;
    letter-spacing: .07em !important;
    white-space: nowrap;
    margin-top: .15rem !important;
}

/* Tab strip. showTab() rewrites these className strings wholesale on every
   switch, so the id-anchored selectors below have to outrank them. */
#main-header .bg-white\/5 {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: var(--ap-r-pill) !important;
    padding: .25rem !important;
    gap: .125rem !important;
    box-shadow: none !important;
}

#main-header [id^="b-"] {
    border-radius: var(--ap-r-pill) !important;
    padding: .4rem .82rem !important;
    font-size: calc(13px * var(--ap-text-chrome)) !important;
    font-weight: 500 !important;
    letter-spacing: -.008em !important;
    color: rgba(255, 255, 255, .68) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color .25s var(--ap-ease), background .25s var(--ap-ease);
}

#main-header [id^="b-"]:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .09) !important;
}

/* Selected tab — JS marks it with .bg-white */
#main-header [id^="b-"].bg-white {
    background: #fff !important;
    color: var(--ap-ink) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18) !important;
}

#main-header #b-split {
    color: #30d158 !important;
    background: rgba(52, 199, 89, .14) !important;
    border: 1px solid rgba(52, 199, 89, .32) !important;
    margin-left: .375rem !important;
}

#main-header #b-split:hover {
    background: var(--ap-green) !important;
    color: #fff !important;
    border-color: var(--ap-green) !important;
}

/* --------------------------------------------------------------------------
   6. Intro hero
   -------------------------------------------------------------------------- */

#intro-overlay-center h2 {
    font-weight: 700 !important;
    letter-spacing: -.035em !important;
}

#intro-overlay-center h2 span {
    background-image: linear-gradient(180deg, #ffffff 0%, #ffd9a0 55%, #f0a84a 100%) !important;
}

#intro-overlay-center>div>span:first-child {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 500 !important;
    letter-spacing: .24em !important;
    animation: none !important;
}

#intro-overlay-center p {
    color: rgba(255, 255, 255, .62) !important;
    font-weight: 400 !important;
    letter-spacing: -.012em !important;
}

#intro-overlay-center button {
    border-radius: var(--ap-r-pill) !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    box-shadow: none !important;
    transition: background .3s var(--ap-ease), transform .3s var(--ap-ease-out), border-color .3s var(--ap-ease);
}

#intro-overlay-center button:hover {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .45) !important;
    transform: scale(1.03) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.config-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-lg);
    box-shadow: var(--ap-e2);
    transition: transform .4s var(--ap-ease-out), box-shadow .4s var(--ap-ease-out);
}

.config-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--ap-e3);
}

.config-card.inactive {
    background: var(--ap-surface-2);
    border-style: solid;
    border-color: var(--ap-line-2);
    box-shadow: none;
}

.result-card {
    background: linear-gradient(180deg, #2a2a2e 0%, #1d1d1f 45%, #131315 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--ap-r-xl);
    box-shadow: var(--ap-e4);
}

.result-card h2,
.result-card .text-3xl,
.result-card .text-4xl {
    letter-spacing: -.03em;
}

/* --------------------------------------------------------------------------
   8. Controls
   -------------------------------------------------------------------------- */

/* macOS/iOS slider: neutral track, white knob floating on a soft shadow. */
.gb-slider {
    height: 4px;
    background: #e3e3e8;
    border-radius: var(--ap-r-pill);
}

.gb-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: none;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
    transition: transform .18s var(--ap-ease-out);
}

.gb-slider::-webkit-slider-thumb:hover { transform: scale(1.06); }
.gb-slider::-webkit-slider-thumb:active { transform: scale(.96); }

input[type=range] { accent-color: var(--ap-blue); }

input[type=checkbox] { accent-color: var(--ap-blue) !important; }

.typing-input {
    font-weight: 600;
    color: var(--ap-ink);
    border-bottom: 1px solid var(--ap-line-strong);
    letter-spacing: -.016em;
    transition: border-color .2s var(--ap-ease);
}

.typing-input:focus { border-color: var(--ap-blue); }

.header-input-wrapper {
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r);
    box-shadow: none;
    transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}

.header-input-wrapper:focus-within {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .18);
    transform: none;
}

.header-input-label {
    color: var(--ap-ink-4);
    font-weight: 500;
    letter-spacing: .07em;
}

.header-input {
    font-weight: 600;
    color: var(--ap-ink);
    letter-spacing: -.018em;
}

.plan-rent-input {
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-sm);
    font-weight: 600;
    color: var(--ap-ink);
}

/* Native select, restyled to match the inputs. */
select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.2rem !important;
    border-radius: var(--ap-r) !important;
    border-color: var(--ap-line) !important;
    color: var(--ap-ink);
    font-weight: 500;
    transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}

select:focus {
    outline: none;
    border-color: var(--ap-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .18);
}

input[type=text]:focus,
input[type=number]:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */

.btn-toggle {
    border-radius: var(--ap-r-pill);
    border: 1px solid transparent;
    background: var(--ap-surface-3);
    color: var(--ap-ink-2);
    font-weight: 500;
    transition: background .2s var(--ap-ease), color .2s var(--ap-ease);
}

.btn-toggle:hover { background: #e3e3e8; }

.btn-toggle.active {
    background: var(--ap-ink);
    border-color: var(--ap-ink);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.btn-scenario {
    border-radius: var(--ap-r-pill) !important;
    font-weight: 500;
    box-shadow: none;
    border: 1px solid var(--ap-line);
    background: #fff;
    transition: background .2s var(--ap-ease), transform .25s var(--ap-ease-out), border-color .2s var(--ap-ease);
}

.btn-scenario:hover {
    transform: none;
    background: var(--ap-surface-2);
    border-color: var(--ap-line-strong);
    box-shadow: none;
}

.btn-random {
    background: linear-gradient(135deg, #5e5ce6, #bf5af2);
    border: none;
    color: #fff;
}

.loan-option,
.bank-btn,
.jeonse-bank-btn {
    border: 1px solid var(--ap-line) !important;
    border-radius: var(--ap-r) !important;
    background: #fff;
    transition: background .2s var(--ap-ease), border-color .2s var(--ap-ease);
}

.loan-option:hover,
.bank-btn:hover,
.jeonse-bank-btn:hover { background: var(--ap-surface-2); }

.loan-option.active,
.bank-btn.active {
    border-color: var(--ap-accent) !important;
    background: var(--ap-accent-soft);
}

.jeonse-bank-btn.active {
    border-color: var(--ap-blue) !important;
    background: var(--ap-blue-soft);
    color: var(--ap-blue-ink);
}

/* Report sub-tabs — Apple's segmented control: a recessed track with the
   selected item riding on a white pill. switchReportSubTab() rewrites these
   classNames, so match on the id. */
#btn-sub-r1, #btn-sub-r2, #btn-sub-tax {
    border-radius: var(--ap-r-pill) !important;
    font-weight: 500 !important;
    font-size: calc(15.5px * var(--ap-text)) !important;
    color: var(--ap-ink-3) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: .375rem 1.125rem !important;
    transition: color .2s var(--ap-ease), background .2s var(--ap-ease);
}

#btn-sub-r1:hover, #btn-sub-r2:hover, #btn-sub-tax:hover { color: var(--ap-ink) !important; }

#btn-sub-r1.bg-white, #btn-sub-r2.bg-white, #btn-sub-tax.bg-white {
    background: #fff !important;
    color: var(--ap-ink) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04) !important;
}

#report .bg-slate-100.inline-flex {
    background: var(--ap-surface-3) !important;
    border-radius: var(--ap-r-pill) !important;
    padding: .25rem !important;
    border: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   10. Cost-item editor rows (class contract from renderCostEditors)
   -------------------------------------------------------------------------- */

.cost-row {
    border-radius: var(--ap-r-sm);
    transition: background .18s var(--ap-ease);
}

.cost-row:hover { background: var(--ap-surface-2); }

.cost-name,
.cost-amount,
.cost-share {
    border-radius: var(--ap-r-sm) !important;
    border: 1px solid transparent !important;
    background: transparent;
    color: var(--ap-ink);
    font-weight: 500;
    transition: border-color .18s var(--ap-ease), background .18s var(--ap-ease);
}

.cost-name:hover,
.cost-amount:hover,
.cost-share:hover { background: var(--ap-surface-3); }

.cost-name:focus,
.cost-amount:focus,
.cost-share:focus {
    outline: none;
    background: #fff;
    border-color: var(--ap-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, .16);
}

.cost-unit,
.cost-share-unit,
.cost-vat-label { color: var(--ap-ink-4) !important; }

.cost-del {
    color: var(--ap-ink-4) !important;
    border-radius: var(--ap-r-pill);
    opacity: 0;
    transition: opacity .18s var(--ap-ease), color .18s var(--ap-ease), background .18s var(--ap-ease);
}

.cost-row:hover .cost-del { opacity: 1; }

.cost-del:hover {
    color: #fff !important;
    background: var(--ap-red);
}

/* Keep the control reachable without a pointer. */
.cost-del:focus-visible { opacity: 1; }

/* --------------------------------------------------------------------------
   11. Tables — hairline rules, no heavy chrome, digits locked to a grid.
   -------------------------------------------------------------------------- */

#ledger-table,
#year1-table {
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0;
}

#ledger-table td,
#ledger-table th,
#year1-table td,
#year1-table th {
    border-bottom: 1px solid var(--ap-line-2);
}

#year1-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    color: var(--ap-ink-3);
    font-weight: 500;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--ap-line);
}

#ledger-table tr:last-child td,
#year1-table tbody tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------------------
   12. Report
   -------------------------------------------------------------------------- */

.report-section h3 {
    border-left: none;
    padding-left: 0;
    font-weight: 600;
    font-size: calc(25px * var(--ap-text-lg));
    letter-spacing: -.021em;
    color: var(--ap-ink);
    margin-bottom: 1.25rem;
}

.report-section p,
.report-section li {
    color: var(--ap-ink-2);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   13. Occupancy calendar + charts
   -------------------------------------------------------------------------- */

.cal-day {
    border-radius: 3px;
    background: rgba(255, 255, 255, .07);
}

.cal-day.booked {
    background-color: var(--ap-accent);
    box-shadow: none;
}

.mini-cal-box {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--ap-r);
}

.mini-cal-title {
    font-weight: 500;
    letter-spacing: .05em;
    color: var(--ap-ink-4);
}

.math-box {
    background: rgba(255, 255, 255, .045);
    border-radius: var(--ap-r);
    color: #a1a1a6;
}

/* --------------------------------------------------------------------------
   14. Focus, scrollbars, motion
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .35);
    border-radius: var(--ap-r-sm);
}

.result-card::-webkit-scrollbar,
[class*="overflow-"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.result-card::-webkit-scrollbar-track,
[class*="overflow-"]::-webkit-scrollbar-track { background: transparent; }

.result-card::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: var(--ap-r-pill);
}

[class*="overflow-"]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: var(--ap-r-pill);
}

.tab-content.active {
    animation: apFadeIn .5s var(--ap-ease-out);
}

@keyframes apFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   15. Late additions
   -------------------------------------------------------------------------- */

/* "+ 항목 추가" / "+ 채널 추가" — a quiet ghost pill, not a boxed alert. */
button[onclick^="costAdd"] {
    border: 1px solid var(--ap-line) !important;
    border-radius: var(--ap-r-pill) !important;
    color: var(--ap-ink-2) !important;
    background: #fff;
    font-weight: 500 !important;
    padding: .25rem .75rem !important;
    transition: background .18s var(--ap-ease), border-color .18s var(--ap-ease), color .18s var(--ap-ease);
}

button[onclick^="costAdd"]:hover {
    background: var(--ap-ink);
    border-color: var(--ap-ink) !important;
    color: #fff !important;
}

/* The income-statement "Net Income" highlight row. */
.bg-yellow-50, .bg-yellow-100, .bg-amber-100 { background-color: rgba(255, 149, 0, .10) !important; }
.text-yellow-800, .text-yellow-700, .text-amber-800, .text-amber-700 { color: var(--ap-accent-ink) !important; }

/* Statement section markers — the page uses a short colour bar before each
   heading. Keep the cue, round it off. */
.report-section .w-1,
.w-1.h-6, .w-1\.5 { border-radius: var(--ap-r-pill) !important; }

/* Save-scenario button */
button[onclick^="saveCurrentScenario"] {
    border-radius: var(--ap-r-pill) !important;
    font-weight: 500 !important;
}

/* Brand gold, restated one stop deeper than Tailwind's orange-500→amber-500
   so the wordmark sits with the palette instead of shouting over it. */
#gbsim h1 span {
    background-image: linear-gradient(90deg, #c8801a 0%, #e3a63f 100%) !important;
}

/* ==========================================================================
   16. Type scale — one dial for the whole page
   --------------------------------------------------------------------------
   --ap-text is the reader's size preference (0.85–1.50). The display-settings
   panel writes it, and a bootstrap script in <head> restores it before first
   paint so the page never flashes at the wrong size.

   The base values below are deliberately NOT the page's original sizes. The
   markup reaches down to 8px (125 elements sit at 10px alone), so the bottom
   of the scale is lifted first — 8/9/10/11px all land between 11 and 13px —
   compressing the range before it gets multiplied. Chrome scales at a damped
   rate so the nav never outgrows its bar.
   ========================================================================== */

:root {
    /* 기본값을 1.10 으로 둔다 — 이 페이지는 8~11px 글씨가 너무 많아
       바닥값만 올려서는 부족했다. 더 작게 보고 싶으면 설정 패널에서 내린다. */
    --ap-text: 1.1;
    /* One dial, three rates. Small type takes the adjustment in full because
       that is where the page is unreadable; display type is damped so raising
       the setting CLOSES the gap between the two instead of scaling a 31px
       figure into a line break. Chrome moves least, so the nav holds its bar. */
    --ap-text-chrome:  calc(1 + (var(--ap-text) - 1) * .55);
    --ap-text-lg:      calc(1 + (var(--ap-text) - 1) * .5);
    --ap-text-display: calc(1 + (var(--ap-text) - 1) * .3);
}

.text-\[8px\]  { font-size: calc(13px * var(--ap-text)) !important; }
.text-\[9px\]  { font-size: calc(13px * var(--ap-text)) !important; }
.text-\[10px\] { font-size: calc(14px * var(--ap-text)) !important; }
.text-\[11px\] { font-size: calc(14px * var(--ap-text)) !important; }
.text-\[13px\] { font-size: calc(15px * var(--ap-text)) !important; }

.text-xs,  .\!text-xs  { font-size: calc(14px * var(--ap-text)) !important; }
.text-sm,  .\!text-sm  { font-size: calc(16px * var(--ap-text)) !important; }
.text-base                { font-size: calc(17px * var(--ap-text)) !important; }
.text-lg,  .\!text-lg  { font-size: calc(20px * var(--ap-text-lg)) !important; }
.text-xl                  { font-size: calc(22px * var(--ap-text-lg)) !important; }
.text-2xl                 { font-size: calc(27px * var(--ap-text-display)) !important; }
.text-3xl                 { font-size: calc(33px * var(--ap-text-display)) !important; }
.text-4xl                 { font-size: calc(39px * var(--ap-text-display)) !important; }
.text-6xl                 { font-size: calc(62px * var(--ap-text-display)) !important; }
.text-8xl                 { font-size: calc(98px * var(--ap-text-display)) !important; }

/* The four responsive step-ups the markup actually uses. Without these the
   rules above would win inside the media query and freeze the page at its
   mobile size. */
@media (min-width: 768px) {
    .md\:text-2xl { font-size: calc(27px * var(--ap-text-display)) !important; }
    .md\:text-3xl { font-size: calc(33px * var(--ap-text-display)) !important; }
    .md\:text-4xl { font-size: calc(39px * var(--ap-text-display)) !important; }
    .md\:text-8xl { font-size: calc(98px * var(--ap-text-display)) !important; }
}

/* Sizes set in the page's own stylesheet, restated on the same dial. */
.typing-input       { font-size: calc(17px   * var(--ap-text)); }
.plan-rent-input    { font-size: calc(13px   * var(--ap-text)); }
.btn-toggle         { font-size: calc(14px   * var(--ap-text)); }
.header-input       { font-size: calc(19px   * var(--ap-text-lg)); }
.header-input-label { font-size: calc(12px   * var(--ap-text-chrome)); }
.math-box           { font-size: calc(15px   * var(--ap-text)); }
.mini-cal-title     { font-size: calc(13px   * var(--ap-text)); }
.bank-btn,
.jeonse-bank-btn    { font-size: calc(14.5px * var(--ap-text)); }

/* ==========================================================================
   17. Display settings — floating button + panel
   --------------------------------------------------------------------------
   Fixed chrome, so nothing here rides --ap-text: the controls must stay put
   while the value they set changes everything behind them. Only the preview
   scales, which is the point of it.
   ========================================================================== */

#ap-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--ap-r-pill);
    border: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: var(--ap-ink-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10), 0 12px 32px -12px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: transform .35s var(--ap-ease-out), box-shadow .35s var(--ap-ease-out), color .2s var(--ap-ease);
}

#ap-fab:hover {
    color: var(--ap-ink);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12), 0 18px 40px -14px rgba(0, 0, 0, .34);
}

#ap-fab:active { transform: scale(.96); }

#ap-fab svg { transition: transform .5s var(--ap-ease-out); }
#ap-fab[aria-expanded="true"] svg { transform: rotate(60deg); }

#ap-panel {
    position: fixed;
    right: 24px;
    bottom: 82px;
    z-index: 60;
    width: 320px;
    max-width: calc(100vw - 48px);
    padding: 18px;
    border-radius: var(--ap-r-lg);
    border: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 32px 72px -28px rgba(0, 0, 0, .45);
    color: var(--ap-ink);
    font-family: var(--ap-font);
    transform-origin: 100% 100%;
    animation: apPanelIn .32s var(--ap-ease-out);
}

@keyframes apPanelIn {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ap-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ap-panel-head h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.014em;
    margin: 0;
}

#ap-close {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--ap-r-pill);
    background: var(--ap-surface-3);
    color: var(--ap-ink-3);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s var(--ap-ease), color .18s var(--ap-ease);
}

#ap-close:hover { background: #e0e0e5; color: var(--ap-ink); }

.ap-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ap-field-head label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ap-ink-2);
}

#ap-scale-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-ink);
    font-variant-numeric: tabular-nums;
}

/* Same knob as the simulator's sliders, so the panel reads as part of the app. */
#ap-scale {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: var(--ap-r-pill);
    background: #e3e3e8;
    cursor: pointer;
}

#ap-scale::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
    transition: transform .18s var(--ap-ease-out);
}

#ap-scale::-webkit-slider-thumb:active { transform: scale(.94); }

.ap-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 14px;
    padding: 2px;
    border-radius: var(--ap-r-pill);
    background: var(--ap-surface-3);
}

.ap-presets button {
    padding: 6px 0;
    border: none;
    border-radius: var(--ap-r-pill);
    background: transparent;
    color: var(--ap-ink-3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s var(--ap-ease), color .18s var(--ap-ease);
}

.ap-presets button:hover { color: var(--ap-ink); }

.ap-presets button.active {
    background: #fff;
    color: var(--ap-ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .04);
}

.ap-preview {
    margin-top: 18px;
    padding: 14px;
    border-radius: var(--ap-r);
    background: var(--ap-surface-2);
    border: 1px solid var(--ap-line-2);
    overflow: hidden;
}

.ap-preview-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ap-ink-4);
    margin-bottom: 8px;
}

/* The two ends of the range the reader is actually adjusting. */
.ap-preview-sm {
    margin: 0 0 6px;
    font-size: calc(14px * var(--ap-text));
    color: var(--ap-ink-3);
    white-space: nowrap;
}

.ap-preview-lg {
    margin: 0;
    font-size: calc(27px * var(--ap-text-display));
    font-weight: 600;
    letter-spacing: -.021em;
    color: var(--ap-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#ap-reset {
    width: 100%;
    margin-top: 16px;
    padding: 9px 0;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-pill);
    background: #fff;
    color: var(--ap-ink-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s var(--ap-ease), color .18s var(--ap-ease), border-color .18s var(--ap-ease);
}

#ap-reset:hover {
    background: var(--ap-ink);
    border-color: var(--ap-ink);
    color: #fff;
}

@media (max-width: 640px) {
    #ap-fab { right: 16px; bottom: 16px; }
    #ap-panel { right: 16px; bottom: 74px; }
}

/* The dark summary card puts a label and a large figure on one flex row. As
   the reader scales up, the figure is the thing that must not break — a
   number split from its 원 reads as two numbers. */
.result-card .text-2xl,
.result-card .text-3xl,
.result-card .text-4xl {
    white-space: nowrap;
}

/* Ledger rows are label + amount. Let the label wrap if it must; the amount
   stays whole and pinned right, or it reads as part of the label. */
#ledger-table td:last-child {
    white-space: nowrap;
    text-align: right;
    vertical-align: top;
}

/* Amount fields hold up to a 10-digit grouped figure (10,000,000). At the
   larger type sizes the page's own w-20 clips it — "2,500,000" rendered as
   "2,500,00" — so the field is sized from the type scale instead. */
.cost-amount {
    width: calc(104px * var(--ap-text)) !important;
    flex: 0 0 auto;
}

.cost-name {
    min-width: 0;
}

/* Per-floor number fields. These are right-aligned, so clipping eats the
   LEADING digits — 445,000 reads as 45,000. Size them from the type scale
   and leave room for a fractional occupancy (33.49) as well as a round one. */
/* Tailwind's !w-16 is itself !important, so an equally-specific rule would be
   settled by source order — and Tailwind injects its <style> after this file.
   The element+class+attribute selector outranks it outright instead. */
input.typing-input[id$="-occ-num"] { width: calc(66px * var(--ap-text)) !important; }
input.typing-input[id$="-adr-num"] { width: calc(92px * var(--ap-text)) !important; }
input#custom-rate-input           { width: calc(72px * var(--ap-text)) !important; }

/* ==========================================================================
   18. 자금 조달 — 금액을 넣으면 비중이 나온다
   --------------------------------------------------------------------------
   The old control asked for a percentage and printed the amounts. This asks
   for the two amounts people actually know — their own money and the loan —
   and prints the percentage, with a ring so the split is legible at a glance.
   ========================================================================== */

.fund-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}

.fund-fields { min-width: 0; }

.fund-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ap-line-2);
}

.fund-row:first-child { padding-top: 0; }

.fund-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.fund-dot.is-equity { background: var(--ap-blue); }
.fund-dot.is-loan { background: var(--ap-accent); }

.fund-name {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: calc(14px * var(--ap-text));
    font-weight: 600;
    color: var(--ap-ink);
    cursor: pointer;
}

.fund-sub {
    font-size: calc(11.5px * var(--ap-text));
    font-weight: 400;
    color: var(--ap-ink-4);
}

.fund-pct {
    min-width: 3.4em;
    text-align: right;
    font-size: calc(13px * var(--ap-text));
    font-weight: 600;
    color: var(--ap-ink-3);
    font-variant-numeric: tabular-nums;
}

.fund-input-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.fund-amt {
    width: calc(120px * var(--ap-text));
    padding: 2px 0;
    text-align: right;
    font-family: inherit;
    font-size: calc(16px * var(--ap-text));
    font-weight: 600;
    color: var(--ap-ink);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--ap-line-strong);
    outline: none;
    font-variant-numeric: tabular-nums;
    transition: border-color .2s var(--ap-ease);
}

.fund-amt:focus { border-bottom-color: var(--ap-blue); }

.fund-unit {
    font-size: calc(11px * var(--ap-text));
    color: var(--ap-ink-4);
}

.fund-note {
    margin-top: 11px;
    font-size: calc(12px * var(--ap-text));
    line-height: 1.55;
    color: var(--ap-ink-4);
}

.fund-note b {
    font-weight: 600;
    color: var(--ap-ink-2);
}

.fund-chart {
    position: relative;
    width: 136px;
    height: 136px;
}

/* Arcs are drawn from 12 o'clock, so the whole ring is rotated a quarter turn. */
.fund-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fund-track {
    fill: none;
    stroke: var(--ap-surface-3);
    stroke-width: 14;
}

.fund-arc {
    fill: none;
    stroke-width: 14;
    stroke-linecap: butt;
    transition: stroke-dasharray .45s var(--ap-ease-out), stroke-dashoffset .45s var(--ap-ease-out);
}

.fund-arc.is-equity { stroke: var(--ap-blue); }
.fund-arc.is-loan { stroke: var(--ap-accent); }

.fund-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.fund-center-cap {
    margin-bottom: 2px;
    font-size: calc(10px * var(--ap-text));
    color: var(--ap-ink-4);
}

.fund-center strong {
    font-size: calc(19px * var(--ap-text-lg));
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ap-ink);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .fund-block {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }
    .fund-fields { width: 100%; }
}

/* 총 투자금 — 입력이 아니라 결과다. 읽히되 눌리지 않게. */
.fund-total-field {
    width: calc(150px * var(--ap-text));
    text-align: right;
    font-family: inherit;
    font-size: calc(20px * var(--ap-text-lg));
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ap-ink);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    cursor: default;
    font-variant-numeric: tabular-nums;
}

/* 직접 입력 금리 — 다른 은행 버튼과 같은 높이·정렬을 유지한다. */
.rate-custom {
    width: 3.2em;
    text-align: right;
    font: inherit;
    color: var(--ap-ink);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--ap-accent);
    outline: none;
    padding: 0 1px;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   19. 소유주 입력 — 접이식 그룹
   --------------------------------------------------------------------------
   한 카드 안에 소제목 열 개가 동시에 펼쳐져 있으면 어디부터 손대야 할지
   알 수 없다. '운영비 / 세금 / 건물·운영조건' 세 덩어리로 접고, 접힌
   상태에서도 그 그룹의 핵심 숫자는 요약줄에 남긴다.
   ========================================================================== */

.acc {
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r);
    background: var(--ap-surface);
    margin-bottom: 8px;
    overflow: hidden;
}

.acc[open] {
    border-color: var(--ap-line-strong);
    box-shadow: var(--ap-e1);
}

.acc > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background .18s var(--ap-ease);
}

.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::marker { content: ""; }
.acc > summary:hover { background: var(--ap-surface-2); }

.acc-caret {
    flex: none;
    width: 10px;
    color: var(--ap-ink-4);
    font-size: calc(16px * var(--ap-text));
    line-height: 1;
    transition: transform .22s var(--ap-ease-out);
}

.acc[open] > summary .acc-caret { transform: rotate(90deg); }

.acc-title {
    flex: none;
    font-size: calc(15px * var(--ap-text));
    font-weight: 600;
    color: var(--ap-ink);
    letter-spacing: -.014em;
}

/* 접혀 있어도 그 그룹이 지금 얼마인지는 보여야 한다. */
.acc-sum {
    margin-left: auto;
    min-width: 0;
    text-align: right;
    font-size: calc(13px * var(--ap-text));
    font-weight: 500;
    color: var(--ap-ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acc[open] > summary .acc-sum { opacity: .5; }

.acc-body {
    padding: 2px 14px 16px;
    border-top: 1px solid var(--ap-line-2);
    background: var(--ap-surface-2);
}

/* 그룹 안의 소제목 — 그룹 제목과 경쟁하지 않게 한 급 낮춘다. */
.acc-h {
    font-size: calc(13px * var(--ap-text));
    font-weight: 600;
    color: var(--ap-ink-3);
    letter-spacing: -.008em;
    margin: 20px 0 8px;
}

.acc-body > .acc-h:first-child { margin-top: 14px; }
.acc-h span { font-weight: 400; color: var(--ap-ink-4); }

.acc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.acc-add {
    font-size: calc(13px * var(--ap-text));
    font-weight: 500;
    color: var(--ap-blue);
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-pill);
    padding: 4px 12px;
    transition: background .18s var(--ap-ease), border-color .18s var(--ap-ease);
}

.acc-add:hover {
    background: var(--ap-blue-soft);
    border-color: rgba(0, 113, 227, .3);
}

.acc-tot {
    font-size: calc(13px * var(--ap-text));
    font-weight: 500;
    color: var(--ap-ink-3);
}

.acc-tot b {
    font-weight: 600;
    color: var(--ap-ink);
}

/* 좁은 화면에서는 요약줄이 제목을 밀어낸다 — 제목이 먼저다. */
@media (max-width: 430px) {
    .acc-sum { display: none; }
}

/* ==========================================================================
   20. 층 카드 · 용어 툴팁
   ========================================================================== */

.floor-name { min-width: 3.5rem; width: 5rem; }

/* 지표 이름 옆의 작은 물음표 — 누르면 설명 말풍선이 뜬다 */
.tip-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: .5;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: 1px;
    margin-left: 2px;
    background: transparent;
    color: inherit;
    padding: 0;
}

.tip-i:hover { opacity: 1; }

#gb-tip {
    position: fixed;
    z-index: 120;
    display: none;
    background: #1d1d1f;
    color: #f5f5f7;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: calc(12.5px * var(--ap-text));
    line-height: 1.6;
    white-space: pre-line;
    box-shadow: var(--ap-e4);
    letter-spacing: -.008em;
}