/* 커피 내기 안내 페이지 공용 스타일 (게임 E 테마와 같은 토큰) */
:root{
  --sky:#5CC8FF;--paper:#FFFFFF;--ink:#1D2B53;--ink-2:#46557F;--note:#FFC93C;--stamp:#FF4F7B;--rule:#D3DCEE;--link:#1A4FB0;
  --line:3px solid #1D2B53;--lip:0 5px 0 #1D2B53;
  --display:"Jua","Gothic A1",sans-serif;
  --body:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --outline:3px 0 0 #1D2B53,-3px 0 0 #1D2B53,0 3px 0 #1D2B53,0 -3px 0 #1D2B53,2px 2px 0 #1D2B53,-2px 2px 0 #1D2B53,2px -2px 0 #1D2B53,-2px -2px 0 #1D2B53,0 6px 0 #1D2B53;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:linear-gradient(180deg,#3FB2FF 0,#8EDBFF 70%,#B9EBFF 100%) fixed;background-color:var(--sky);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;min-height:100vh}
.wrap{max-width:720px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 16px max(40px,env(safe-area-inset-bottom))}
:focus-visible{outline:3px solid var(--stamp);outline-offset:3px}
a{color:var(--link);text-underline-offset:3px}

/* 머리글 */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px}
.brand{font-family:var(--display);font-size:26px;line-height:1.2;color:#fff;text-decoration:none;text-shadow:var(--outline);padding-bottom:4px}
.nav{display:flex;flex-wrap:wrap;gap:8px}
.nav a{display:inline-flex;align-items:center;min-height:40px;background:#fff;color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:0 14px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 3px 0 var(--ink)}
.nav a[aria-current="page"]{background:var(--note)}
.nav a:active{transform:translateY(3px);box-shadow:none}

/* 본문 패널 */
.panel{background:var(--paper);border:var(--line);border-radius:22px;box-shadow:var(--lip);padding:26px 20px;margin-bottom:24px}
@media (min-width:600px){.panel{padding:34px 36px}}
h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,8vw,40px);line-height:1.25;margin:0 0 10px;word-break:keep-all}
h2{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.35;margin:30px 0 8px;word-break:keep-all}
h3{font-size:17px;line-height:1.5;margin:20px 0 4px;word-break:keep-all}
p,li,dd{word-break:keep-all;overflow-wrap:anywhere}
p{margin:0 0 12px}
.lead{color:var(--ink-2);margin-bottom:4px}
.meta{font-size:14px;color:var(--ink-2);margin:0 0 18px}
ol,ul{padding-left:22px;margin:0 0 12px}
li{margin-bottom:4px}
.faq dt{font-weight:800;margin-top:14px}
.faq dd{margin:2px 0 0}
.note{background:#FFF6DA;border:2px solid var(--ink);border-radius:14px;padding:12px 14px;margin:16px 0}
.note p:last-child{margin:0}

/* 버튼처럼 보이는 링크 */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;background:var(--note);color:var(--ink);border:var(--line);border-radius:16px;padding:0 22px;font-family:var(--display);font-size:20px;text-decoration:none;box-shadow:inset 0 4px 0 rgba(255,255,255,.55),var(--lip);margin:8px 0 4px}
.cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}

/* 목록 카드 */
.list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media (min-width:600px){.list.two{grid-template-columns:1fr 1fr}}
.list a{display:block;height:100%;background:#EAF6FF;color:var(--ink);text-decoration:none;border:var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 4px 0 var(--ink)}
.list li:nth-child(4n+1) a{background:#FFE3EC}.list li:nth-child(4n+2) a{background:#E2F6E6}
.list li:nth-child(4n+3) a{background:#FFF3C9}.list li:nth-child(4n) a{background:#E6E9FF}
.list b{display:block;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.3}
.list span{display:block;font-size:15px;color:var(--ink-2);margin-top:2px}
.list .tm{font-style:normal;display:inline-block;background:var(--note);border:2px solid var(--ink);border-radius:999px;padding:0 9px;font-size:13px;font-weight:800;color:var(--ink);margin-top:8px}
.list a:hover b,.list a:focus-visible b{text-decoration:underline}

/* 바닥글 */
.foot{font-size:14px;color:var(--ink);text-align:center}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-bottom:6px}
.foot a{color:var(--ink);font-weight:700}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 작은 화면 메뉴 */
@media (max-width:480px){.nav{gap:6px}.nav a{padding:0 11px;font-size:13.5px;white-space:nowrap}}

.refs{font-size:13px;color:var(--ink-2);padding-left:18px}
.refs a{color:inherit;word-break:break-all}
@media (max-width:430px){.nav{flex-wrap:nowrap}.nav a{flex:1 1 0;min-width:0;justify-content:center;padding:0 4px}}