/* V6.15 R1: MaterialQuery public-front tokens, adapted for Portal's dark theme. */
:root { --bg:#f5f7fa; --panel:#fff; --card:#fff; --text:#293846; --muted:#52657b; --line:#e2e8f0; --blue:#1e3a5f; --blue-dark:#162d4a; --brand:#1e3a5f; --brand-dark:#162d4a; --radius:8px; --shadow:0 4px 14px rgba(30,58,95,.08); }
body[data-theme="dark"] { --bg:#0f172a; --panel:#1e293b; --card:#1e293b; --text:#f8fafc; --muted:#cbd5e1; --line:#334155; --blue:#9ac5f5; --blue-dark:#b8d8ff; --brand:#9ac5f5; --brand-dark:#b8d8ff; --shadow:0 4px 14px rgba(0,0,0,.25); color-scheme:dark; }
body { background:var(--bg); color:var(--text); }
button,input,select,textarea { font:inherit; border-radius:6px; }
input,select,textarea { background:var(--panel); color:var(--text); border-color:var(--line); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #8fb9ef; outline-offset:3px; }
.page { width:min(96%,1600px); padding-top:0; }
.page>header,.top,.title { background:#1e3a5f; color:#fff; border-radius:0 0 8px 8px; padding:20px 24px; box-shadow:0 2px 8px rgba(18,43,70,.18); }
.page>header { flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.brand { gap:12px; min-width:0; }
.company-logo { height:54px; background:#fff; border-radius:6px; padding:4px; }
.brand h1 { font-size:clamp(20px,2vw,28px); font-weight:650; }
.brand-en,.page>header .top-date,.page>header .top-time,.title p { color:#e2e8f0; }
.brand-en { font-size:12px; }
.top-clock { flex-wrap:wrap; gap:12px; min-width:0; margin-left:auto; color:#fff; }
.top-clock-info { gap:4px; grid-template-columns:1fr; }
.top-time { font-size:22px; }
.header-phone-search { width:clamp(240px,26vw,440px); min-width:0; max-width:100%; }
.header-phone-input-wrap { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:0 12px; }
.header-phone-input-wrap input { color:var(--text); font-size:14px; }
.header-phone-input-wrap input::placeholder { color:var(--muted); }
.header-phone-results { max-width:min(560px,calc(100vw - 32px)); color:var(--text); text-align:left; white-space:normal; }
.theme-toggle { background:transparent; border:1px solid #b8c9db; color:#fff; padding:10px 12px; border-radius:6px; }
.theme-toggle:hover { background:#162d4a; }
.panel,.card,.department-card,.document-list,.empty,.error { background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.announcement-panel,.section-panel,.department-document-panel,.popular-document-panel,.device-panel { padding:20px; margin-bottom:20px; }
.panel-title,.section-head { font-size:20px; font-weight:650; }
.section-head { color:var(--blue-dark); }
.notice-table-head { background:color-mix(in srgb,var(--blue) 8%,var(--panel)); color:var(--text); }
.notice-layout>* { min-width:0; }
.system-card,.department-document-card { border-radius:8px; box-shadow:none; }
.system-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; align-items:stretch; }
.system-card { width:auto; max-width:none; min-width:0; min-height:88px; padding:14px; display:grid; grid-template-columns:46px minmax(0,1fr) 20px; grid-template-rows:auto; align-items:center; gap:14px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); text-decoration:none; cursor:pointer; transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease; }
.system-card .card-icon { grid-row:auto; width:46px; height:46px; font-size:26px; border-radius:8px; }
.system-card .card-copy { min-width:0; }
.system-card .card-title { display:block; margin:0; font-size:18px; font-weight:700; line-height:1.4; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; }
.system-card .card-desc { display:block; margin-top:4px; font-size:14px; line-height:1.5; min-height:0; white-space:normal; overflow:visible; overflow-wrap:anywhere; -webkit-line-clamp:unset; }
.system-card .card-arrow { align-self:center; color:var(--blue-dark); font-size:22px; line-height:1; }
.system-card:focus-visible { outline:3px solid #8fb9ef; outline-offset:3px; border-color:#8fb9ef; box-shadow:0 6px 18px rgba(30,58,95,.16); }
@media(hover:hover) and (pointer:fine) { .system-card:hover { transform:translateY(-6px); border-color:#8fb9ef; box-shadow:0 14px 28px rgba(30,58,95,.2); } body[data-theme="dark"] .system-card:hover { box-shadow:0 14px 28px rgba(0,0,0,.45); } }
@media(hover:none) { .system-card:hover { transform:none; } }
@media(prefers-reduced-motion:reduce) { .system-card,.system-card:hover { transform:none; transition:none; } }
.card-button,.download,.btn-primary { background:#1e3a5f; color:#fff; border-radius:6px; }
body[data-theme="dark"] .card-button { background:#1e3a5f; color:#fff; border:1px solid #8fb9ef; }
.card-button:hover,.download:hover,.btn-primary:hover { background:#162d4a; }
.home-documents-layout { grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:20px; }
.home-documents-layout>* { min-width:0; }
.department-document-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.device-panel { margin-top:0; }
.device-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.device-heading .section-head { margin:0; }
.device-refresh { padding:8px 14px; background:var(--panel); color:var(--blue-dark); border:1px solid var(--line); cursor:pointer; }
.device-refresh:disabled { cursor:default; color:var(--muted); }
.device-message { color:var(--muted); line-height:1.6; margin:12px 0; }
.device-fields { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 20px; margin:0; }
.device-field { min-width:0; padding:12px 0; border-top:1px solid var(--line); }
.device-field dt { color:var(--muted); font-size:13px; margin-bottom:6px; }
.device-field dd { margin:0; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.device-status { color:var(--blue-dark); }
.device-panel[data-state="stale"] .device-status,.device-panel[data-state="unavailable"] .device-status { color:var(--orange-dark,#b54708); }
.device-note { margin:14px 0 0; font-size:13px; color:var(--muted); }
.title { margin-bottom:24px; }
.top h1,.title h1 { font-size:26px; font-weight:650; }
.department-card,.document-row { color:var(--text); }
.document-row { border-color:var(--line); }
.toolbar input { background:var(--panel); color:var(--text); }
@media(max-width:1100px) { .device-fields { grid-template-columns:repeat(3,minmax(0,1fr)); } .notice-layout { grid-template-columns:1fr; } .notice-sidebar { display:block; } .important-box { margin-top:16px; } .top-clock { width:100%; margin:0; } .header-phone-search { flex:1; width:auto; } }
@media(max-width:700px) { .page { width:calc(100% - 24px); } .page>header { display:flex; padding:16px; } .top-clock { display:flex; gap:12px; } .header-phone-search { flex-basis:100%; order:0; } .top-clock-info { margin-left:auto; } .brand h1 { font-size:20px; } .company-logo { height:44px; } .home-documents-layout { grid-template-columns:1fr; } .device-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .announcement-panel,.section-panel,.department-document-panel,.popular-document-panel,.device-panel { padding:16px; } .system-card { flex-basis:100%; max-width:100%; } .department-document-grid { grid-template-columns:1fr; } .top,.title { padding:16px; } }
@media(max-width:360px) { .device-fields { grid-template-columns:1fr; } .brand { flex-wrap:wrap; } }
@media(max-width:700px) { .notice-table-head { display:none; } .notice-row { grid-template-columns:58px minmax(0,1fr); } .notice-search input { min-width:0; } .important-head { flex-wrap:wrap; } }
/* Keep long CMS text readable without relying on clipping or hidden metadata. */
.notice-row-title,.notice-title-button { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.notice-badge { white-space:normal; overflow-wrap:anywhere; }
.important-box,.important-card,.important-body,.meeting-summary-box,.meeting-chip,.popular-document-list,.popular-document-item { min-width:0; }
.meeting-room-header { flex-wrap:wrap; }
.meeting-room-name { flex:1 1 140px; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.meeting-booking-row { flex-wrap:wrap; gap:4px; }
.meeting-booking-title { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; flex:1 1 120px; }
.popular-document-name,.department-document-name,.department-name,.document-name,.document-description { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.popular-document-list { grid-template-columns:minmax(0,1fr); }
.document-row>* { min-width:0; }
.footer { overflow-wrap:anywhere; }
.layout>* { min-width:0; }
.room-stat-head { flex-wrap:wrap; overflow-wrap:anywhere; }
.room-stat-head>* { min-width:0; }
.grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
.header-phone-results { left:0; right:auto; width:100%; }
@media(max-width:760px) {
  .notice-row { grid-template-columns:minmax(58px,80px) minmax(0,1fr); gap:8px; }
  .notice-row .notice-row-meta:nth-child(3) { display:block; grid-column:2; text-align:left; }
  .notice-attachment-cell { grid-column:2; text-align:left; }
  .footer { align-items:flex-start; flex-direction:column; gap:8px; padding:16px; }
}