/* 공개판 보조 페이지(소개·도구·안내) 스타일 — 앱 style.css 위에 얹음 */
.page main{max-width:900px}
.topnav{display:flex;gap:4px;flex-wrap:wrap}
.topnav a{color:#c9cbd3;text-decoration:none;font-weight:700;font-size:14px;padding:8px 12px;border-radius:10px}
.topnav a:hover{background:#24262c;color:#fff}
@media(max-width:600px){header{padding:18px 16px}.topnav a{padding:6px 8px;font-size:13px}.page main{padding:22px 16px}}
.wrap .hero{padding:8px 0 20px}
.lead{color:#c9cbd3;font-size:17px;line-height:1.7;max-width:640px;margin:10px 0 0}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 20px;border-radius:14px;border:1px solid #3a3b41;background:#1e1f23;color:#fff;font:inherit;font-weight:800;font-size:15px;text-decoration:none;cursor:pointer}
.btn.primary{background:#ceff5f;border-color:#ceff5f;color:#141517}
.btn.quiet{background:transparent;color:#c9cbd3}
.btn.big{font-size:18px;padding:16px 32px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.shot{display:block;width:100%;max-width:560px;height:auto;border-radius:18px;border:1px solid #34353a;margin:4px 0 8px}
.content{display:grid;gap:14px;margin-top:14px}
.card{background:#1e1f23;border:1px solid #34353a;border-radius:20px;padding:22px}
.card h2{margin:0 0 10px;font-size:20px;letter-spacing:-.5px}
.card h3{margin:16px 0 6px;font-size:16px}
.card p,.card li{color:#d6d8de;line-height:1.75;font-size:15px}
.card p{margin:0 0 10px}.card p:last-child{margin:0}
.card ul,.card ol{padding-left:20px;margin:0 0 10px}
.card a{color:#ceff5f}
.steps{list-style:none;padding:0!important;counter-reset:s;display:grid;gap:10px;margin:0 0 12px!important}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start}
.steps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:#ceff5f;color:#141517;font-weight:900;font-size:13px;display:grid;place-items:center;margin-top:2px}
.tip{background:#172000;border:1px solid #2f4200;border-radius:12px;padding:10px 14px;font-size:14px;color:#dfffa3}
.faq details{border-bottom:1px solid #34353a;padding:4px 0}.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:800;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:12px;color:#fff}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:#ceff5f;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.grid-title{font-size:20px;margin:28px 0 12px;letter-spacing:-.5px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gcard{display:block;background:#1e1f23;border:1px solid #34353a;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;transition:.15s}
.gcard:hover{border-color:#ceff5f;transform:translateY(-2px)}
.gcard img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.gcard span{display:block;padding:12px 14px}.gcard b{display:block;font-size:15px}.gcard small{display:block;color:#9d9fa8;font-size:13px;margin-top:2px}
.ad-slot{margin:18px 0;min-height:0}.ad-slot:empty{display:none}
.sitefoot{max-width:1240px;margin:40px auto 0;padding:28px 36px 44px;border-top:1px solid #303135;color:#9d9fa8;font-size:14px}
@media(max-width:600px){.sitefoot{padding:24px 16px 40px}}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-bottom:18px}
.sitefoot h4{margin:0 0 8px;color:#fff;font-size:14px}.sitefoot ul{list-style:none;padding:0;margin:0}.sitefoot li{margin:5px 0}.sitefoot a{color:#9d9fa8;text-decoration:none}.sitefoot a:hover{color:#fff}
/* 앱 홈에 끼우는 소개 블록 */
.seo-block{margin:34px 0 10px;padding:24px;background:#1e1f23;border:1px solid #34353a;border-radius:20px}
.seo-block h2{margin:0 0 6px;font-size:20px}.seo-block h2+p{color:#9d9fa8;margin:0 0 14px;font-size:14px}
.seo-block h2:not(:first-child){margin-top:20px}
.linkwrap{display:flex;flex-wrap:wrap;gap:8px}
.linkwrap a{color:#e9eaef;text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border:1px solid #3a3b41;border-radius:10px;background:#17181c}
.linkwrap a:hover{border-color:#ceff5f;color:#ceff5f}
.linkwrap.tools a{background:#172000;border-color:#2f4200;color:#dfffa3;font-weight:800}
/* 도구 공통 */
.toolbox{background:#1e1f23;border:1px solid #34353a;border-radius:22px;padding:22px;margin-top:6px}
.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:700px){.tool-row{grid-template-columns:1fr}}
.tool-col label{display:block;font-weight:800;font-size:14px;margin:10px 0 6px;color:#fff}
.tool-col.center{text-align:center}
.toolbox .input-row{display:flex;gap:8px}
.toolbox input[type=text],.toolbox input:not([type]),.toolbox input[type=number],.toolbox textarea{flex:1;width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid #3a3b41;background:#141517;color:#fff}
.toolbox textarea{resize:vertical;line-height:1.6}
.toolbox .add{width:46px;border-radius:12px;border:0;background:#ceff5f;color:#141517;font-size:22px;font-weight:900;cursor:pointer}
.toolbox .chips{display:flex;flex-wrap:wrap;gap:6px;min-height:20px;margin-bottom:8px}
.toolbox .chip{font:inherit;font-size:13px;font-weight:700;padding:6px 10px;border-radius:999px;border:1px solid #3a3b41;background:#17181c;color:#e9eaef;cursor:pointer}
.toolbox .chip:hover{border-color:#ff8a5f;color:#ff8a5f}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.toolbox .hint{color:#9d9fa8;font-size:13px;line-height:1.6;margin:6px 0 0}.hint.center{text-align:center}
#lCanvas{display:block;margin:12px auto;max-width:100%;cursor:pointer;background:#141517;border-radius:14px;border:1px solid #2a2b30}
.results{display:grid;gap:6px;max-width:420px;margin:8px auto 0}
.res-row{display:flex;justify-content:space-between;padding:10px 14px;background:#141517;border-radius:10px;font-weight:700}
.wheel-wrap{position:relative;width:min(320px,86vw);margin:4px auto 14px}
.wheel-wrap canvas{width:100%;height:auto;display:block}
.pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);color:#ff8a5f;font-size:30px;text-shadow:0 2px 6px #000;z-index:2}
.preset-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:13px;color:#9d9fa8}
.preset-row button{font:inherit;font-size:13px;font-weight:700;padding:6px 10px;border-radius:8px;border:1px solid #3a3b41;background:#17181c;color:#e9eaef;cursor:pointer}
.check{display:block;margin:12px 0 0;font-size:14px;color:#c9cbd3}
.result-big{min-height:44px;margin-top:14px;font-size:26px;font-weight:900;color:#ceff5f}
.toolbox .seg{display:flex;gap:6px;flex-wrap:wrap}
.toolbox .seg button{font:inherit;font-size:14px;font-weight:700;padding:9px 14px;border-radius:10px;border:1px solid #3a3b41;background:#17181c;color:#c9cbd3;cursor:pointer}
.toolbox .seg button.on{background:#ceff5f;border-color:#ceff5f;color:#141517}
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:18px}
.team{background:#141517;border:1px solid #2a2b30;border-radius:16px;padding:14px}
.team h3{margin:0 0 8px;color:#ceff5f;font-size:17px}.team h3 small{color:#9d9fa8;font-weight:600;font-size:13px}
.team span{display:inline-block;margin:3px 4px 3px 0;padding:5px 10px;background:#1e1f23;border-radius:8px;font-weight:700;font-size:14px}
.article .card h2{margin-top:6px}
/* 상황별 추천 */
.picks{gap:12px}
.card.pick{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.card.pick img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid #34353a}
.card.pick h2{margin:0 0 6px}.card.pick h2 a{color:#fff;text-decoration:none}.card.pick h2 a:hover{color:#ceff5f}
.pick-no{margin:0 0 4px!important;color:#ceff5f;font-weight:900;font-size:13px;letter-spacing:1px}
.pick-no::before{content:"NO. "}
.pick-meta{color:#9d9fa8!important;font-size:13px!important}
.card.pick .cta-row{margin-top:10px}.card.pick .btn{padding:10px 16px;font-size:14px}
.pick-icon{display:grid;place-items:center;aspect-ratio:16/10;border-radius:14px;background:#172000;border:1px solid #2f4200;font-size:56px}
@media(max-width:640px){.card.pick{grid-template-columns:1fr;gap:12px}}
.sitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.sitcard{display:block;padding:20px;background:#1e1f23;border:1px solid #34353a;border-radius:18px;text-decoration:none;color:#fff;transition:.15s}
.sitcard:hover{border-color:#ceff5f;transform:translateY(-2px)}
.sitcard b{display:block;font-size:18px}.sitcard small{display:block;color:#9d9fa8;font-size:13px;margin-top:6px}
.page{word-break:keep-all;overflow-wrap:break-word}
.page header .brand{white-space:nowrap;flex:none}
@media(max-width:640px){.page header{flex-wrap:wrap;gap:8px}.page .topnav{width:100%;margin-left:-8px}.pick-icon{aspect-ratio:auto;height:96px;font-size:44px}}
@media(max-width:640px){.page .topnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.page .topnav::-webkit-scrollbar{display:none}.page .topnav a{white-space:nowrap;padding:6px 7px}}