/* [Claude 2026-10-08] 새 공통 테마 — 2006~2007년 메이플 홈페이지 느낌(밝은 하늘·주황 알약 메뉴·둥근 판·굵은 외곽선)을 지금 화면 크기에 맞게.
   홈(/)과 드롭 테이블(/drops)이 쓰고, 다른 화면은 retro-sub.css 로 같은 머리말·색을 입힌다. */
:root{--sky:#8fd3ff;--sky2:#d9f1ff;--cream:#fffaf0;--ink:#3b2a1a;--soft:#7a6652;--line:#f0d9b5;--orange:#ff8a00;--orange2:#ffb347;--red:#ff4f3a;--blue:#1f8fe5;--blue2:#5cc0ff;--green:#59b947;--purple:#a95fe0;--display:'Jua','Noto Sans KR',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff6e3}
body{margin:0;font-family:'Noto Sans KR',sans-serif;color:var(--ink);background:linear-gradient(#8fd3ff 0,#c9ecff 340px,#fff6e3 720px,#fff6e3 100%);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}
.skip{position:absolute;left:-999px;top:0;padding:10px 14px;background:#fff;border-radius:0 0 8px 0;z-index:50}
.skip:focus{left:0}
:focus-visible{outline:3px solid #1f6fe5;outline-offset:2px}
.px{image-rendering:pixelated}

/* 구름 */
.sky-deco{position:absolute;inset:0 0 auto 0;height:330px;overflow:hidden;pointer-events:none;z-index:0}
.cloud{position:absolute;width:150px;height:44px;border-radius:44px;background:#fff;opacity:.9;box-shadow:42px -18px 0 4px #fff,84px -6px 0 -4px #fff;animation:drift 70s linear infinite}
.cloud.c2{top:150px;left:-12%;transform:scale(.7);animation-duration:95s;opacity:.75}
.cloud.c1{top:44px;left:6%}
.cloud.c3{top:86px;left:58%;transform:scale(1.15);animation-duration:120s}
@keyframes drift{from{translate:0}to{translate:110vw}}

.shell{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 20px 34px}

/* 머리말 */
.top{display:flex;align-items:center;gap:18px;padding:14px 0 10px}
.top .brand{flex:none;display:block;width:150px;line-height:0;filter:drop-shadow(0 4px 0 #0002)}
.top .brand img{width:100%;height:auto}
.primary-nav{flex:1;display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:linear-gradient(#ffa52e,#ff7a00);border:3px solid #fff;box-shadow:0 5px 0 #d85f00,0 10px 22px #b8500040}
.primary-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:48px;padding:4px 10px;border-radius:999px;color:#fff;font:400 19px/1.1 var(--display);text-decoration:none;text-shadow:0 2px 0 #c95a00;white-space:nowrap;transition:background .15s,transform .15s}
.primary-nav a small{font:700 9px/1 'DM Mono',monospace;letter-spacing:.12em;color:#ffe9c4;text-shadow:none}
.primary-nav a:hover,.primary-nav a:focus-visible{background:#fff3;transform:translateY(-1px)}
.primary-nav a[aria-current=page]{background:#fff;color:var(--orange);text-shadow:none;box-shadow:inset 0 -3px 0 #ffd9a8}
.primary-nav a[aria-current=page] small{color:#f5a54a}
.mobile-menu{display:none;flex:none;margin-left:auto;width:50px;height:46px;border-radius:14px;border:3px solid #fff;background:linear-gradient(#ffa52e,#ff7a00);box-shadow:0 4px 0 #d85f00;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.mobile-menu span{display:block;width:22px;height:3px;border-radius:3px;background:#fff}

/* 판 */
.card{position:relative;background:#fff;border:3px solid var(--orange);border-radius:22px;box-shadow:0 6px 0 #f1c98d,0 14px 28px #b8743020}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 12px;border-bottom:2px dashed var(--line)}
.card-head h2,.card-head h1{margin:0;display:flex;align-items:baseline;gap:8px;font:400 25px/1.1 var(--display);color:var(--ink)}
.card-head h2 small,.card-head h1 small{font:700 10px/1 'DM Mono',monospace;letter-spacing:.14em;color:var(--orange)}
.card-head h2:before,.card-head h1:before{content:'';align-self:center;width:12px;height:12px;border-radius:4px;background:var(--orange);box-shadow:3px 3px 0 #ffd28f;flex:none}
.card.blue{border-color:var(--blue);box-shadow:0 6px 0 #a8d8f8,0 14px 28px #1f6fb020}
.card.blue .card-head h2:before{background:var(--blue);box-shadow:3px 3px 0 #b5e0ff}
.card.blue .card-head h2 small{color:var(--blue)}
.card.green{border-color:var(--green);box-shadow:0 6px 0 #bfe6b3,0 14px 28px #3c8a2c20}
.card.green .card-head h2:before{background:var(--green);box-shadow:3px 3px 0 #c9efbf}
.card.green .card-head h2 small{color:var(--green)}
.more{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 12px 6px 9px;border-radius:999px;background:#fff4df;border:2px solid #ffc77d;color:#c96a00;font:700 12px/1 'Noto Sans KR',sans-serif;text-decoration:none}
.more:before{content:'+';display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--orange);color:#fff;font:700 14px/1 'DM Mono',monospace}
.more:hover,.more:focus-visible{background:var(--orange);color:#fff;border-color:var(--orange)}
.more:hover:before,.more:focus-visible:before{background:#fff;color:var(--orange)}
.state{flex:none;padding:7px 12px;border-radius:999px;background:#e9f7e4;border:2px solid #b5e3a8;color:#2f8a1f;font:700 12px/1 'DM Mono','Noto Sans KR',sans-serif}
.badge{flex:none;display:inline-block;min-width:58px;padding:5px 8px;border-radius:7px;background:var(--red);color:#fff;font:700 11px/1 'Noto Sans KR',sans-serif;text-align:center}
.badge.patch{background:var(--green)}.badge.event{background:var(--purple)}

/* 꼬리말 */
.foot{margin-top:30px;padding:22px 24px;border-radius:22px;background:#fff9;border:2px solid #ffffffb0;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--soft);font-size:12px}
.foot .foot-brand{display:flex;align-items:center;gap:12px}
.foot .foot-brand img{width:74px;height:auto}
.foot nav{display:flex;gap:16px;flex-wrap:wrap}
.foot a{color:var(--soft);text-decoration:none;font-weight:700}
.foot a:hover,.foot a:focus-visible{color:var(--orange);text-decoration:underline}
.foot .fine{flex-basis:100%;margin:0;font-size:11px;color:#9a8a78;line-height:1.7}

@media(max-width:860px){
 .shell{padding:0 14px 26px}
 .top{flex-wrap:wrap;gap:10px}
 .top .brand{width:118px}
 .mobile-menu{display:flex}
 .primary-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;border-radius:22px;padding:8px}
 .primary-nav.open{display:flex}
 .primary-nav a{flex-direction:row;justify-content:space-between;min-height:46px;padding:4px 18px;font-size:19px}
 .card{border-radius:18px}
 .card-head{padding:14px 15px 11px}
 .card-head h2,.card-head h1{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.cloud{animation:none}html{scroll-behavior:auto}}