/* 따르릉폰세상 - 휴대폰 정보 공통 스타일 */
:root{
  --navy-deep:#0A1930; --navy-mid:#132A4E; --yellow:#FFC93C; --yellow-deep:#E8A800;
  --paper:#F7F8FA; --ink:#10131A; --muted:#5B6B85; --white:#fff; --line:#E7EAF0;
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Noto Sans KR',sans-serif; background:var(--paper); color:var(--ink);
  font-size:16px; line-height:1.75; -webkit-text-size-adjust:100%;
}
a{color:inherit;}
img{max-width:100%;}
.display{font-family:'Black Han Sans',sans-serif; letter-spacing:.5px;}

/* header */
header{position:sticky; top:0; z-index:50; background:var(--navy-deep); border-bottom:1px solid rgba(255,255,255,.08);}
.header-inner{max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px;}
.logo{display:flex; align-items:center; gap:10px; color:var(--white); text-decoration:none; min-width:0;}
.logo-icon{
  width:36px; height:36px; flex:none; border-radius:10px; background-size:cover;
  background-image:url(/images/logo.png);
}
.logo-text{font-size:19px; white-space:nowrap;}
.main-nav{display:flex; gap:24px; margin-left:auto; flex-wrap:wrap;}
.main-nav a{color:#C9D4E6; text-decoration:none; font-size:14.5px; font-weight:500;}
.main-nav a:hover,.main-nav a.on{color:var(--yellow);}
.header-phone{
  background:transparent; border:1px solid rgba(255,255,255,.28); color:var(--yellow);
  padding:8px 14px; border-radius:999px; text-decoration:none; font-weight:700; font-size:14px; white-space:nowrap;
}

/* page head */
.page-head{background:linear-gradient(180deg,var(--navy-deep),#0d2140); color:var(--white); padding:44px 24px 40px;}
.wrap{max-width:820px; margin:0 auto;}
.wrap-wide{max-width:1180px; margin:0 auto;}
.crumb{font-size:12.5px; color:#9FB0CB; margin-bottom:14px;}
.crumb a{color:#9FB0CB; text-decoration:none;}
.crumb a:hover{color:var(--yellow);}
.page-head h1{font-size:clamp(26px,4vw,38px); line-height:1.35; margin:0 0 12px; letter-spacing:-.5px;}
.page-head .lead{color:#B9C4D9; font-size:16px; margin:0;}
.meta-row{margin-top:18px; font-size:12.5px; color:#8FA0BC;}

/* article */
main{padding:0 24px 64px;}
.article{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 40px; margin-top:-24px; position:relative;
}
.article h2{
  font-size:23px; margin:44px 0 14px; padding-top:8px; color:var(--navy-deep); line-height:1.4;
  border-top:2px solid var(--navy-deep); padding-top:18px;
}
.article h2:first-child{margin-top:0;}
.article h3{font-size:17.5px; margin:26px 0 8px; color:var(--navy-deep);}
.article p{margin:0 0 16px;}
.article ul,.article ol{margin:0 0 18px; padding-left:22px;}
.article li{margin-bottom:8px;}
.article strong{color:var(--navy-deep);}
.toc{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin-bottom:8px;}
.toc h2{all:unset; display:block; font-size:14px; font-weight:700; color:var(--muted); margin-bottom:10px;}
.toc ol{margin:0; padding-left:20px; font-size:14.5px;}
.toc a{color:var(--navy-deep); text-decoration:none;}
.toc a:hover{text-decoration:underline;}
.note{
  background:#FFF7E3; border:1px solid rgba(232,168,0,.35); border-left:4px solid var(--yellow-deep);
  border-radius:10px; padding:16px 18px; margin:0 0 20px; font-size:14.5px;
}
.note strong{display:block; margin-bottom:4px;}
.caution{background:#FFF1F2; border-color:rgba(214,39,60,.3); border-left-color:#D6273C;}
.caution strong{color:#B21E2F;}
table{width:100%; border-collapse:collapse; margin:0 0 22px; font-size:14.5px;}
th,td{border:1px solid var(--line); padding:11px 12px; text-align:left; vertical-align:top;}
th{background:var(--paper); color:var(--navy-deep); font-weight:700; white-space:nowrap;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* faq */
.faq details{border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:10px; background:var(--white);}
.faq summary{cursor:pointer; font-weight:700; color:var(--navy-deep); font-size:15.5px;}
.faq details[open] summary{margin-bottom:10px;}
.faq p{margin:0; font-size:14.5px;}

/* cards (hub) */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-bottom:8px;}
.card{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(10,25,48,.4);}
.card .kicker{font-size:11.5px; font-weight:700; color:var(--yellow-deep); letter-spacing:.4px;}
.card h3{margin:8px 0 8px; font-size:18px; color:var(--navy-deep); line-height:1.4;}
.card p{margin:0; font-size:14px; color:var(--muted); line-height:1.7;}
.card .go{display:inline-block; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--navy-deep);}

/* cta */
.cta-box{
  margin-top:40px; background:linear-gradient(135deg,var(--navy-mid),var(--navy-deep));
  color:var(--white); border-radius:var(--radius); padding:30px 32px;
}
.cta-box h3{margin:0 0 8px; font-size:20px;}
.cta-box p{margin:0 0 18px; color:#B9C4D9; font-size:14.5px;}
.cta-actions{display:flex; gap:10px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:12px 20px; border-radius:10px;
  font-weight:700; font-size:14.5px; text-decoration:none; border:1px solid transparent;
}
.btn-primary{background:var(--yellow); color:var(--navy-deep);}
.btn-primary:hover{background:var(--yellow-deep);}
.btn-kakao{background:#FEE500; color:#191600;}
.btn-ghost{border-color:rgba(255,255,255,.3); color:var(--white);}
.btn-ghost:hover{border-color:var(--yellow); color:var(--yellow);}

/* related */
.related{margin-top:34px; border-top:1px solid var(--line); padding-top:24px;}
.related h3{font-size:15px; color:var(--muted); margin:0 0 12px;}
.related a{display:block; padding:11px 0; border-bottom:1px dashed var(--line); text-decoration:none; color:var(--navy-deep); font-weight:500; font-size:15px;}
.related a:hover{color:var(--yellow-deep);}

/* footer */
footer{background:var(--navy-deep); color:#C9D4E6; padding:40px 24px 34px; font-size:13.5px;}
.footer-inner{max-width:1180px; margin:0 auto;}
.footer-nav{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px;}
.footer-nav a{color:#C9D4E6; text-decoration:none;}
.footer-nav a:hover{color:var(--yellow);}
.precon-box{display:flex; align-items:center; gap:16px; padding:16px 18px; margin-bottom:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px;}
.precon-box img{width:60px; border-radius:5px; background:#fff; display:block;}
.precon-text{font-size:11.5px; line-height:1.7; opacity:.75;}
.precon-text strong{display:block; font-size:12.5px; color:var(--white); opacity:1; margin-bottom:3px;}
.precon-text a{color:var(--yellow); font-weight:700; text-decoration:none;}
.footer-bottom{font-size:12px; line-height:1.9; opacity:.65;}

@media (max-width:860px){
  .header-inner{flex-wrap:wrap; gap:10px 16px; padding:11px 16px;}
  .logo{order:1;}
  .header-phone{order:2; margin-left:auto; padding:6px 12px; font-size:13px;}
  .main-nav{order:3; width:100%; margin-left:0; gap:16px; flex-wrap:nowrap;
    overflow-x:auto; padding-bottom:2px; scrollbar-width:none;}
  .main-nav::-webkit-scrollbar{display:none;}
  .main-nav a{white-space:nowrap; font-size:13.5px;}
  .logo-text{font-size:17px;}
  main{padding:0 16px 48px;}
  .page-head{padding:32px 16px 34px;}
  .article{padding:26px 20px;}
  .article h2{font-size:20px;}
  .precon-box{flex-direction:column; align-items:flex-start;}
}