/* ============================================================
   ms.mj2y.com — editorial page components (v2)
   ============================================================ */

/* ---- hero / masthead ------------------------------------- */
.ms-hero{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:start; }
.ms-hero .eyebrow{ display:block; margin-bottom:14px; }
.ms-hero .display{ margin:0; }
.ms-hero .hero-sub{ font-family:var(--sans); font-weight:500; font-size:clamp(1.05rem,2vw,1.35rem);
  color:var(--ink-soft); margin-top:12px; letter-spacing:-.01em; }
.ms-hero .hero-sub b{ font-style:normal; font-weight:500; color:var(--ink); }

.dday-zone{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-width:180px; padding-top:6px; }
.dday-zone .rays{ top:-26px; left:50%; transform:translateX(-50%); }
.dday-seal{ position:relative; z-index:1; background:transparent; border:none; cursor:pointer; }
.dday-seal .seal{ width:118px; height:118px; background:var(--paper); box-shadow:var(--shadow-sm);
  border-color:var(--line-2); color:var(--ink); }
.dday-seal .seal::before{ border-color:var(--line-2); opacity:.5; }
.dday-seal .seal .s-dow{ font-size:.6rem; color:var(--ink-faint); }
.dday-seal .seal .s-num{ font-family:var(--serif); font-weight:400; font-size:2.4rem; letter-spacing:-.02em; color:var(--ink); }
.dday-seal .seal .s-mon{ font-size:.56rem; color:var(--ink-faint); }
.dday-cap{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:12px; text-align:center; }
.serve{ width:170px; margin-top:12px; }
.serve-track{ height:5px; background:var(--paper); border:1px solid var(--line); position:relative; overflow:hidden; }
.serve-fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--ink); transition:width .8s var(--ease); }
.serve-meta{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.58rem;
  letter-spacing:.08em; color:var(--ink-faint); margin-top:5px; }

/* ---- tabs (Korean refined) ------------------------------- */
.tabs.ms-tabs .tab{ font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.02em; text-transform:none; }
.tabs.ms-tabs .tab .tn{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--ink-faint); margin-right:7px; }

/* ============================================================
   SCOREBOARD
   ============================================================ */
.stat-band{ display:grid; grid-template-columns:1fr 1fr 1.15fr; align-items:end; gap:0;
  border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line); }
.stat{ padding:22px 20px 20px; position:relative; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat-l{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.stat-n{ font-family:var(--serif); font-weight:300; line-height:.9; margin-top:10px; letter-spacing:-.02em; }
.stat-n .v{ font-size:clamp(2.6rem,6vw,4rem); }
.stat-n .u{ font-size:1.1rem; font-family:var(--sans); color:var(--ink-soft); margin-left:6px; }
.stat.big .stat-n .v{ font-size:clamp(3.4rem,9vw,6rem); }
.stat.big::after{ content:""; position:absolute; left:18px; right:18px; bottom:14px; height:.5em; background:var(--hi);
  z-index:-1; opacity:.9; max-height:34px; transform:rotate(-.5deg); }
.stat-s{ font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--ink-faint); margin-top:8px; }
.stat.big .stat-s{ color:var(--ink-soft); }

/* ============================================================
   ENTITLEMENTS
   ============================================================ */
.block-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:4px; }
.block-head .bh-t{ font-family:var(--serif-ko); font-weight:500; font-size:1.4rem; }
.block-note{ font-family:var(--sans); color:var(--ink-soft); font-size:.9rem; margin:.3em 0 0; line-height:1.5; }

.ent-row{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px;
  padding:14px 6px; border-top:1px solid var(--line); }
.ent-row:last-child{ border-bottom:1px solid var(--line); }
.ent-row.off{ opacity:.4; }
.ent-name{ font-family:var(--serif-ko); font-weight:500; font-size:1.2rem; border-bottom-color:transparent; }
.ent-row:hover .ent-name{ border-bottom-color:var(--line-2); }
.ent-cat{ width:70px; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--line); }
.ent-amt{ display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.ent-num{ width:52px; text-align:right; font-family:var(--serif); font-weight:500; font-size:1.4rem; }
.ent-unit{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.ent-accr{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; color:var(--seal); white-space:nowrap; }

/* ============================================================
   LEAVE LIST  (editorial) — uses shared .elist/.erow
   ============================================================ */
.lfilter{ display:flex; gap:18px; align-items:center; }
.lfilter button{ background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding:4px 0; position:relative; }
.lfilter button[aria-pressed="true"]{ color:var(--ink); }
.lfilter button[aria-pressed="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--seal); }
.leave-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.erow .e-days{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--ink); }
.erow .e-days small{ font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; display:block; text-align:right; }
.empty-note{ font-family:var(--sans); color:var(--ink-faint); text-align:center; padding:30px 10px; font-size:.98rem; }

/* ============================================================
   CALENDAR  (refined)
   ============================================================ */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-title{ display:flex; align-items:baseline; gap:12px; }
.cal-title .cm{ font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,5vw,3.2rem); line-height:1; }
.cal-title .cy{ font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; color:var(--ink-soft); }
.cal-nav{ display:flex; align-items:center; gap:6px; }
.nav-arrow{ width:38px; height:38px; border:1px solid var(--line-2); background:transparent; cursor:pointer;
  font-size:1.1rem; color:var(--ink); border-radius:2px; transition:all .18s var(--ease); }
.nav-arrow:hover{ background:var(--ink); color:var(--bg); }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.cal-dow{ text-align:left; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); padding:8px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal-dow.sun{ color:var(--seal); } .cal-dow.sat{ color:var(--navy); }
.cal-cell{ position:relative; min-height:92px; padding:7px 8px; cursor:pointer; background:transparent;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .18s var(--ease); overflow:hidden; }
.cal-cell:hover{ background:var(--paper); }
.cal-cell.blank{ background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(0,0,0,.018) 7px,rgba(0,0,0,.018) 8px); cursor:default; }
.cell-num{ font-family:var(--serif); font-weight:400; font-size:1.15rem; line-height:1; color:var(--ink); position:relative; display:inline-block; }
.cal-cell.sun .cell-num{ color:var(--seal); } .cal-cell.sat .cell-num{ color:var(--navy); }
.cal-cell.today{ background:var(--paper); }
.cal-cell.today .cell-num{ color:#fff; background:var(--ink); border-radius:50%; width:1.7em; height:1.7em;
  display:inline-flex; align-items:center; justify-content:center; }
.today-tag{ font-family:var(--mono); font-size:.5rem; letter-spacing:.1em; color:var(--seal); margin-left:5px; vertical-align:top; }
/* discharge */
.cal-cell.discharge .cell-num{ color:var(--seal); }
.cal-cell.discharge::after{ content:""; position:absolute; left:3px; top:3px; width:26px; height:26px;
  border:1.6px solid var(--seal); border-radius:50%; transform:rotate(-6deg); pointer-events:none; }
.cal-cell.discharge .dis-tag{ position:absolute; right:6px; top:6px; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.06em; color:var(--seal); }
/* xout countdown */
.cal-cell.xout::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.28;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14,16 C45,40 60,58 88,86' fill='none' stroke='%231b1a17' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
/* leave band */
.cell-band{ position:relative; height:17px; margin-top:4px; background:var(--hi); }
.cell-band.planned{ background:transparent; border:1.3px solid var(--ink); }
.band-lbl{ position:absolute; left:5px; top:50%; transform:translateY(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; color:var(--ink); text-transform:uppercase; }
.cell-plan{ font-family:var(--serif); font-style:italic; font-size:.82rem; line-height:1.1; color:var(--ink-soft); margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cal-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:16px; }
.lg-item{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); }
.lg-item i{ width:18px; height:11px; display:inline-block; }
.lg-item i.b-leave{ background:var(--hi); } .lg-item i.b-plan{ border:1.3px solid var(--ink); }
.lg-item i.b-today{ background:var(--ink); border-radius:50%; width:11px; }
.lg-item i.b-dis{ border:1.5px solid var(--seal); border-radius:50%; width:12px; height:12px; }

/* ============================================================
   MEALS
   ============================================================ */
.meal-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:22px; }
.mw-cell{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px; background:var(--bg);
  border:none; cursor:pointer; transition:background .15s; }
.mw-cell:hover{ background:var(--paper); }
.mw-cell.active{ background:var(--ink); }
.mw-cell.active .mw-dow,.mw-cell.active .mw-d{ color:var(--bg); }
.mw-dow{ font-family:var(--mono); font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.mw-d{ font-family:var(--serif); font-weight:400; font-size:1.3rem; line-height:1; color:var(--ink); }
.mw-cell.today .mw-d{ color:var(--seal); }
.mw-cell.active.today .mw-d{ color:var(--hi); }
.mw-dot{ width:5px; height:5px; border-radius:50%; background:transparent; border:1px solid var(--line-2); }
.mw-dot.on{ background:var(--hi); border-color:var(--ink); }
.mw-cell.active .mw-dot.on{ background:var(--hi); border-color:var(--hi); }

.meal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.meal-nav .mn-c{ display:flex; align-items:center; gap:14px; }
.meal-nav .mn-date{ font-family:var(--serif-ko); font-weight:500; font-size:1.5rem; }
.meal-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tray{ position:relative; border:1px solid var(--line); border-top:2.5px solid var(--ink); padding:16px; background:var(--paper); }
.tray:nth-child(2){ border-top-color:var(--seal); }
.tray:nth-child(3){ border-top-color:var(--navy); }
.tray-l{ display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.tray-l .ic{ font-size:.9rem; }
.tray-text{ background:transparent; border:none; min-height:120px; font-family:var(--serif-ko); font-weight:400;
  font-size:1.1rem; line-height:1.6; color:var(--ink); padding:0; }
.tray-text:focus{ outline:none; }
.tray-text::placeholder{ color:var(--ink-faint); font-family:var(--sans); font-size:.92rem; font-weight:400; }

/* ---- footer ---------------------------------------------- */
.ms-foot{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin-top:clamp(40px,7vw,72px); padding-top:20px; border-top:1px solid var(--line); }
.ms-foot a{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.ms-foot a:hover{ color:var(--seal); }
.ms-foot .links{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---- responsive ------------------------------------------ */
@media (max-width:820px){
  .ms-hero{ grid-template-columns:1fr; }
  .dday-zone{ flex-direction:row; align-items:center; gap:18px; min-width:0; }
  .dday-zone .rays{ display:none; }
  .serve{ margin-top:0; }
  .meal-row{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .stat-band{ grid-template-columns:1fr 1fr; }
  .stat.big{ grid-column:1 / -1; border-left:none; border-top:1px solid var(--line); }
  .ent-row{ grid-template-columns:auto 1fr auto auto; } .ent-cat{ display:none; }
  .cal-cell{ min-height:62px; } .cell-plan{ display:none; } .band-lbl{ font-size:.5rem; }
  .erow{ gap:12px; padding:14px 4px; } .erow .etitle{ font-size:1.15rem; }
}

/* ============================================================
   복무 진행률 · 사용한 휴가 입력 (v3)
   ============================================================ */
.progress{ border:1px solid var(--line); background:var(--paper); padding:15px 18px; margin-top:14px; }
.progress.empty{ cursor:pointer; }
.progress.empty:hover{ background:var(--paper-2); }
.progress .p-pct{ font-family:var(--serif); font-weight:500; font-size:1.7rem; line-height:1; }
.p-track{ height:9px; background:var(--bg); border:1px solid var(--line-2); margin:11px 0 9px; position:relative; overflow:hidden; }
.p-fill{ position:absolute; inset:0 auto 0 0; background:var(--ink); transition:width .8s var(--ease); min-width:2px; }
.p-fill::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:5px; background:var(--seal); }
.p-meta{ display:flex; justify-content:space-between; gap:6px 14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
.p-meta .p-mid{ color:var(--ink); }

.used-box{ display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  border:1.5px solid var(--ink); background:var(--paper); padding:18px 20px; margin-top:22px; }
.stepper-wrap{ display:inline-flex; align-items:center; gap:11px; }
.stepper{ display:inline-flex; align-items:stretch; border:1.5px solid var(--ink); background:#fff; }
.stepper button{ width:46px; height:50px; border:none; background:transparent; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--ink); }
.stepper button:hover{ background:var(--hi); }
.stepper input{ width:80px; text-align:center; border:none; border-left:1.5px solid var(--ink); border-right:1.5px solid var(--ink);
  font-family:var(--serif); font-weight:500; font-size:1.9rem; padding:0; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper-wrap .su{ font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.pull-link{ flex:1 0 100%; text-align:right; background:none; border:none; cursor:pointer; margin-top:2px; padding:0;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--seal); }
.pull-link:hover{ text-decoration:underline; }
@media (max-width:560px){ .used-box{ justify-content:center; text-align:center; } .pull-link{ text-align:center; } }

/* ============================================================
   견학 보고서 (TAB 4)
   ============================================================ */
.rp-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center;
  border:1.5px dashed var(--line-2); background:var(--paper); padding:26px; cursor:pointer; margin-top:16px;
  font-family:var(--sans); color:var(--ink-soft); transition:.2s var(--ease); }
.rp-drop:hover{ border-color:var(--seal); background:var(--paper-2); }
.rp-plus{ font-family:var(--serif); font-size:1.9rem; color:var(--seal); line-height:1; }
.rp-hint{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.rp-thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.rp-thumb{ position:relative; width:96px; height:96px; border:1px solid var(--line); overflow:hidden; background:#fff; }
.rp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rp-del{ position:absolute; top:3px; right:3px; width:22px; height:22px; border:none; border-radius:50%;
  background:rgba(20,18,14,.72); color:#fff; cursor:pointer; font-size:.7rem; line-height:1; }
.rp-del:hover{ background:var(--seal); }
.rp-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 18px; margin-top:22px; }

.report-sheet{ background:#fff; color:#141414; border:1px solid var(--line); margin-top:26px; padding:42px 44px; box-shadow:var(--shadow-sm); font-family:var(--sans); }
.rs-title{ text-align:center; font-family:var(--sans); font-weight:800; font-size:1.7rem; letter-spacing:-.01em; margin:0 0 24px; padding-bottom:16px; border-bottom:2.5px solid #141414; }
.rs-info{ width:100%; border-collapse:collapse; margin-bottom:6px; }
.rs-info th,.rs-info td{ border:1px solid #b9b9b9; padding:9px 12px; font-size:.92rem; text-align:left; vertical-align:middle; }
.rs-info th{ background:#f1efe9; font-weight:700; width:92px; white-space:nowrap; }
.rs-sec{ margin-top:20px; }
.rs-h{ font-weight:700; font-size:.96rem; padding:8px 12px; background:#141414; color:#fff; }
.rs-body{ border:1px solid #b9b9b9; border-top:none; padding:16px; min-height:130px; white-space:pre-wrap; line-height:1.75; font-size:.95rem; }
.rs-photos{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; border:1px solid #b9b9b9; border-top:none; padding:12px; }
.rs-ph{ margin:0; } .rs-ph img{ width:100%; height:auto; display:block; border:1px solid #ddd; }
.rs-sign{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; font-size:.95rem; }
.rs-sign .rs-by{ font-weight:600; }

@media (max-width:680px){ .rp-fields{ grid-template-columns:1fr 1fr; } .report-sheet{ padding:26px 18px; } .rs-photos{ grid-template-columns:1fr; } }

/* PRINT — 보고서만, 흰 배경 A4 */
@media print{
  @page{ size:A4; margin:13mm; }
  html,body{ background:#fff !important; }
  .ms-hero, .tabs, .ms-foot, .no-print, #tab-leave, #tab-cal, #tab-meal{ display:none !important; }
  .wrap-page{ max-width:none !important; margin:0 !important; padding:0 !important; }
  #tab-report{ display:block !important; margin:0 !important; }
  .report-sheet{ border:none !important; box-shadow:none !important; margin:0 !important; padding:0 !important; }
  .rs-title{ font-size:18pt; }
  .rs-ph, .rs-sec, .rs-info tr{ break-inside:avoid; }
}

/* 복무 정보 — 자동 전역일 표시 */
.pf-result{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px;
  padding:11px 14px; background:var(--paper-2); border:1px solid var(--line); }
.pf-result strong{ font-family:var(--serif); font-weight:500; font-size:1.05rem; color:var(--ink); }