/* 한끼한잔 (가칭) — 2026-10-26 */
:root{--ink:#1B2420;--mute:#5C6762;--mute2:#4A5550;--line:#E6EAE7;--line2:#DDE3DF;--soft:#F3F5F3;--bg:#FFFFFF;
 --bap:#D9481C;--bapT:#B83A12;--bapS:#FCEDE7;--cafe:#5B3A22;--cafeS:#F4ECE5;--play:#1D4ED8;--playS:#E6EDFD;--walk:#15803D;--walkT:#166534;--walkS:#E4F4E9;--drink:#7E22CE;--drinkS:#F3E8FD;
 --safeB:env(safe-area-inset-bottom,0px);--safeT:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--bapT)}
#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding-top:var(--safeT)}
.boot{flex:1;display:flex;align-items:center;justify-content:center}
.logo{font-weight:900;letter-spacing:-1px;font-size:25px}.logo .l1{color:var(--bap)}.logo .l2{color:var(--cafe)}
.big .logo{font-size:40px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 위쪽 */
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 6px}
.top2{display:flex;align-items:center;gap:6px;padding:8px 10px;position:sticky;top:0;background:var(--bg);z-index:5}
.ib{width:44px;height:44px;flex:none;border:0;background:transparent;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
.ib:active{background:var(--soft)}
.here{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:22px;background:#fff;font-size:14px;font-weight:500;max-width:62%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sumbar{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px;background:var(--soft);border:0;text-align:left;font-size:14px;color:var(--mute2);overflow:hidden;white-space:nowrap}
.sumbar b{color:var(--ink);font-size:15px}

/* 첫 화면 */
.chips4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:4px 16px 10px}
.chip{height:44px;border-radius:12px;border:1px solid var(--line2);background:#fff;font-size:14px;font-weight:500}
.chip[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:700}
.sbox{margin:0 16px;padding:12px;border-radius:18px;background:var(--soft);display:flex;flex-direction:column;gap:10px;position:relative}
.qin{display:flex;align-items:center;gap:8px;height:50px;padding:0 6px 0 14px;border-radius:14px;background:#fff;border:2px solid var(--ink)}
.qin input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:17px;font-weight:700}
.qin .ib{width:40px;height:40px}
.sug{position:absolute;left:12px;right:12px;top:66px;z-index:20;background:#fff;border:1px solid var(--line2);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden;max-height:300px;overflow-y:auto}
.sug button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;font-size:15px}
.sug button small{color:var(--mute);font-size:13px}
.sug .none{padding:14px;color:var(--mute);font-size:14px}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.seg .chip{height:40px}
.sec{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 6px}
.sec b{font-size:16px}.sec span{font-size:12px;color:var(--mute)}
.steps{padding:0 16px;display:flex;flex-direction:column;gap:6px}
.step{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border-radius:14px;border:1px solid var(--line);background:#fff}
.step.off{opacity:.55}
.step .ic{width:34px;height:34px;flex:none;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center}
.step .nm{width:78px;flex:none;font-size:15px;font-weight:700;line-height:1.2}
.step .nm small{display:block;font-size:11px;font-weight:500;color:var(--mute)}
.step select{flex:1;min-width:0;height:42px;padding:0 8px;border-radius:10px;border:1px solid var(--line2);background:#fff;font-size:14px}
.sw{width:56px;height:44px;flex:none;border:0;padding:0;background:transparent;display:flex;align-items:center;justify-content:center}
.sw span{display:flex;width:46px;height:26px;border-radius:13px;padding:3px;background:#B8C1BC;transition:background .15s}
.sw span i{display:block;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.sw[aria-pressed=true] span i{transform:translateX(20px)}
.go2{padding:12px 16px 4px;display:grid;grid-template-columns:2fr 1fr;gap:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line2);background:#fff;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;text-align:center}
.btn.pri{border:0;background:var(--bap);color:#fff;font-size:17px;min-height:54px}
.btn.dark{border:0;background:var(--ink);color:#fff}
.btn.sm{min-height:40px;font-size:13px;padding:0 12px;border-radius:10px}
.btn:active{filter:brightness(.95)}
.note{margin:8px 16px;padding:10px 12px;border-radius:12px;background:var(--bapS);color:var(--bapT);font-size:13px}

/* 아래 탭 */
.tabbar{position:sticky;bottom:0;margin-top:auto;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px 0 calc(8px + var(--safeB));background:#fff;z-index:10}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;font-size:12px;color:var(--mute);text-decoration:none}
.tabbar a.on{color:var(--ink);font-weight:700}
.spacer{flex:1}

/* 결과 */
.ctabs{display:flex;gap:6px;padding:2px 12px 10px;overflow-x:auto;scrollbar-width:none}
.ctabs::-webkit-scrollbar{display:none}
.ctab{flex:none;display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--line2);background:#fff;font-size:14px;font-weight:500;color:var(--mute2)}
.ctab[aria-pressed=true]{border:2px solid var(--ink);color:var(--ink);font-weight:700}
.ctab small{font-size:12px;color:var(--mute)}
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.map{position:relative;height:280px;background:#E8EEE9;flex:none}
.map.tall{height:230px}
.map .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:14px;padding:20px;text-align:center}
.mapbtn{position:absolute;z-index:3;min-height:40px;padding:0 14px;border-radius:20px;border:0;background:var(--ink);color:#fff;font-size:13px;font-weight:700;right:12px;bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.kinds{display:flex;gap:6px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:none}
.kinds::-webkit-scrollbar{display:none}
.kind{flex:none;height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line2);background:#fff;font-size:13px}
.kind[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.lhead{padding:12px 16px 4px;display:flex;justify-content:space-between;align-items:baseline}
.lhead b{font-size:16px}.lhead span{font-size:13px;color:var(--mute)}
.row{display:flex;gap:12px;align-items:center;padding:12px 16px;border:0;border-bottom:1px solid #F0F2F0;background:#fff;width:100%;text-align:left;text-decoration:none;color:var(--ink)}
.row:active{background:var(--soft)}
.row .no{width:34px;height:34px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900}
.row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.row .tx b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .tx span{font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .ds{flex:none;text-align:right;font-size:12px;color:var(--mute2)}
.row .ds b{display:block;font-size:14px;color:var(--ink)}
.pager{display:flex;justify-content:center;gap:6px;padding:14px 0 18px;flex-wrap:wrap}
.pager button{min-width:40px;height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:#fff;font-size:14px}
.pager button[aria-current=page]{border:0;background:var(--ink);color:#fff;font-weight:700}
.pager button:disabled{opacity:.4}
.empty{padding:40px 20px;text-align:center;color:var(--mute);font-size:14px}
.loading{padding:30px;text-align:center;color:var(--mute);font-size:14px}

/* 목록 지도 버튼 */
.mapwrap{position:relative}
.map.big{height:70vh;height:70dvh}
.mapbig{position:absolute;left:12px;bottom:12px;z-index:3;min-height:36px;padding:0 12px;border-radius:18px;border:0;background:#fff;color:var(--ink);font-size:13px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.rowwrap{display:flex;align-items:stretch;border-bottom:1px solid #F0F2F0}
.rowwrap .row{border-bottom:0;flex:1;min-width:0;padding-right:8px}
.mapb{flex:none;width:56px;border:0;border-left:1px solid #F0F2F0;background:#fff;color:var(--mute2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px}
.mapb:active{background:var(--soft)}
.pmapbox{margin:0 0 6px}
.pmap{height:200px;margin:0 16px;border-radius:16px;overflow:hidden}
/* 가게 보기 */
.pbody{padding:0 20px 14px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:12px;font-size:13px;font-weight:700}
.pbody h1{margin:10px 0 6px;font-size:26px;font-weight:900;letter-spacing:-.5px;line-height:1.3}
.pbody p.ad{margin:0;font-size:14px;color:var(--mute2);line-height:1.55}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hint{margin:6px 0 0;font-size:12px;color:var(--mute)}
.photo{height:240px;background:#CFE3D3 center/cover no-repeat;position:relative}
.photo .src{position:absolute;right:10px;bottom:8px;padding:3px 8px;border-radius:8px;background:rgba(27,36,32,.75);color:#fff;font-size:11px}
.photo .ib{position:absolute;left:10px;top:10px;background:#fff;border-radius:50%}
.ov{margin:10px 0 0;font-size:14px;line-height:1.7;color:#3A4440;white-space:pre-line}
.ov.clip{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.info{display:grid;grid-template-columns:76px 1fr;gap:6px 10px;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--soft);font-size:14px}
.info span:nth-child(odd){color:var(--mute)}
.next{flex:1;background:var(--soft);border-radius:24px 24px 0 0;padding:18px 0 0;margin-top:6px}
.next h2{margin:0 16px 10px;font-size:18px}
.ntabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 16px 10px}
.ntabs .chip{font-size:13px;height:44px;line-height:1.15}
.ncard{display:flex;align-items:center;gap:10px;margin:0 16px 8px;padding:10px 10px 10px 12px;border-radius:14px;background:#fff}
.ncard .tx{flex:1;min-width:0;display:flex;flex-direction:column;border:0;background:transparent;text-align:left;padding:0}
.ncard .tx b{font-size:15px}.ncard .tx span{font-size:13px;color:var(--mute)}
.ncard{cursor:pointer}
.ncard .add:disabled{opacity:1;cursor:default}
.ncard .add{flex:none;height:44px;padding:0 12px;border-radius:12px;border:0;color:#fff;font-size:14px;font-weight:700}

/* 코스 */
.ctitle{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ctitle b{font-size:17px}.ctitle span{font-size:12px;color:var(--mute)}
.tl{padding:14px 16px 4px}
.tli{display:flex;gap:12px}
.tli .rail{flex:none;width:34px;display:flex;flex-direction:column;align-items:center}
.tli .rail .n{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.tli .rail .ln{flex:1;min-height:18px;border-left:3px dotted #9AA59F;margin:3px 0}
.tli:last-child .rail .ln{visibility:hidden}
.tli .bd{flex:1;min-width:0;padding-bottom:10px}
.tli .hd{display:flex;align-items:center;gap:6px}
.tli .hd .tx{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:0}
.tli small.st{font-size:12px;font-weight:700}
.tli .tx b{display:block;font-size:16px}
.tli .tx span{font-size:13px;color:var(--mute)}
.tli .wk{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;color:var(--mute2)}
.miss{margin:0 16px 8px;font-size:13px;color:var(--mute)}
.cbar{padding:10px 16px calc(14px + var(--safeB));display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);margin-top:auto;background:#fff}

/* 내 코스 */
.ph{padding:18px 20px 8px}
.ph h1{margin:0;font-size:24px;font-weight:900;letter-spacing:-.5px}
.ph p{margin:4px 0 0;font-size:13px;color:var(--mute)}
.mtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line)}
.mtabs button{height:48px;border:0;border-bottom:3px solid transparent;background:#fff;font-size:15px;color:var(--mute)}
.mtabs button[aria-pressed=true]{border-bottom-color:var(--ink);color:var(--ink);font-weight:700}
.ccard{display:flex;flex-direction:column;gap:8px;margin:12px 16px 0;padding:14px;border-radius:16px;border:1px solid var(--line);background:#fff}
.ccard .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ccard .h button.t{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:0;font-size:16px;font-weight:700}
.pills{display:flex;gap:4px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:10px;font-size:13px;font-weight:500}
.ccard .m{font-size:12px;color:var(--mute2)}
.addnew{display:flex;align-items:center;justify-content:center;margin:12px 16px;height:52px;border-radius:14px;border:2px dashed #C9D0CC;color:var(--mute2);font-size:15px;font-weight:700;text-decoration:none}

/* 처음 화면 */
.wel{flex:1;display:flex;flex-direction:column;padding:0 24px calc(24px + var(--safeB))}
.wel .mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px}
.wel .lead{margin:0;font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.5px}
.bars{display:flex;gap:8px}.bars i{width:44px;height:8px;border-radius:4px}
.why{padding:16px;border-radius:16px;background:var(--soft)}
.why b{display:block;font-size:16px;margin-bottom:6px}
.why ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:#3A4440}
.legal{margin:6px 0 0;text-align:center;font-size:12px;color:var(--mute)}

#toast{position:fixed;left:50%;bottom:calc(84px + var(--safeB));transform:translateX(-50%);max-width:90%;padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;z-index:100;box-shadow:0 6px 20px rgba(0,0,0,.2)}

/* 지도 핀 */
.pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pin b{transform:rotate(45deg);color:#fff;font-size:12px;font-weight:900}
.pinc{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:15px}
.me{width:16px;height:16px;border-radius:50%;background:#1D4ED8;border:3px solid #fff;box-shadow:0 0 0 6px rgba(29,78,216,.2)}
.iw{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 4px 14px rgba(0,0,0,.2);font-size:13px;min-width:150px;max-width:220px;margin-bottom:46px}
.iw b{display:block;font-size:14px}.iw button{margin-top:6px;width:100%;height:36px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:700}

/* PC */
@media (min-width:1000px){
 #app{max-width:1200px}
 .pc2{display:grid;grid-template-columns:420px 1fr;gap:0;align-items:start}
 .pc2 .lcol{grid-column:1;grid-row:1}
 .pc2 .mapwrap,.pc2 > .map{grid-column:2;grid-row:1;position:sticky;top:60px;margin:0 16px}
 .pc2 .map{height:calc(100vh - 140px);border-radius:18px;overflow:hidden}
 .pc2 .mapbig{display:none}
 .tabbar{max-width:1200px}
}

/* 첫 화면 종류 고르기 (코스 기능 뺀 뒤) */
.cats{padding:0 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.catb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:96px;padding:12px;border-radius:16px;border:1px solid var(--line);background:#fff;text-align:left}
.catb:last-child{grid-column:1/-1;min-height:72px}
.catb .ic{width:36px;height:36px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center}
.catb b{font-size:16px}.catb small{font-size:12px;color:var(--mute);line-height:1.35}
.catb:disabled{opacity:.5}
.quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px}
.ncard .ds{flex:none;text-align:right;font-size:12px;color:var(--mute2)}.ncard .ds b{display:block;font-size:14px;color:var(--ink)}
.ncard .tx{display:flex;flex-direction:column}
.tabbar{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 위쪽 줄 (뒤로 · 제목 · 홈) */
.hdr{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:2px;padding:6px 6px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hdr .ht{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;padding:0 4px}
.hdr .ht b{font-size:21px;letter-spacing:-.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr .ht span{font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr .chg{border:0;background:transparent;color:var(--bapT);font-size:12px;font-weight:700;padding:0 0 0 4px}
.pbody{padding-top:14px}
.ntabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ntabs .chip{font-size:12px;padding:0 2px}

/* 목록 위 종류 5칸 (한 줄에 다 보이게) */
.ctabs5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px 8px 8px;background:#fff;position:sticky;top:57px;z-index:12}
.ctab5{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:62px;padding:4px 2px;border-radius:12px;border:1.5px solid var(--line2);background:#fff;color:var(--ink)}
.ctab5 .ci{display:flex}
.ctab5 b{font-size:12px;line-height:1.2;white-space:nowrap;letter-spacing:-.3px}
.ctab5 small{font-size:11px;opacity:.85;line-height:1.2}
.ctab5[aria-pressed=true] small{opacity:1}

.hlogo{flex:none;display:flex;align-items:center;min-height:44px;padding:0 10px 0 6px;font-weight:900;font-size:25px;letter-spacing:-1px;text-decoration:none}
.hlogo .l1{color:var(--bap)}.hlogo .l2{color:var(--cafe)}

/* 종류 5칸: 진한 바탕 + 흰 글씨, 고른 칸은 검은 테두리와 아래 표시 */
.ctab5{color:#fff;border-width:2px;opacity:1;position:relative}
.ctab5 .ci{color:#fff}
.ctab5 b{color:#fff;font-weight:800}
.ctab5 small{color:#fff;opacity:.9}
.ctab5[aria-pressed=true]{opacity:1;box-shadow:0 0 0 2px #fff inset,0 0 0 2px #1B2420;transform:translateY(-1px)}
.ctab5[aria-pressed=true]::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:#1B2420}

/* 거리 버튼: 고르지 않은 것은 옅은 바탕 */
.seg .chip{background:#C9D2CD;border-color:#C9D2CD;color:#1B2420;font-weight:600}
.seg .chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

.lseg{padding:10px 8px 12px;gap:4px}
.lseg .chip{height:36px;font-size:13px}

/* 세부 종류 버튼: 그 종류 색의 연한 파스텔 바탕, 고른 것은 진하게 */
.kinds[style] .kind{background:var(--ks);border-color:var(--ks);color:var(--kt);font-weight:600}
.kinds[style] .kind[aria-pressed=true]{background:var(--kc);border-color:var(--kc);color:#fff;font-weight:700}

/* 첫 화면 배너 */
.banner{margin:4px 16px 12px;padding:14px 8px 14px 16px;border-radius:20px;background:#FFF3EC;display:flex;align-items:center;gap:4px;min-height:120px;overflow:hidden}
.banner .btx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.banner .btx b{font-size:19px;line-height:1.35;letter-spacing:-.5px;color:var(--ink);font-weight:800}
.banner .btx span{font-size:12px;color:#7A4A36;font-weight:500}
.banner .bart{flex:none;width:132px;height:106px}
/* 찾기 버튼: 같은 진하기의 파란색 */
#h-list{background:#1C66D9}


/* 19세 확인 창 */
.agate{position:fixed;inset:0;z-index:200;background:rgba(27,36,32,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.agbox{width:100%;max-width:360px;background:#fff;border-radius:20px;padding:22px 18px 18px;display:flex;flex-direction:column;gap:8px;text-align:center}
.agbox b{font-size:20px}.agbox p{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--mute2)}
.agbox .btn{font-size:14px}

/* 사진 배너: 5장이 5초씩 돌아감 */
.banner.bimg{position:relative;display:block;padding:0;min-height:0;aspect-ratio:12/5;max-height:260px;background:#F3E6D6}
.bimg>div{position:absolute;inset:0;background-size:cover;background-position:right center;opacity:0;animation:bfade 25s infinite}
.bimg>div:nth-child(1){animation-delay:-1s}.bimg>div:nth-child(2){animation-delay:4s}.bimg>div:nth-child(3){animation-delay:9s}.bimg>div:nth-child(4){animation-delay:14s}.bimg>div:nth-child(5){animation-delay:19s}
@keyframes bfade{0%{opacity:0}4%{opacity:1}20%{opacity:1}24%{opacity:0}100%{opacity:0}}
.banner.bimg .btx{position:absolute;left:0;top:0;bottom:0;width:58%;padding:0 0 0 16px;display:flex;flex-direction:column;justify-content:center;gap:6px;background:linear-gradient(90deg,rgba(255,246,236,.92) 0,rgba(255,246,236,.75) 65%,rgba(255,246,236,0) 100%)}
.banner.bimg .btx b{font-size:18px}
.banner.bimg .btx span{color:#6B4430;font-weight:600}
.bimg .bdk{background-position:center}
.banner.bimg .bdk .btx{background:linear-gradient(90deg,rgba(20,14,30,.82) 0,rgba(20,14,30,.6) 65%,rgba(20,14,30,0) 100%)}
.banner.bimg .bdk .btx b{color:#fff}.banner.bimg .bdk .btx span{color:#FFD8B8}
@media (prefers-reduced-motion:reduce){.bimg>div{animation:none}.bimg>div:first-child{opacity:1}}
.banner.bimg.bslim{aspect-ratio:3/1;max-height:170px;margin-top:8px;margin-bottom:4px}
.banner.bslim .btx b{font-size:16px}.banner.bslim .btx span{font-size:11px}