/* iOS 스타일: 회색 바탕 위 흰 카드, 시스템 파랑 한 가지, 애플 기본 글꼴 */
:root{
  --bg:#f2f2f7;
  --surface:#ffffff;
  --surface-2:#f7f7fa;
  --fill:#e9e9ee;          /* 입력칸·보조 버튼 바탕 */
  --press:#e5e5ea;
  --ink:#1c1c1e;
  --ink-2:#6e6e73;
  --ink-3:#aeaeb2;
  --sep:#dcdce1;
  --accent:#007aff;
  --accent-soft:#e3efff;
  --accent-ink:#0062cc;
  --on-accent:#ffffff;
  --danger:#ff3b30;
  --danger-soft:#ffe9e7;
  --ok:#248a3d;
  --warn:#ff9500;
  --bar:rgba(242,242,247,.8);
  --shadow:0 1px 1px rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lift:0 2px 4px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.08);
  --tip-bg:rgba(28,28,30,.94);
  --tip-ink:#ffffff;
  --r-tile:14px;
  --r-card:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;
    --surface:#1c1c1e;
    --surface-2:#232326;
    --fill:#2c2c2e;
    --press:#3a3a3c;
    --ink:#ffffff;
    --ink-2:#98989f;
    --ink-3:#636366;
    --sep:#38383a;
    --accent:#0a84ff;
    --accent-soft:#0d2a4a;
    --accent-ink:#64a8ff;
    --on-accent:#ffffff;
    --danger:#ff453a;
    --danger-soft:#3a1714;
    --ok:#30d158;
    --warn:#ff9f0a;
    --bar:rgba(0,0,0,.72);
    --shadow:none;
    --shadow-lift:0 0 0 1px #3a3a3c;
    --tip-bg:rgba(242,242,247,.96);
    --tip-ink:#1c1c1e;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-size:15px;line-height:1.5;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  word-break:keep-all;
}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:28px}
.num{font-variant-numeric:tabular-nums}

/* ---------- 상단 바 (반투명 유리) ---------- */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);
}
.bar{display:flex;align-items:center;gap:8px;min-height:54px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;text-decoration:none;letter-spacing:-.02em;margin-right:auto}
.mark{
  width:28px;height:28px;border-radius:8px;flex:none;
  background:linear-gradient(180deg,#3b95ff,#007aff);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.today{font-size:13px;color:var(--ink-2);margin-right:6px}

/* 버튼: 기본은 옅은 파랑(tinted), 주요는 채운 파랑 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 14px;border-radius:999px;border:none;cursor:pointer;
  font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent-ink);
  transition:filter .15s ease, transform .1s ease;
}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:scale(.97)}
.btn.plain{background:none;color:var(--accent);padding-inline:8px}
.btn.plain:hover{filter:none;opacity:.7}
.btn.primary{background:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.small{padding:4px 11px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default;transform:none}

/* ---------- 큰 제목 ---------- */
.hero{padding-block:30px 6px}
.hero .eyebrow{margin:0;font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.hero h1{margin:2px 0 0;font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.15}

.section-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 4px 10px;
}
.section-title h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.03em}
.section-title a{font-size:15px;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:2px}
.section-title a:hover{opacity:.7}
.section-title a::after{content:"›";font-size:20px;line-height:1;margin-top:-2px}

/* ---------- 바로가기 ---------- */
.quick-wrap{padding-block:22px 6px}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.qcol{display:grid;grid-template-rows:repeat(4,54px);gap:10px;min-width:0}
.qsplit{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.qbtn{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:6px 12px;border-radius:var(--r-tile);min-width:0;
  background:var(--surface);box-shadow:var(--shadow);
  font-size:15.5px;font-weight:600;letter-spacing:-.025em;text-decoration:none;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.qbtn span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.22}
.qsplit .qbtn{font-size:14px;padding:4px 8px;border-radius:12px}
a.qbtn:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
a.qbtn:active{transform:scale(.96);background:var(--press);box-shadow:none}
.qbtn.internal{background:var(--accent);color:var(--on-accent)}
a.qbtn.internal:active{background:var(--accent);filter:brightness(.92)}
.qbtn.off{
  background:transparent;box-shadow:none;color:var(--ink-3);font-weight:500;cursor:default;
  border:1.5px dashed var(--sep);
}
.qbtn.has-memo::before{
  content:"";position:absolute;top:8px;right:9px;
  width:6px;height:6px;border-radius:50%;background:var(--warn);
}
.qbtn.internal.has-memo::before{background:#fff}

/* 메모 말풍선 */
.tip{
  position:fixed;z-index:50;max-width:280px;padding:9px 12px;border-radius:12px;
  background:var(--tip-bg);color:var(--tip-ink);font-size:13.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;pointer-events:none;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 28px rgba(0,0,0,.22);
}

/* ---------- 아래 4칸 ---------- */
.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px;padding-block:30px 64px}
.panel{min-width:0;display:flex;flex-direction:column}
.plist{
  list-style:none;margin:0;padding:0;flex:1;
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;
}
.plist li{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:0 16px;min-height:50px;min-width:0;
}
.plist li + li::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.plist .when{flex:none;font-size:13px;color:var(--ink-2);min-width:44px}
.plist .dday{
  flex:none;min-width:52px;text-align:center;padding:3px 8px;border-radius:999px;
  font-size:12.5px;font-weight:600;background:var(--fill);color:var(--ink-2);
}
.plist .dday.soon{background:var(--accent);color:var(--on-accent)}
.plist .dday.today{background:var(--danger);color:#fff}
.plist .what{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;text-decoration:none;padding-block:13px}
.plist a.what:hover{color:var(--accent)}
.plist .src{flex:none;font-size:12.5px;color:var(--ink-3);max-width:32%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pempty{padding:22px 16px;color:var(--ink-2);font-size:14px;list-style:none}
.pempty a{color:var(--accent);text-decoration:none}
.panel > .pempty{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);flex:1}

/* ---------- 하위 페이지 공통 ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:30px 20px}
.page-head h1{margin:0;font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.15}
.page-head p{margin:6px 0 0;color:var(--ink-2);font-size:14.5px;max-width:60ch}
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.card-head{padding:14px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.03em}
.card-body{padding:16px}
.note{font-size:13px;color:var(--ink-2);margin:10px 4px}
.status{min-height:20px;font-size:13.5px;color:var(--ink-2)}
.status.err{color:var(--danger)}
.status.ok{color:var(--ok)}

/* 입력 */
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2);min-width:0}
.in{
  width:100%;padding:10px 12px;border-radius:10px;font-size:15px;
  border:1px solid transparent;background:var(--fill);color:var(--ink);
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.in::placeholder{color:var(--ink-3)}
.in:focus{outline:none;background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.in{resize:vertical;min-height:64px}
select.in{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);margin:0}

/* ---------- 바로가기 설정 ---------- */
.link-head{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,2fr) minmax(0,1.6fr) 60px;gap:10px;
  padding:12px 16px 6px;font-size:12.5px;font-weight:600;color:var(--ink-3);
}
.link-row{
  position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,2fr) minmax(0,1.6fr) 60px;
  gap:10px;align-items:start;padding:10px 16px;
}
.link-row + .link-row::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.link-row .pos{font-size:12.5px;color:var(--ink-2);padding-top:9px}
.link-row .pos b{display:block;color:var(--ink);font-weight:600;font-size:14px}
.link-row .use{display:flex;align-items:center;gap:6px;font-size:14px;padding-top:10px;cursor:pointer}
.link-row textarea.in{min-height:42px;height:42px}
.sticky-save{
  position:sticky;bottom:0;padding-block:14px;margin-top:14px;display:flex;align-items:center;gap:12px;
  background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}

/* ---------- 연간일정 ---------- */
.sched{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;padding-bottom:64px;align-items:start}
.months{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.mbtn{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:10px 12px;border-radius:10px;border:none;background:none;cursor:pointer;text-align:left;font-size:15px;font-weight:500;
}
.mbtn:hover{background:var(--fill)}
.mbtn[aria-current="true"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.mbtn .cnt{font-size:12px;min-width:20px;text-align:center;padding:0 6px;border-radius:999px;background:var(--fill);color:var(--ink-2)}
.mbtn[aria-current="true"] .cnt{background:rgba(255,255,255,.25);color:#fff}
.evlist{list-style:none;margin:0;padding:0}
.ev{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;padding:14px 16px;align-items:start}
.ev + .ev::before{content:"";position:absolute;top:0;left:88px;right:0;border-top:.5px solid var(--sep)}
.ev .d{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.1;text-align:center}
.ev .d small{display:block;font-size:12px;font-weight:500;color:var(--danger);margin-top:2px;letter-spacing:0}
.ev .t{font-weight:600;font-size:15.5px}
.ev .m{margin-top:3px;font-size:14px;color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.ev .acts{display:flex;gap:6px}
.evform{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;border-bottom:.5px solid var(--sep);background:var(--surface-2)}
.evform .full{grid-column:1 / -1}
.evform .acts{grid-column:1 / -1;display:flex;gap:8px;align-items:center}

/* ---------- 게시판 ---------- */
.board{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;padding-bottom:64px;align-items:start}
.board .plist{box-shadow:none;border-radius:0}
.src-list{list-style:none;margin:0;padding:0}
.src-item{position:relative;display:flex;gap:10px;align-items:flex-start;padding:12px 16px}
.src-item + .src-item::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.src-item .body{flex:1;min-width:0}
.src-item .name{font-weight:600;font-size:15px;word-break:break-all}
.src-item .meta{font-size:12.5px;color:var(--ink-2);word-break:break-all;margin-top:1px}
.src-item .meta.err{color:var(--danger)}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);margin-right:6px;vertical-align:1px}
.srcform{display:grid;gap:14px}

@media (prefers-reduced-motion: reduce){
  .qbtn,.btn,.in{transition:none}
  a.qbtn:hover,a.qbtn:active,.btn:active{transform:none}
}

/* ---------- 반응형 ---------- */
@media (max-width:980px){
  .quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px}
  .board{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .link-head{display:none}
  .link-row{grid-template-columns:minmax(0,1fr) auto}
  .link-row .pos{grid-column:1 / -1;padding-top:4px}
  .link-row .url-f,.link-row .memo-f{grid-column:1 / -1}
  .link-row .use{grid-column:2;grid-row:2}
}
@media (max-width:720px){
  .panels{grid-template-columns:minmax(0,1fr);gap:26px}
  .sched{grid-template-columns:minmax(0,1fr)}
  .months{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mbtn{justify-content:center;padding:9px 4px}
  .mbtn .cnt{display:none}
}
@media (max-width:560px){
  .wrap{padding-inline:16px}
  .today{display:none}
  .hero{padding-block:20px 2px}
  .hero h1{font-size:30px}
  .page-head h1{font-size:28px}
  .quick{grid-template-columns:minmax(0,1fr)}
  .qcol{grid-template-rows:none;grid-auto-rows:50px}
  .months{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ev{grid-template-columns:46px minmax(0,1fr)}
  .ev + .ev::before{left:76px}
  .ev .acts{grid-column:2}
  .plist .src{display:none}
}