/* ===== MARK 허브 — 뉴모피즘(E안) ===== */
/* 한 가지 바탕색 위에 밝은/어두운 이중 그림자로 돌출(카드)·함몰(공지, 아이콘 받침)을 표현.
   accent 카드(디지털 광고비·마케팅 홈페이지)만 아주 옅은 레드 틴트 + 레드 아이콘. 나머지 아이콘은 무채색. */
:root{
  --bg:#e8ebf0; --text:#1a1a1a; --text-2:#3f3f3c; --text-3:#64646a; --accent:#E6002D;
  --hi:rgba(255,255,255,.95); --lo:rgba(163,172,190,.55);
  --out:8px 8px 18px var(--lo), -8px -8px 18px var(--hi);
  --out-sm:4px 4px 10px var(--lo), -4px -4px 10px var(--hi);
  --in:inset 5px 5px 10px var(--lo), inset -5px -5px 10px var(--hi);
  --in-sm:inset 3px 3px 6px var(--lo), inset -3px -3px 6px var(--hi);
  --tint:linear-gradient(135deg, rgba(230,0,45,.07), rgba(230,0,45,0) 60%);
  --tint-strong:linear-gradient(135deg, rgba(230,0,45,.13), rgba(230,0,45,0) 65%);
  --line:transparent; --chip:#e8ebf0; --card:#e8ebf0; --shadow:none; --shadow-hover:none;
}
:root[data-theme="dark"]{
  --bg:#22252b; --text:#f3f3f3; --text-2:#cfcfcc; --text-3:#9d9da3;
  --hi:rgba(255,255,255,.055); --lo:rgba(0,0,0,.6); --chip:#22252b; --card:#22252b;
  --tint:linear-gradient(135deg, rgba(230,0,45,.16), rgba(230,0,45,0) 60%);
  --tint-strong:linear-gradient(135deg, rgba(230,0,45,.26), rgba(230,0,45,0) 65%);
}
*{margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{font-family:"Pretendard Variable",Pretendard,"Malgun Gothic",sans-serif; background:var(--bg); color:var(--text); min-height:100dvh; display:flex; flex-direction:column; justify-content:center; transition:background-color .3s, color .3s}
.wrapper{width:100%; max-width:640px; margin:0 auto; padding:36px 22px 30px}

/* ===== 헤더 ===== */
.site-header{display:flex; align-items:center; gap:18px; margin-bottom:22px}
.avatar{order:1; width:76px; height:76px; border-radius:50%; object-fit:cover; box-shadow:var(--out); border:4px solid var(--bg)}
.header-left{order:2; display:flex; flex-direction:column; gap:2px}
.logo{font-size:.78rem; font-weight:800; color:var(--accent); letter-spacing:.1em}
.page-title{font-size:2rem; font-weight:900; line-height:1.05; letter-spacing:-.03em}
.sub-text{font-size:.92rem; font-weight:500; color:var(--text-2); margin-top:4px}
.switch{order:3; margin-left:auto}
@media (max-width:480px){ .avatar{width:64px; height:64px} .page-title{font-size:1.75rem} }

/* 다크모드 스위치 (함몰 트랙 + 돌출 노브) */
.switch{position:relative; display:inline-block; width:60px; height:30px; flex-shrink:0; cursor:pointer}
.switch input{opacity:0; width:0; height:0; position:absolute}
.slider{position:absolute; inset:0; background:var(--bg); border-radius:30px; box-shadow:var(--in-sm); transition:.3s}
.slider:before{content:""; position:absolute; width:22px; height:22px; left:4px; top:4px; background:var(--bg); border-radius:50%; transition:.3s; box-shadow:var(--out-sm); z-index:2}
.slider svg{position:absolute; top:50%; transform:translateY(-50%); width:14px; height:14px; fill:none; stroke-width:2; stroke-linecap:round; z-index:1; transition:opacity .3s}
.icon-sun{left:8px; stroke:#e0a800; opacity:0}
.icon-moon{right:8px; stroke:var(--text-3); opacity:1}
input:checked + .slider:before{transform:translateX(30px)}
input:checked + .slider .icon-sun{opacity:1}
input:checked + .slider .icon-moon{opacity:0}
.switch:focus-within .slider{outline:2px solid var(--accent); outline-offset:2px}

/* ===== 공지 (함몰) ===== */
.notice{display:flex; align-items:center; gap:10px; margin-bottom:18px; padding:12px 16px; border-radius:14px; color:var(--text); text-decoration:none; font-size:.9rem; font-weight:500; box-shadow:var(--in)}
.notice[hidden]{display:none}
.notice .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0}
.notice time{margin-left:auto; color:var(--text-3); font-size:.78rem}

/* ===== 카드 (돌출) ===== */
.grid-container{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (min-width:640px){ .grid-container{grid-template-columns:repeat(3,1fr)} }
.card{position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:152px; border-radius:22px; padding:18px; color:var(--text); text-decoration:none; background:var(--bg); box-shadow:var(--out); overflow:hidden; isolation:isolate;
  transition:box-shadow .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1)}
/* 커서 하이라이트: 포인터 위치(--mx,--my)를 중심으로 번지는 밝은 면 */
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; z-index:-1; transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.55), transparent 60%)}
:root[data-theme="dark"] .card::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%)}
.card.lit::after{opacity:1}
.card:hover{transform:translateY(-3px); box-shadow:12px 12px 26px var(--lo), -12px -12px 26px var(--hi)}
.card:active{transform:translateY(0) scale(.985); box-shadow:var(--in); transition-duration:.12s}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.card.loading{pointer-events:none}
.icon-box{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg); box-shadow:var(--in-sm); color:var(--text-2);
  transition:box-shadow .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), color .25s, background .25s}
.card:hover .icon-box{box-shadow:var(--out-sm); transform:translateY(-2px) scale(1.06)}
.card:hover .icon-box svg{transform:scale(1.08)}
.card.accent:hover .icon-box{background:var(--accent); color:#fff; box-shadow:4px 4px 12px rgba(230,0,45,.35), -4px -4px 10px var(--hi)}
.icon-box svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card-body{margin-top:14px}
.card-title{font-size:1.08rem; font-weight:800; line-height:1.2; transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-title{transform:translateX(2px)}
.card-desc{font-size:.82rem; color:var(--text-2); margin-top:4px}
.card-meta{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:.72rem; color:var(--text-3); min-height:18px}
.badge{display:inline-block; padding:1px 7px; border-radius:999px; background:var(--accent); color:#fff; font-size:.66rem; font-weight:800; line-height:16px}
.badge.ext{background:var(--bg); box-shadow:var(--in-sm); color:var(--text-2)}
.archive-btn{margin-left:auto; background:none; border:0; color:var(--text-2); font:inherit; font-size:.72rem; cursor:pointer; padding:0; text-decoration:underline dotted}
.archive-btn:hover{color:var(--accent)}

/* 강조(featured): 전체 폭 */
.card.featured{order:-1; grid-column:1 / -1}
.card.featured .card-title{font-size:1.45rem; font-weight:900; letter-spacing:-.02em}
.card.featured .card-desc{font-size:.95rem; font-weight:600; color:var(--text)}
@media (min-width:640px){ .card.featured{min-height:150px} }

/* 은은한 강조(accent): 옅은 레드 틴트 + 레드 아이콘 */
.card.accent::before{content:""; position:absolute; inset:0; background:var(--tint); pointer-events:none; z-index:-1; transition:background .35s}
.card.accent:hover::before{background:var(--tint-strong)}
.card.accent .icon-box{color:var(--accent)}
.card.accent > *{position:relative}

footer{margin-top:34px; text-align:center; font-size:.75rem; color:var(--text-3)}

/* ===== 모달 공통 ===== */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:9999; padding:16px}
.modal[hidden]{display:none}
.modal-content{position:relative; background:var(--bg); color:var(--text); width:100%; max-width:640px; max-height:86dvh; overflow-y:auto; border-radius:22px; padding:28px; box-shadow:0 20px 50px rgba(0,0,0,.4)}
.modal-content.small{max-width:360px}
.modal-content h2{font-size:1.15rem; font-weight:800; margin-bottom:16px}
.close-btn{position:absolute; top:14px; right:16px; background:none; border:0; font-size:1.6rem; line-height:1; color:var(--text-3); cursor:pointer}
.archive-list{list-style:none}
.archive-list li a{display:flex; justify-content:space-between; padding:10px 6px; border-bottom:1px solid rgba(128,128,128,.2); color:var(--text); text-decoration:none; font-weight:600}
.archive-list li a:hover{color:var(--accent)}
.archive-list li a small{color:var(--text-3); font-weight:400}

/* 관리자 */
.stat-tabs{display:flex; gap:8px; margin-bottom:14px}
.stat-tab{padding:7px 14px; border-radius:20px; border:0; background:var(--bg); box-shadow:var(--out-sm); color:var(--text-2); cursor:pointer; font:inherit; font-size:.85rem; transition:.2s}
.stat-tab.active{background:var(--accent); color:#fff; box-shadow:none}
.stat-summary{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.stat-summary .stat{flex:1; min-width:110px; background:var(--bg); border-radius:14px; padding:10px 12px; box-shadow:var(--in-sm)}
.stat-summary .stat b{display:block; font-size:1.2rem; font-weight:800}
.stat-summary .stat span{font-size:.72rem; color:var(--text-3)}
.chart-container{width:100%; height:240px; margin-top:22px}

/* ===== 로딩 화면 ===== */
.loader{position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background:var(--bg); transition:opacity .5s ease, visibility .5s}
.loader-disc{width:84px; height:84px; border-radius:50%; background:var(--bg); box-shadow:var(--in); display:flex; align-items:center; justify-content:center; animation:breathe 1.6s ease-in-out infinite}
.loader-dot{width:14px; height:14px; border-radius:50%; background:var(--accent); animation:pulse 1.6s ease-in-out infinite}
.loader-word{font-size:.95rem; font-weight:900; letter-spacing:.32em; padding-left:.32em; color:var(--text-2); opacity:.7}
@keyframes breathe{0%,100%{box-shadow:var(--in)} 50%{box-shadow:var(--in-sm)}}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(.7); opacity:.55}}
html.ready .loader{opacity:0; visibility:hidden; pointer-events:none}

/* ===== 페이지 등장 시퀀스 (로더가 걷힌 뒤 한 번) ===== */
html:not(.ready) .site-header, html:not(.ready) .notice, html:not(.ready) .card, html:not(.ready) footer{opacity:0}
html.ready .site-header{animation:rise .6s cubic-bezier(.2,.7,.2,1) .05s both}
html.ready .notice{animation:rise .6s cubic-bezier(.2,.7,.2,1) .18s both}
html.ready .card{animation:rise .6s cubic-bezier(.2,.7,.2,1) calc(.26s + var(--i,0) * .06s) both}
html.ready footer{animation:rise .6s cubic-bezier(.2,.7,.2,1) .8s both}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ===== 월간 카드 탐색 중 스켈레톤 ===== */
.skeleton{color:transparent !important; border-radius:6px; min-width:120px; background:linear-gradient(90deg, var(--lo) 0%, var(--hi) 50%, var(--lo) 100%); background-size:200% 100%; opacity:.35; animation:shimmer 1.2s linear infinite}
@keyframes shimmer{from{background-position:200% 0} to{background-position:-200% 0}}

/* ===== 모달 등장 ===== */
.modal{opacity:0; transition:opacity .25s}
.modal.open{opacity:1}
.modal-content{transform:translateY(12px) scale(.98); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.modal.open .modal-content{transform:none}

/* ===== 스위치 아이콘 회전 ===== */
.slider svg{transition:opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1)}
input:checked + .slider .icon-sun{transform:translateY(-50%) rotate(90deg)}
.slider .icon-sun{transform:translateY(-50%) rotate(0)}

/* ===== 움직임 줄이기 설정 존중 ===== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important}
  html:not(.ready) .site-header, html:not(.ready) .notice, html:not(.ready) .card, html:not(.ready) footer{opacity:1}
  .card:hover{transform:none}
}