/* ============================================================
   v1.3.42 — readable pastel PC polish
   Reference: first approved dashboard mockup (2026-09-12).
   Visual-only overlay: no DOM/API/DB/permission/workflow changes.
   Mobile (<960px) and dark theme remain on their existing rules.
   ============================================================ */

@media (min-width:960px){
  html:not([data-theme="dark"]){
    --v1342-page:#f4f9ff;
    --v1342-surface:#ffffff;
    --v1342-surface-soft:#f8fbff;
    --v1342-line:#d7e6f4;
    --v1342-line-soft:#e5eef7;
    --v1342-ink:#12365e;
    --v1342-text:#294e72;
    --v1342-muted:#647f99;
    --v1342-blue:#2588ef;
    --v1342-green:#29b97b;
    --v1342-warn:#e99a18;
    --v1342-red:#e65364;
    --v1342-purple:#8e5be7;
    --v1342-shadow:0 5px 18px rgba(39,83,124,.065);
    --v1342-shadow-soft:0 2px 8px rgba(39,83,124,.045);
  }

  html:not([data-theme="dark"]) body{
    font-family:"IBM Plex Sans KR","Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif!important;
    color:var(--v1342-text)!important;
    background:
      radial-gradient(circle at 90% -8%,rgba(128,208,255,.18),transparent 28%),
      linear-gradient(180deg,#f8fbff 0,#f4f9ff 330px,#f4f8fc 100%)!important;
    font-size:15px;
  }

  /* Left navigation: light, calm, highly legible. Width/behavior is unchanged. */
  html:not([data-theme="dark"]) .sidebar-nav{
    background:linear-gradient(180deg,#fbfdff 0%,#f2f8fd 100%)!important;
    border-right:1px solid #d8e7f4!important;
    box-shadow:5px 0 20px rgba(44,83,119,.045)!important;
    color:var(--v1342-ink)!important;
  }
  html:not([data-theme="dark"]) .sidebar-brand{
    color:var(--v1342-ink)!important;
    border-bottom-color:#e0ebf5!important;
  }
  html:not([data-theme="dark"]) .sidebar-brand-mark{
    background:linear-gradient(145deg,#55b7ff,#1f7eea)!important;
    color:#fff!important;
    border-radius:11px!important;
    box-shadow:0 6px 14px rgba(34,126,229,.18)!important;
  }
  html:not([data-theme="dark"]) .sidebar-brand-text{
    color:#123a65!important;
    font-size:.94rem!important;
    font-weight:900!important;
    letter-spacing:-.025em!important;
  }
  html:not([data-theme="dark"]) .sidebar-brand-copy small{color:#7790aa!important;font-size:.66rem!important}
  html:not([data-theme="dark"]) .role-nav-group-head{
    color:#68829b!important;
    font-size:.75rem!important;
    font-weight:850!important;
    letter-spacing:0!important;
  }
  html:not([data-theme="dark"]) .role-nav-item{
    min-height:42px!important;
    border-radius:10px!important;
    color:#355978!important;
    font-size:.82rem!important;
    font-weight:780!important;
  }
  html:not([data-theme="dark"]) .role-nav-icon{
    width:26px!important;height:26px!important;border-radius:8px!important;
    background:#edf6ff!important;color:#3378b6!important;font-size:.78rem!important;
  }
  html:not([data-theme="dark"]) .role-nav-item:hover{
    background:#eaf5ff!important;color:#155f9f!important;border-color:#d6e9f8!important;
  }
  html:not([data-theme="dark"]) .role-nav-item.active{
    background:linear-gradient(135deg,#22a9ac,#148fa2)!important;
    border-color:#168f9f!important;color:#fff!important;
    box-shadow:0 6px 15px rgba(25,143,160,.18)!important;
  }
  html:not([data-theme="dark"]) .role-nav-item.active .role-nav-icon{background:rgba(255,255,255,.2)!important;color:#fff!important}
  html:not([data-theme="dark"]) .sidebar-version-chip{
    background:#fff!important;color:#466985!important;border:1px solid #d8e6f2!important;border-radius:10px!important;
  }

  /* Header and month/range bar. */
  html:not([data-theme="dark"]) .topbar-v119,
  html:not([data-theme="dark"]) .topbar{
    background:rgba(252,254,255,.96)!important;
    border-bottom:1px solid #dbe8f3!important;
    box-shadow:0 2px 10px rgba(44,82,117,.04)!important;
  }
  html:not([data-theme="dark"]) .topbar-title strong,
  html:not([data-theme="dark"]) .topbar-brand-v119 strong,
  html:not([data-theme="dark"]) #topbarUserLabel{color:#173d65!important;font-weight:900!important}
  html:not([data-theme="dark"]) .topbar-title small,
  html:not([data-theme="dark"]) #topbarRoleLabel{color:#67819b!important;font-size:.78rem!important}
  html:not([data-theme="dark"]) .global-period-bar{
    background:rgba(255,255,255,.97)!important;
    border:1px solid var(--v1342-line)!important;
    border-radius:15px!important;
    box-shadow:var(--v1342-shadow-soft)!important;
    padding:12px 14px!important;
  }
  html:not([data-theme="dark"]) .global-period-copy strong{font-size:.96rem!important;color:#19466f!important;font-weight:900!important}
  html:not([data-theme="dark"]) .global-period-copy small{font-size:.76rem!important;color:#69839d!important;line-height:1.5!important}
  html:not([data-theme="dark"]) .global-period-bar label{font-size:.73rem!important;color:#4e6c88!important;font-weight:800!important}
  html:not([data-theme="dark"]) .global-period-bar select,
  html:not([data-theme="dark"]) .global-period-bar input,
  html:not([data-theme="dark"]) .global-period-bar button{
    min-height:42px!important;border-radius:10px!important;font-size:.83rem!important;font-weight:800!important;
  }

  /* Common page headings. */
  html:not([data-theme="dark"]) .page-title{
    min-height:52px!important;
    padding:7px 3px 9px!important;
    margin-bottom:9px!important;
    align-items:center!important;
  }
  html:not([data-theme="dark"]) .page-title h1,
  html:not([data-theme="dark"]) .page-title h2{
    color:#113b68!important;
    font-size:1.55rem!important;
    font-weight:900!important;
    line-height:1.25!important;
    letter-spacing:-.035em!important;
  }
  html:not([data-theme="dark"]) .page-title p{
    color:#637f99!important;
    font-size:.82rem!important;
    line-height:1.5!important;
    font-weight:600!important;
  }
  html:not([data-theme="dark"]) .page-title button,
  html:not([data-theme="dark"]) .page-title select,
  html:not([data-theme="dark"]) .page-title input{
    min-height:38px!important;border-radius:9px!important;font-size:.78rem!important;
  }

  /* General cards/panels across every menu. */
  html:not([data-theme="dark"]) .panel,
  html:not([data-theme="dark"]) .overview-panel,
  html:not([data-theme="dark"]) .trend-panel,
  html:not([data-theme="dark"]) .form-card,
  html:not([data-theme="dark"]) .station-card,
  html:not([data-theme="dark"]) .role-dashboard-panel,
  html:not([data-theme="dark"]) .operation-submit-panel,
  html:not([data-theme="dark"]) .operation-inbox-panel,
  html:not([data-theme="dark"]) .goods-overview-panel,
  html:not([data-theme="dark"]) .table-scroll,
  html:not([data-theme="dark"]) .v1321-card,
  html:not([data-theme="dark"]) .report-card,
  html:not([data-theme="dark"]) .document-gallery-card,
  html:not([data-theme="dark"]) .tank-card,
  html:not([data-theme="dark"]) .order-card,
  html:not([data-theme="dark"]) .pending-cost-card,
  html:not([data-theme="dark"]) .user-access-card{
    background:rgba(255,255,255,.98)!important;
    border:1px solid var(--v1342-line)!important;
    border-radius:15px!important;
    box-shadow:var(--v1342-shadow-soft)!important;
  }
  html:not([data-theme="dark"]) .panel h2,
  html:not([data-theme="dark"]) .panel h3,
  html:not([data-theme="dark"]) .form-card h2,
  html:not([data-theme="dark"]) .form-card h3,
  html:not([data-theme="dark"]) .station-card h2,
  html:not([data-theme="dark"]) .station-card h3{color:#17466f!important;font-weight:900!important}
  html:not([data-theme="dark"]) .form-card p,
  html:not([data-theme="dark"]) .form-help,
  html:not([data-theme="dark"]) .panel p{color:#647f99!important;font-size:.78rem!important;line-height:1.55!important}

  /* Inputs/buttons: clearer outlines, no functionality changes. */
  html:not([data-theme="dark"]) input,
  html:not([data-theme="dark"]) select,
  html:not([data-theme="dark"]) textarea{
    background:#fbfdff!important;color:#183f63!important;
    border:1px solid #cfe0ee!important;border-radius:9px!important;
  }
  html:not([data-theme="dark"]) input:focus,
  html:not([data-theme="dark"]) select:focus,
  html:not([data-theme="dark"]) textarea:focus{
    border-color:#65a9e5!important;outline:3px solid rgba(47,137,238,.12)!important;
  }
  html:not([data-theme="dark"]) .primary{
    background:linear-gradient(135deg,#359cf5,#1774df)!important;color:#fff!important;
    border-radius:9px!important;box-shadow:0 4px 10px rgba(29,113,209,.14)!important;
  }
  html:not([data-theme="dark"]) .quiet{
    background:#f4f9fd!important;color:#315f86!important;
    border:1px solid #d6e5f1!important;border-radius:9px!important;
  }
  html:not([data-theme="dark"]) .quiet:hover{background:#eaf5ff!important;color:#0f64ad!important;border-color:#bcd9ed!important}

  /* Data tables: larger than the old compact theme but still dense enough for office work. */
  html:not([data-theme="dark"]) table,
  html:not([data-theme="dark"]) .data-table{color:#294d6d!important}
  html:not([data-theme="dark"]) table thead th,
  html:not([data-theme="dark"]) .data-table thead th{
    background:#edf5fb!important;color:#2c5577!important;
    border-bottom:1px solid #d6e5f0!important;
    font-size:.76rem!important;font-weight:900!important;
  }
  html:not([data-theme="dark"]) table td,
  html:not([data-theme="dark"]) table th,
  html:not([data-theme="dark"]) .data-table td,
  html:not([data-theme="dark"]) .data-table th{
    padding:9px 10px!important;font-size:.76rem!important;line-height:1.42!important;
  }
  html:not([data-theme="dark"]) table tbody tr:nth-child(even)>td{background:#f9fcff!important}
  html:not([data-theme="dark"]) table tbody tr:hover>td{background:#eef7ff!important}

  /* Warnings / notices retain semantic colors, but gain a soft background. */
  html:not([data-theme="dark"]) .workflow-data-warning,
  html:not([data-theme="dark"]) .warn-box{
    background:#fff9ed!important;border-color:#f2cf91!important;color:#8d4d12!important;border-radius:11px!important;
  }
  html:not([data-theme="dark"]) .setup-role-note,
  html:not([data-theme="dark"]) .v119-setup-banner{
    background:#fff5f5!important;border-color:#f1c1c1!important;color:#a93737!important;border-radius:10px!important;
  }
  html:not([data-theme="dark"]) .role-alert-row{
    border:1px solid transparent!important;border-bottom-color:#e7eef5!important;
    border-radius:9px!important;padding:9px 8px!important;
  }
  html:not([data-theme="dark"]) .role-alert-row:hover{background:#f5faff!important;border-color:#e0edf8!important}
  html:not([data-theme="dark"]) .role-alert-copy strong{font-size:.82rem!important;color:#173f66!important;line-height:1.35!important}
  html:not([data-theme="dark"]) .role-alert-copy small{font-size:.72rem!important;color:#647f99!important;line-height:1.45!important}
  html:not([data-theme="dark"]) .role-alert-time{font-size:.68rem!important;color:#8197ab!important}

  /* Dashboard header: approved first mockup — clear primary station/scope context. */
  html:not([data-theme="dark"]) .v1321-dashboard{gap:11px!important}
  html:not([data-theme="dark"]) .v1321-head{
    position:relative!important;overflow:hidden!important;
    padding:13px 15px!important;margin:0!important;
    background:linear-gradient(112deg,#ffffff 0%,#f5fbff 62%,#eefcf7 100%)!important;
    border:1px solid #d8e8f4!important;border-radius:15px!important;
    box-shadow:var(--v1342-shadow-soft)!important;
    align-items:center!important;
  }
  html:not([data-theme="dark"]) .v1321-head::after{
    content:"⛽";position:absolute;right:70px;bottom:-17px;font-size:60px;opacity:.055;transform:rotate(-7deg);pointer-events:none;
  }
  html:not([data-theme="dark"]) .v1321-head small{
    color:#587998!important;font-size:.78rem!important;font-weight:750!important;line-height:1.45!important;
  }
  html:not([data-theme="dark"]) .v1321-head h2{
    color:#0d3d70!important;font-size:1.55rem!important;font-weight:900!important;line-height:1.22!important;letter-spacing:-.035em!important;
  }
  html:not([data-theme="dark"]) .v1321-head-status span{font-size:.74rem!important;color:#5c7895!important}
  html:not([data-theme="dark"]) .v1321-head-status button{
    min-width:34px!important;min-height:34px!important;border-radius:10px!important;background:#edf7ff!important;color:#1776ce!important;border:1px solid #d5e9f8!important;
  }

  html:not([data-theme="dark"]) .v1322-basis-strip{gap:7px!important;margin-top:0!important}
  html:not([data-theme="dark"]) .v1322-basis-strip span{
    padding:6px 9px!important;border:1px solid #d9e8f4!important;border-radius:999px!important;
    background:#f8fbfe!important;color:#607d98!important;font-size:.69rem!important;line-height:1.2!important;
  }
  html:not([data-theme="dark"]) .v1322-basis-strip b{color:#214f78!important;font-weight:900!important}

  /* Dashboard KPI cards: same pastel family as first approved mockup, larger supporting text. */
  html:not([data-theme="dark"]) .v1321-kpis{gap:9px!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi{
    position:relative!important;min-height:92px!important;
    padding:14px 12px 12px 56px!important;
    border:1px solid #dbe8f2!important;border-radius:15px!important;
    box-shadow:0 3px 10px rgba(36,78,115,.055)!important;
    justify-content:center!important;text-align:left!important;
  }
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi::before{
    position:absolute;left:13px;top:15px;width:34px;height:34px;display:grid;place-items:center;
    border-radius:10px!important;font-size:17px!important;font-weight:900!important;
  }
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(1){background:linear-gradient(140deg,#fff,#eef7ff)!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(1)::before{content:"▥";background:#dff0ff!important;color:#2588ef!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(2){background:linear-gradient(140deg,#fff,#ecfaf4)!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(2)::before{content:"⛽";background:#dff7ec!important;color:#21a66d!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(3){background:linear-gradient(140deg,#fff,#fff7e8)!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(3)::before{content:"!";background:#fff0d2!important;color:#e69613!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(4){background:linear-gradient(140deg,#fff,#fff0f3)!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(4)::before{content:"●";background:#ffe1e7!important;color:#e65368!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(5){background:linear-gradient(140deg,#fff,#f4efff)!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(5)::before{content:"▣";background:#ede3ff!important;color:#8657dc!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(6){background:linear-gradient(140deg,#fff,#fff8e9)!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi:nth-child(6)::before{content:"₩";background:#ffefd0!important;color:#d9900d!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi>span{font-size:.78rem!important;color:#355a78!important;font-weight:850!important;line-height:1.3!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi>strong{font-size:1.7rem!important;color:#0e3b68!important;line-height:1.08!important;font-weight:900!important;letter-spacing:-.035em!important;margin-top:3px!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi>small{font-size:.7rem!important;color:#607d97!important;line-height:1.35!important;font-weight:650!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi>small.up{color:#169762!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi>small.warn{color:#a86508!important}
  html:not([data-theme="dark"]) .v1321-kpis .v1200-kpi>small.bad{color:#d44353!important}

  /* Dashboard graph/reconciliation cards. */
  html:not([data-theme="dark"]) .v1321-card{padding:13px 14px!important}
  html:not([data-theme="dark"]) .v1321-card>header{
    min-height:40px!important;margin-bottom:9px!important;padding-bottom:8px!important;border-bottom:1px solid #e3edf5!important;
  }
  html:not([data-theme="dark"]) .v1321-card>header h3{
    color:#12466f!important;font-size:1.05rem!important;font-weight:900!important;letter-spacing:-.02em!important;
  }
  html:not([data-theme="dark"]) .v1321-card>header h3::before{
    content:"";display:inline-block;width:5px;height:17px;margin-right:8px;border-radius:5px;background:#38a0f4;vertical-align:-3px;
  }
  html:not([data-theme="dark"]) .v1321-card:nth-child(even)>header h3::before{background:#35bd84!important}
  html:not([data-theme="dark"]) .v1321-card>header small{font-size:.72rem!important;color:#647f99!important;line-height:1.4!important}
  html:not([data-theme="dark"]) .v1323-column-chart,
  html:not([data-theme="dark"]) .v1323-station-columns{
    border:1px solid #dbe8f2!important;border-radius:13px!important;background:linear-gradient(180deg,#fbfdff,#f5faff)!important;
  }
  html:not([data-theme="dark"]) .v1323-column>b,
  html:not([data-theme="dark"]) .v1323-station-column>b{font-size:.78rem!important;color:#123f6b!important;font-weight:900!important}
  html:not([data-theme="dark"]) .v1323-column>small,
  html:not([data-theme="dark"]) .v1323-station-column>span{font-size:.68rem!important;color:#617d98!important;font-weight:700!important}
  html:not([data-theme="dark"]) .v1323-chart-help{font-size:.69rem!important;color:#6d879e!important}

  /* Common compact statistics used outside the new dashboard. */
  html:not([data-theme="dark"]) .metric,
  html:not([data-theme="dark"]) .kpi,
  html:not([data-theme="dark"]) .work-stat,
  html:not([data-theme="dark"]) .cal-kpi{
    background:linear-gradient(145deg,#fff,#f7fbff)!important;
    border:1px solid #dce8f2!important;border-radius:13px!important;
    box-shadow:0 2px 7px rgba(40,79,116,.04)!important;
  }
  html:not([data-theme="dark"]) .metric strong,
  html:not([data-theme="dark"]) .kpi strong,
  html:not([data-theme="dark"]) .work-stat strong,
  html:not([data-theme="dark"]) .cal-kpi strong{color:#103d68!important;font-size:1.18rem!important;font-weight:900!important}
  html:not([data-theme="dark"]) .metric span,
  html:not([data-theme="dark"]) .kpi-label,
  html:not([data-theme="dark"]) .work-stat span,
  html:not([data-theme="dark"]) .work-stat small,
  html:not([data-theme="dark"]) .cal-kpi span{color:#607c96!important;font-size:.72rem!important;line-height:1.35!important}

  /* Tabs and contextual chips use the same gentle blue language. */
  html:not([data-theme="dark"]) .tab-bar,
  html:not([data-theme="dark"]) .tab-bar-sub,
  html:not([data-theme="dark"]) .overview-tabs{
    background:#f5f9fd!important;border:1px solid #dce8f3!important;border-radius:11px!important;
  }
  html:not([data-theme="dark"]) .badge,
  html:not([data-theme="dark"]) .status-badge,
  html:not([data-theme="dark"]) .version-chip{
    border-radius:999px!important;
  }
}