/* ============================================================
   mj2y — EDITORIAL design system  (v2)
   Refined editorial collage: oversized antiqua serif,
   monochrome + acid-yellow highlight + vermilion seal.
   Shared by ms.mj2y.com and mj2y.com
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  /* surface */
  --bg:        #efebe1;   /* warm plaster white */
  --paper:     #f7f4ec;   /* cards / panels */
  --paper-2:   #f1ede3;
  --ink:       #1b1a17;   /* near-black */
  --ink-soft:  #6c6457;
  --ink-faint: #a39a89;
  --line:      #d8d1c1;   /* hairline */
  --line-2:    #c4bba7;

  /* accents */
  --hi:        #e9ff3a;   /* acid-yellow highlight (signature) */
  --hi-soft:   #f0ff9c;
  --seal:      #df3f27;   /* vermilion — seals, D-day, stamps */
  --seal-deep: #b22f1c;
  --olive:     #4b5320;   /* military tertiary, sparing */
  --navy:      #34425a;

  /* type — Latin display = Fraunces; ALL Korean = Pretendard (clean, modern) */
  --serif:    'Fraunces','Pretendard',Georgia,serif;   /* Latin serif; KO falls to Pretendard */
  --serif-ko: 'Pretendard',system-ui,-apple-system,sans-serif; /* Korean display/body */
  --sans:     'Pretendard',system-ui,-apple-system,sans-serif;
  --mono:     'Space Mono',ui-monospace,'SFMono-Regular',monospace;

  --maxw: 1180px;
  --shadow:    0 18px 50px rgba(30,26,18,.16);
  --shadow-sm: 0 6px 18px rgba(30,26,18,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); font-family:var(--sans); line-height:1.55;
  background-color:var(--bg);
  background-image:
    /* faint marble veins */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.018' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.05'/%3E%3C/svg%3E"),
    /* fine grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.025'/%3E%3C/svg%3E");
  min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--hi); color:var(--ink); }

/* ---- container / page shell ------------------------------ */
.wrap-page{ max-width:var(--maxw); margin:0 auto; padding:clamp(22px,4vw,54px) clamp(18px,5vw,60px) 80px; position:relative; }

/* ============================================================
   TYPE
   ============================================================ */
.serif{ font-family:var(--serif); font-weight:400; }
.display{ font-family:var(--serif-ko); font-weight:800; line-height:.98; letter-spacing:-.025em; color:var(--ink); }
.d-xxl{ font-size:clamp(3.4rem,15vw,11rem); }
.d-xl{ font-size:clamp(2.6rem,8vw,5.2rem); }
.d-lg{ font-size:clamp(2rem,5vw,3.2rem); }
.d-md{ font-size:clamp(1.5rem,3vw,2.1rem); }
.italic{ font-style:italic; }

.eyebrow{ font-family:var(--mono); font-size:.7rem; font-weight:400; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ink-soft); }
.label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }
.muted{ color:var(--ink-faint); }
.tnum{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--mono); }

/* acid-yellow text highlight (marker behind text) */
.hi-mark{ background:linear-gradient(var(--hi),var(--hi)); background-size:100% 42%;
  background-position:0 82%; background-repeat:no-repeat; padding:0 .06em; }

/* ============================================================
   SEAL  — circular date / D-day medallion (signature)
   ============================================================ */
.seal{ position:relative; width:74px; height:74px; border-radius:50%; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:1.5px solid var(--seal); color:var(--seal); background:transparent; }
.seal::before{ content:""; position:absolute; inset:4px; border-radius:50%; border:.8px solid var(--seal);
  opacity:.5; }
.seal .s-dow{ font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; line-height:1; }
.seal .s-num{ font-family:var(--serif); font-weight:500; font-size:1.7rem; line-height:.92; }
.seal .s-mon{ font-family:var(--mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; line-height:1; }
.seal.ink{ border-color:var(--ink); color:var(--ink); }
.seal.ink::before{ border-color:var(--ink); }
.seal.lg{ width:108px; height:108px; }
.seal.lg .s-num{ font-size:2.7rem; }
.seal.filled{ background:var(--seal); color:#fff; }
.seal.filled::before{ border-color:rgba(255,255,255,.55); }

/* ============================================================
   SUNBURST RAYS  — behind hero medallion
   ============================================================ */
.rays{ position:absolute; width:340px; height:340px; border-radius:50%; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, var(--hi) 0deg 6deg, transparent 6deg 19deg);
  -webkit-mask:radial-gradient(closest-side, #000 18%, rgba(0,0,0,.5) 42%, transparent 72%);
          mask:radial-gradient(closest-side, #000 18%, rgba(0,0,0,.5) 42%, transparent 72%);
  opacity:.85; }

/* ============================================================
   PANELS / CARDS
   ============================================================ */
.panel{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:clamp(18px,2.4vw,30px); }
.panel.flat{ background:transparent; border:none; padding:0; }
.hairline{ border:none; border-top:1px solid var(--line); margin:0; }
.hair-dash{ border:none; border-top:1px dashed var(--line-2); margin:0; }

/* ============================================================
   EDITORIAL LIST ROW  (events / leaves)
   ============================================================ */
.elist{ display:flex; flex-direction:column; }
.erow{ position:relative; display:flex; align-items:center; gap:20px; padding:18px 14px;
  border-top:1px solid var(--line); transition:background .25s var(--ease); }
.erow:last-child{ border-bottom:1px solid var(--line); }
.erow .ebody{ flex:1; min-width:0; }
.erow .etitle{ font-family:var(--serif-ko); font-weight:500; font-size:1.35rem; line-height:1.1; }
.erow .esub{ font-family:var(--sans); font-style:normal; color:var(--ink-soft); font-size:.92rem; margin-top:2px; }
.erow .emeta{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }
.erow .eright{ display:flex; align-items:center; gap:10px; }
.erow:hover{ background:linear-gradient(90deg, transparent, rgba(233,255,58,.16)); }
/* highlighted (next/important) row */
.erow.mark::after{ content:""; position:absolute; inset:6px -2px; background:var(--hi); z-index:-1;
  transform:rotate(-.4deg); }
.erow.mark{ background:transparent; }
.erow.dim{ opacity:.62; }

/* ============================================================
   BUTTONS / CONTROLS
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:transparent; border:1.4px solid var(--ink);
  padding:10px 18px; border-radius:2px; transition:all .2s var(--ease); }
.btn:hover{ background:var(--ink); color:var(--bg); }
.btn.fill{ background:var(--hi); border-color:var(--hi); color:var(--ink); }
.btn.fill:hover{ background:var(--ink); border-color:var(--ink); color:var(--hi); }
.btn.seal{ border-color:var(--seal); color:var(--seal); }
.btn.seal:hover{ background:var(--seal); color:#fff; }
.btn.sm{ padding:6px 12px; font-size:.66rem; }
.btn.ghost{ border-color:var(--line-2); color:var(--ink-soft); }
.btn.ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.icon-btn{ background:transparent; border:none; cursor:pointer; color:var(--ink-faint); padding:6px; border-radius:3px;
  line-height:1; font-size:1rem; transition:color .15s; }
.icon-btn:hover{ color:var(--seal); }

/* toggle */
.toggle{ position:relative; display:inline-flex; align-items:center; cursor:pointer; user-select:none; }
.toggle input{ position:absolute; opacity:0; width:0; height:0; }
.toggle .track{ width:40px; height:22px; border-radius:2px; background:transparent; border:1.4px solid var(--line-2);
  position:relative; transition:.2s var(--ease); flex:none; }
.toggle .track::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:1px;
  background:var(--ink-faint); transition:.2s var(--ease); }
.toggle input:checked + .track{ border-color:var(--ink); background:var(--hi); }
.toggle input:checked + .track::after{ transform:translateX(18px); background:var(--ink); }
.toggle input:focus-visible + .track{ outline:2px solid var(--seal); outline-offset:2px; }

/* chips */
.chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--line-2);
  border-radius:2px; color:var(--ink-soft); background:transparent; }
.chip.hi{ background:var(--hi); border-color:var(--ink); color:var(--ink); }
.chip.seal{ border-color:var(--seal); color:var(--seal); }
.chip.ink{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

/* inputs */
.field{ display:flex; flex-direction:column; gap:5px; }
.field > label,.field-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
input[type=text],input[type=number],input[type=date],textarea,select{
  font-family:var(--sans); font-size:.98rem; color:var(--ink); background:transparent;
  border:none; border-bottom:1.4px solid var(--line-2); padding:7px 2px; width:100%; border-radius:0; }
input:focus,textarea:focus,select:focus{ outline:none; border-bottom-color:var(--seal); }
input.serif-in{ font-family:var(--serif-ko); font-size:1.2rem; }
textarea{ border:1.4px solid var(--line-2); border-radius:3px; padding:9px; resize:vertical; }
select{ -webkit-appearance:none; appearance:none; cursor:pointer; }

/* ============================================================
   TABS  (editorial underline)
   ============================================================ */
.tabs{ display:flex; gap:26px; align-items:center; border-bottom:1px solid var(--line); }
.tab{ position:relative; background:transparent; border:none; cursor:pointer; padding:12px 2px 14px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
  transition:color .2s var(--ease); }
.tab:hover{ color:var(--ink-soft); }
.tab[aria-selected="true"]{ color:var(--ink); }
.tab[aria-selected="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--seal); }
.tab .ic{ display:none; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-back{ position:fixed; inset:0; background:rgba(20,18,14,.5); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px; z-index:100; }
.modal-card{ position:relative; width:min(480px,100%); max-height:90vh; overflow:auto; background:var(--paper);
  border:1px solid var(--line); border-radius:5px; padding:26px; box-shadow:var(--shadow); }
.modal-card h3{ font-family:var(--serif-ko); font-weight:500; font-size:1.5rem; margin:0; }

/* ============================================================
   UTILITIES
   ============================================================ */
.row{ display:flex; gap:16px; }
.col{ display:flex; flex-direction:column; }
.wrap{ flex-wrap:wrap; }
.between{ justify-content:space-between; }
.center{ align-items:center; }
.end{ justify-content:flex-end; }
.grow{ flex:1; }
.gap-sm{ gap:8px; } .gap-lg{ gap:28px; }
.mt{ margin-top:16px; } .mt-lg{ margin-top:clamp(28px,5vw,56px); }
.hidden{ display:none !important; }
.nowrap{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* section header (eyebrow + big serif + rule) */
.sec{ display:flex; align-items:flex-end; gap:18px; margin:clamp(34px,6vw,64px) 0 22px; }
.sec .sec-t{ font-family:var(--serif-ko); font-weight:300; font-size:clamp(1.6rem,3.5vw,2.4rem); line-height:1; }
.sec .sec-rule{ flex:1; border-bottom:1px solid var(--line); transform:translateY(-7px); }
.sec .sec-n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--ink-faint); transform:translateY(-9px); }

:focus-visible{ outline:2px solid var(--seal); outline-offset:3px; }

@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.rise{ animation:rise .7s var(--ease) both; }
.rise-2{ animation:rise .7s var(--ease) .08s both; }
.rise-3{ animation:rise .7s var(--ease) .16s both; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto; }
}

@media (max-width:680px){
  .row{ flex-wrap:wrap; }
  .tabs{ gap:16px; overflow-x:auto; }
  .rays{ width:220px; height:220px; }
}