/* Shared visual refinements for the home, forms and password dialog. */
:root {
  color-scheme: light;
  --bg:#f4f7fc; --panel:#ffffff; --panel2:#eaf0f9; --line:#d7e0ee;
  --fg:#1f2b44; --muted:#5f6b82; --accent:#2458a6; --accent2:#386bb0;
  --button-ink:#ffffff;
  --control-line: #788ba6;
}
body { background:var(--bg); }
.sidebar { background:var(--panel); }
.brand { padding-top:30px; padding-bottom:26px; }
.brand .logo { letter-spacing:.15em; }
.sidenav { padding-top:16px; }
.nav-item { border-radius:10px; margin-bottom:5px; }
.nav-item:hover { background:#f0f4fb; }
.nav-item.active { background:#eaf0f9; border-color:#c6d6ed; color:var(--accent); }
.topbar { background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); }
.top-right { gap:18px; }
.lang-switch button { min-height:36px; padding-inline:15px; }
.hero.hero-layout {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(240px,.8fr);
  gap:42px; align-items:center; padding:60px 0 36px; text-align:left;
}
.hero-copy { min-width:0; }
.hero-eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.13em; margin:0 0 22px; }
.hero h1 { font-size:clamp(30px,3.4vw,48px); line-height:1.32; letter-spacing:-.055em; word-break:keep-all; margin:0; }
.hero .grad { background:linear-gradient(105deg,#2458a6,#386bb0); background-clip:text; }
.hero .tagline { font-size:16px; line-height:1.9; max-width:34rem; margin:22px 0 0; color:var(--muted); word-break:keep-all; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; align-items:center; }
.hero-actions .btn-primary { background:linear-gradient(100deg,var(--accent),var(--accent2)); color:var(--button-ink); border-radius:10px; box-shadow:0 8px 24px #2458a626; }
.hero-actions .btn-ghost { padding:12px 18px!important; font-size:14px!important; }
.hero-trust { margin:24px 0 0; max-width:none; font-size:12.5px; text-align:left; }
.hero-trust li { margin:9px 0; line-height:1.65; }
.hero-chart {
  position:relative; isolation:isolate; overflow:hidden; min-height:365px;
  border:1px solid #d0ddef; border-radius:26px;
  background:linear-gradient(150deg,#ffffff,#edf3fc 70%); padding:48px 20px 24px;
  text-align:center; box-shadow:0 24px 70px #274c8312;
}
.chart-caption { color:#50627f; font-size:12px; letter-spacing:.015em; position:relative; z-index:1; margin:0 0 37px; }
.pillar-illustration { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; position:relative; z-index:1; }
.pillar-illustration span {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:155px; border:1px solid #b4c9e8; border-radius:44px 44px 12px 12px;
  background:linear-gradient(180deg,#f8fbff,#dfeafa); color:#234777;
  font-family:Georgia,"Noto Serif KR",serif; font-size:36px;
}
.pillar-illustration span:nth-child(3) { background:linear-gradient(180deg,#e9f1ff,#cddff8); border-color:#92afd8; transform:translateY(-9px); }
.pillar-illustration small { margin-top:18px; font:8px system-ui; letter-spacing:.12em; color:#4f6384; }
.chart-foot { font-size:11px; color:#5f6b82; margin:31px 0 0; }
.orbit { position:absolute; pointer-events:none; border:1px solid #7593c024; border-radius:50%; z-index:0; }
.orbit-one { width:330px; height:330px; top:38px; left:calc(50% - 165px); }
.orbit-two { width:450px; height:450px; top:-22px; left:calc(50% - 225px); }
#view-home > section { margin-top:42px; }
#view-home > section > h2 { letter-spacing:-.035em; font-size:21px; margin-bottom:18px; }
#view-home .grid { gap:16px; }
#view-home .card { padding:23px 22px; border-radius:15px; }
#view-home .card h3 { font-size:15px; color:var(--accent); margin:0 0 12px; }
#view-home .card p { line-height:1.85; font-size:14px; color:var(--muted); }
#view-home .flowmap { margin-top:22px; }
#view-home .fm-layer { border-radius:15px; }
.local-save { flex-basis:100%; margin:7px 0 4px; }
.local-save label { display:flex; gap:8px; align-items:center; color:var(--fg); font-size:13px; }
.local-save input { width:17px; height:17px; accent-color:var(--accent2); }
.local-save .hint { font-size:11.5px; margin:6px 0; }
:focus-visible { outline:2px solid var(--accent2)!important; outline-offset:4px; }
button, input, select, textarea { touch-action:manipulation; }
.pin-dialog { width:min(420px,calc(100vw - 32px)); padding:28px; color:var(--fg); background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 100px #1f2b4433; }
.pin-dialog::backdrop { background:#1f2b4461; backdrop-filter:blur(3px); }
.pin-dialog h2 { font-size:21px; margin:0 0 12px; }
.pin-dialog label { display:block; font-size:13px; margin:18px 0 8px; }
.pin-dialog input { width:100%; padding:12px; background:var(--panel); color:var(--fg); border:1px solid var(--control-line); border-radius:8px; font-size:21px; letter-spacing:.3em; }
.pin-dialog .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.xb-consent { border:1px solid var(--line); background:var(--panel2); padding:15px 17px; border-radius:10px; font-size:12.5px; line-height:1.75; }
.xb-consent h4 { margin:0 0 8px; }
.xb-consent label { display:flex; align-items:flex-start; gap:8px; margin-top:12px; }
.xb-consent input { flex:0 0 17px; width:17px; height:17px; margin-top:3px; }

/* Light surfaces and clear control states share the privacy page palette. */
input::placeholder, textarea::placeholder { color:#66738b; opacity:1; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
button.primary:not(:disabled):hover, .btn-primary:hover { box-shadow:0 6px 18px #2458a629; }
.btn-ghost, .btn-danger, .menu-btn { border-color:var(--control-line); }
.btn-ghost:hover:not(:disabled), .menu-btn:hover { background:var(--panel2); border-color:var(--accent); }
.btn-danger:hover:not(:disabled) { background:#fcebed; border-color:var(--danger); }
.lang-switch { border-color:var(--control-line); }
.lang-switch button.active { background:var(--panel2); color:var(--accent); }
.card, .demo, .form-card, .story-card { box-shadow:0 6px 22px #274c8308; }
.library-files, .library-downloads, .technical-details { background:var(--panel); }
.ms-lucktbl thead { background:var(--panel2); }
@media(max-width:1180px) {
  .hero.hero-layout { grid-template-columns:1fr; gap:28px; padding-top:30px; }
  .hero-chart { min-height:260px; padding-top:25px; max-width:540px; width:100%; justify-self:center; }
  .chart-caption { margin-bottom:23px; }
  .pillar-illustration span { min-height:125px; }
  .hero .tagline { max-width:100%; }
}
@media(max-width:600px) {
  .hero.hero-layout { gap:24px; padding-top:22px; }
  .hero h1 { font-size:31px; }
  .hero .tagline { font-size:14px; }
  .hero-actions { gap:9px; }
  .hero-actions a { width:100%; text-align:center; justify-content:center; }
  .hero-chart { min-height:240px; border-radius:19px; }
  .hero-trust { font-size:12px; }
  #view-home > section { margin-top:32px; }
  .pin-dialog { padding:22px; }
  .top-right { gap:9px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}

.view:focus-visible { outline:none!important; }
.technical-details { margin-top:32px; border:1px solid var(--line); border-radius:14px; padding:18px 22px; }
.technical-details>summary { color:var(--accent); cursor:pointer; font-weight:600; }
.technical-details>section { margin-top:28px; }

/* Shared board shell: keep library access controls hidden regardless of button display. */
#view-board [hidden]{display:none!important}
.library-files,.library-downloads{padding:20px;border:1px solid var(--line);border-radius:14px;margin:18px 0}
.library-file{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.library-file:last-child{border-bottom:0}
.library-file span{min-width:0}
.library-file button{flex-shrink:0;font-size:12px}
.library-downloads h3{margin-top:0}
.library-downloads a{color:var(--accent2);text-decoration:none}
.library-downloads a:hover{text-decoration:underline}
.library-files input[type=file]{max-width:100%;padding:12px;border:1px dashed var(--control-line);border-radius:8px}
.library-files input::file-selector-button{padding:8px 12px;margin-right:12px;border:0;border-radius:6px;background:var(--accent);color:var(--button-ink);cursor:pointer}
@media(max-width:600px){.library-files,.library-downloads{padding:14px}.library-file{align-items:flex-start}}

/* 모바일: 내용이 화면에 맞게 줄고, 긴 표는 해당 영역 안에서만 스크롤한다. */
.main, .content, .view, .row > *, .grid > *, .fm-grid > *, .ms-head .v { min-width:0; }
input, select, textarea { min-width:0; max-width:100%; }
.row { grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); }
.grid { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.ms-dt > input, .ms-dt > select { flex:1 1 0; min-width:0; width:0; }
.content :is(p,li,h1,h2,h3,h4,summary), footer, .ms-head, .ms-saved .chip-p { overflow-wrap:anywhere; }
.sidebar { max-width:calc(100vw - 48px); }
.sidenav { min-height:0; overscroll-behavior:contain; }
.top-right, .lang-switch, #whoami { min-width:0; }
#whoami { overflow-wrap:anywhere; }
.lang-switch button { white-space:nowrap; }
.ms-tblwrap, .ms-rail, pre { min-width:0; max-width:100%; overscroll-behavior-x:contain; }
.ms-secthead { flex-wrap:wrap; }
.ms-saved .chip-p { max-width:100%; }
.ms-saved .chip-p .del { flex-shrink:0; }
.local-save input, .xb-consent input { flex-shrink:0; }
.pin-dialog, .modal-card { max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; }
.pin-dialog .actions { flex-wrap:wrap; }

/* 고정 높이 대신 SVG의 viewBox 비율로 여섯 글자 전체를 축소한다. */
.ms-captcha { display:grid; grid-template-columns:minmax(0,280px) 44px minmax(0,1fr); }
.ms-captcha .cap-img { min-width:0; max-width:100%; width:100%; }
.ms-captcha .cap-img svg { display:block; width:100%; max-width:100%; height:auto; }
/* Keep the issued SVG geometry; adapt its background and colored strokes to the light page. */
.ms-captcha .cap-img svg > rect { fill:#f8fbff; }
.ms-captcha .cap-img svg > polyline { filter:brightness(.42); }
.ms-captcha .cap-img svg > :is(path,circle) { filter:brightness(.65); }
.ms-captcha .cap-refresh { width:44px; min-width:44px; min-height:44px; padding:8px; }
.ms-captcha .cap-in { min-width:0; }
.ms-captcha .cap-in input { width:100%; max-width:100%; }
@media(max-width:700px) {
  .ms-captcha { grid-template-columns:minmax(0,1fr) 44px; gap:10px; padding:12px; }
  .ms-captcha .cap-img { max-width:280px; }
  .ms-captcha .cap-in { grid-column:1 / -1; }
}
@media(max-width:600px) {
  .content { padding-left:14px; padding-right:14px; }
  .topbar { padding:8px 14px; gap:8px; }
  .menu-btn { flex-shrink:0; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .lang-switch button { min-height:44px; padding-inline:12px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size:16px; }
  .demo, .form-card, .card, .story-card { padding:18px 16px; }
  .technical-details, .fm-layer, .pullquote, .disclaimer, .xb-consent { padding:14px; }
  .hero-chart { padding-inline:14px; }
  .pillar-illustration { gap:6px; }
  .pillar-illustration span { min-width:0; font-size:30px; }
  .btn-primary, .btn-ghost, button.primary { min-height:44px; }
  .btn-primary, .btn-ghost { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  .actions { gap:10px; }
  .sec-head { gap:10px 12px; }
  .ver-chip { max-width:100%; overflow-wrap:anywhere; line-height:1.45; }
  .ms-secthead { gap:6px 10px; }
  .ms-panel, .ms-head { padding:12px 10px; }
  .ms-captcha .cap-in input { letter-spacing:.22em; }
  .gp-grid { grid-template-columns:repeat(auto-fit,minmax(min(112px,100%),1fr)); }
  .pin-dialog { padding:20px; }
  .modal-backdrop { padding:16px; }
  .modal-card { padding:22px 18px; }
  footer { padding-inline:14px; }
}