/* 캠피싱 KREFT — 서브페이지 공용 스타일 */
:root{
  --blue:#2fb8e6; --blue-deep:#1a9fd4; --blue-ink:#0f6f96;
  --emerald:#31c98d; --lime:#8ede4f; --lime-deep:#69c637;
  --yellow:#ffd23f; --yellow-deep:#f7b500;
  --ink:#20414d; --ink-soft:#4d6b78; --line:#e0eef3;
  --bg:#f2fafc; --card:#fff; --sky1:#e8f7fb;
  --shadow:0 14px 40px rgba(15,80,110,.16); --shadow-sm:0 4px 16px rgba(15,80,110,.1);
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans KR",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1080px,92vw);margin:0 auto}
h1,h2,h3{font-weight:900;letter-spacing:-.02em}

/* 헤더 */
header.site{background:linear-gradient(180deg,#0b1a22,#123645);color:#fff}
header.site .bar{display:flex;align-items:center;gap:16px;height:70px;width:100%;padding:0 clamp(20px,3.5vw,56px)}
header.site .logo img{height:44px}
header.site nav{margin-left:12px;display:flex;gap:3px;flex-wrap:wrap}
header.site nav a{padding:8px 13px;border-radius:9px;color:#cfe1e8;font-weight:700;font-size:15.5px;white-space:nowrap;transition:.15s}
header.site nav a:hover,header.site nav a.on{color:#fff;background:rgba(255,255,255,.12)}
header.site .right{margin-left:auto;display:flex;align-items:center;gap:12px}
header.site .right a{color:#9db6c1;font-size:13.5px;font-weight:500;white-space:nowrap}
header.site .right a:hover{color:#fff}
header.site .me{color:#ffd23f;font-weight:700;font-size:14px;white-space:nowrap}
header.site .play{background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));
  color:#5a3d00;font-weight:800;padding:11px 20px;border-radius:12px;white-space:nowrap;font-size:15px}

/* 페이지 타이틀 */
.phead{background:linear-gradient(120deg,#2fb8e6,#31c98d);color:#fff;padding:34px 0 30px;margin-bottom:26px}
.phead h1{margin:0 0 6px;font-size:clamp(25px,4vw,35px)}
.phead p{margin:0;opacity:.93;font-size:15px}

/* 공통 요소 */
.sec-head{display:flex;align-items:flex-end;gap:12px;margin:34px 0 18px}
.sec-head h2{font-size:clamp(21px,3vw,27px);color:var(--blue-ink);margin:0}
.sec-head .sub{color:var(--ink-soft);font-size:14.5px;font-weight:500;padding-bottom:3px}
.grid{display:grid;gap:18px}
.grid.n2{grid-template-columns:repeat(2,1fr)}
.grid.n3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;transition:.18s}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:16px;padding:12px 24px;border-radius:13px;transition:.15s}
.btn-play{background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));color:#5a3d00}
.btn-play:hover{transform:translateY(-2px)}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--blue);color:var(--blue-ink)}

/* 본문 카드 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:28px clamp(20px,3.5vw,36px);margin-bottom:20px}
.panel h3{margin:0 0 12px;font-size:20px;color:var(--blue-ink)}
.panel p{margin:0 0 12px;font-size:15.5px;line-height:1.85;color:#33525f}
.panel p:last-child{margin-bottom:0}
.panel b{color:var(--ink)}
.panel ul{margin:0;padding-left:20px;color:#33525f;font-size:15.5px;line-height:1.9}
.icon{font-size:30px;margin-bottom:10px}
.tip{background:var(--sky1);border-radius:12px;padding:14px 18px;font-size:14.5px;
  color:var(--blue-ink);line-height:1.7;margin:14px 0 0}

/* 스텝 */
.steps{counter-reset:st;display:grid;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start}
.step .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue-ink);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px}
.step .t{font-size:15.5px;line-height:1.75;color:#33525f}
.step .t b{color:var(--ink)}

footer.site{margin-top:50px;background:#14303b;color:#a9c6d0;padding:32px 0 52px;font-size:13px;line-height:1.9}
footer.site a{color:#8fd0e6}
footer.site b{color:#cfe3ea}

@media (max-width:820px){
  header.site .bar{height:auto;padding:12px 16px;flex-wrap:wrap;gap:10px}
  header.site nav{width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}
  header.site nav::-webkit-scrollbar{display:none}
  header.site .right{margin-left:0;width:100%;justify-content:space-between}
  .grid.n2,.grid.n3{grid-template-columns:1fr}
}


/* 📱 모바일: 푸터·인라인 링크 터치 영역 확보(19px → 40px) */
@media (max-width:760px){
  footer.site a{display:inline-block;padding:11px 5px;line-height:1.3}
  header.site .right a{display:inline-block;padding:10px 2px}
}