/* ============================================================
   통신킹 — 제도 안내 (Regulations) 페이지 스타일
   - 루트 .tk 스코프 + .tk-reg 페이지 스코프
   - tk-system.css 토큰을 사용
   ============================================================ */

.tk-reg{padding:32px 0 96px;background:var(--tk-bg);}
.tk-reg-wrap{max-width:1240px;margin:0 auto;padding:0 20px;}

/* ----- 브레드크럼 ----- */
.tk-reg-crumbs{
    display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
    font-size:.85rem;color:var(--tk-muted) !important;margin-bottom:1rem;
}
.tk-reg-crumbs a{color:var(--tk-muted) !important;text-decoration:none;}
.tk-reg-crumbs a:hover{color:var(--tk-brand) !important;}
.tk-reg-crumbs .sep{opacity:.5;}
.tk-reg-crumbs .here{color:var(--tk-ink) !important;font-weight:700;}

/* ----- 레이아웃 ----- */
.tk-reg-layout{
    display:grid;grid-template-columns:1fr;gap:2rem;
    align-items:start;
}
@media (min-width:992px){
    .tk-reg-layout{grid-template-columns:260px 1fr;gap:2.4rem;}
}

/* ----- 본문 헤더 ----- */
.tk-reg-head{margin-bottom:1.8rem;}
.tk-reg-head .eyebrow{
    display:inline-block;font-size:.78rem;font-weight:800;
    color:var(--tk-brand) !important;background:var(--tk-brand-soft);
    padding:.35rem .85rem;border-radius:var(--tk-r-full);margin-bottom:.85rem;
}
.tk-reg-head h1{
    font-size:clamp(1.7rem,4vw,2.4rem) !important;
    font-weight:900;color:var(--tk-ink) !important;
    line-height:1.18;letter-spacing:-0.035em;margin-bottom:.7rem;
}
.tk-reg-head .lead{
    font-size:clamp(.98rem,1.5vw,1.1rem);color:var(--tk-muted) !important;
    line-height:1.65;max-width:780px;
}

/* ----- 본문 카드 ----- */
.tk-reg-card{
    background:#fff;border:1px solid var(--tk-line);
    border-radius:var(--tk-r-lg);box-shadow:var(--tk-shadow-sm);
    padding:clamp(1.2rem,3vw,2rem);
    margin-bottom:1.4rem;
}
.tk-reg-card .ttl{
    display:flex;align-items:center;gap:.6rem;
    font-size:clamp(1.05rem,2.3vw,1.35rem);font-weight:900;
    color:var(--tk-ink) !important;margin-bottom:1rem;line-height:1.3;
}
.tk-reg-card .ttl .ic{
    width:36px;height:36px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:10px;background:var(--tk-brand-soft);
    color:var(--tk-brand) !important;font-size:1.1rem;
}
.tk-reg-card .ttl .ic.accent{background:var(--tk-accent-soft);color:var(--tk-accent) !important;}
.tk-reg-card .ttl .ic.good{background:var(--tk-good-soft);color:var(--tk-good) !important;}
.tk-reg-card .ttl .ic.warn{background:var(--tk-warn-soft);color:var(--tk-warn) !important;}
.tk-reg-card .ttl .ic.danger{background:var(--tk-danger-soft);color:var(--tk-danger) !important;}
.tk-reg-card .ttl .ic.info{background:var(--tk-info-soft);color:var(--tk-info) !important;}
.tk-reg-card .desc{color:var(--tk-muted) !important;line-height:1.65;font-size:.98rem;}

.tk-reg-card h3{
    font-size:1.1rem !important;font-weight:800;
    color:var(--tk-ink) !important;line-height:1.3;
    margin:1.4rem 0 .7rem !important;
}
.tk-reg-card h3:first-child{margin-top:0 !important;}
.tk-reg-card h4{
    font-size:.98rem !important;font-weight:800;
    color:var(--tk-ink) !important;
    margin:1rem 0 .5rem !important;line-height:1.3;
}

/* ----- 리스트 ----- */
.tk-reg-list{margin:0;padding:0;list-style:none;}
.tk-reg-list li{
    position:relative;padding:.55rem 0 .55rem 1.6rem;
    color:var(--tk-ink-soft) !important;line-height:1.65;font-size:.98rem;
}
.tk-reg-list li::before{
    content:"";position:absolute;left:.2rem;top:1.05rem;
    width:6px;height:6px;border-radius:50%;background:var(--tk-brand);
}
.tk-reg-list li strong{color:var(--tk-ink) !important;}

.tk-reg-list.check li{padding-left:1.9rem;}
.tk-reg-list.check li::before{
    content:"\F26B";font-family:"bootstrap-icons";
    background:transparent;width:auto;height:auto;
    left:0;top:.55rem;font-size:.95rem;
    color:var(--tk-good) !important;border-radius:0;
}
.tk-reg-list.danger li::before{background:var(--tk-danger);}
.tk-reg-list.warn li::before{background:var(--tk-warn);}

/* ----- 라벨이 있는 항목 ----- */
.tk-reg-item{
    background:var(--tk-bg-soft);
    border:1px solid var(--tk-line-2);
    border-radius:var(--tk-r-md);
    padding:1rem 1.1rem;margin-bottom:.7rem;
}
.tk-reg-item .key{
    display:inline-block;
    color:var(--tk-brand) !important;font-weight:900;
    font-size:.95rem;margin-bottom:.3rem;
}
.tk-reg-item .val{
    color:var(--tk-ink-soft) !important;font-size:.95rem;line-height:1.6;
}

/* ----- 뱃지 ----- */
.tk-reg-badge{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.25rem .7rem;border-radius:var(--tk-r-full);
    font-size:.78rem;font-weight:800;line-height:1.4;
    white-space:nowrap;
}
.tk-reg-badge.must{background:var(--tk-danger-soft);color:var(--tk-danger) !important;}
.tk-reg-badge.rec{background:var(--tk-brand-soft);color:var(--tk-brand) !important;}
.tk-reg-badge.info{background:var(--tk-info-soft);color:var(--tk-info) !important;}
.tk-reg-badge.good{background:var(--tk-good-soft);color:var(--tk-good) !important;}
.tk-reg-badge.warn{background:var(--tk-warn-soft);color:var(--tk-warn) !important;}
.tk-reg-badge.muted{background:var(--tk-bg-soft);color:var(--tk-muted) !important;border:1px solid var(--tk-line);}

/* ----- 강조 박스 ----- */
.tk-reg-callout{
    display:flex;gap:.95rem;align-items:flex-start;
    padding:1.1rem 1.2rem;border-radius:var(--tk-r-md);
    margin-bottom:1.1rem;
    border:1px solid transparent;
}
.tk-reg-callout .ic{
    flex:none;width:32px;height:32px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1rem;
}
.tk-reg-callout .body{flex:1;}
.tk-reg-callout .body strong{color:inherit !important;display:block;margin-bottom:.2rem;}
.tk-reg-callout .body p{color:inherit !important;font-size:.92rem;line-height:1.6;}
.tk-reg-callout.info{background:#f0f9ff;border-color:#bae6fd;color:#075985 !important;}
.tk-reg-callout.info .ic{background:#bae6fd;color:#075985 !important;}
.tk-reg-callout.warn{background:#fffbeb;border-color:#fde68a;color:#92400e !important;}
.tk-reg-callout.warn .ic{background:#fde68a;color:#92400e !important;}
.tk-reg-callout.danger{background:#fef2f2;border-color:#fecaca;color:#991b1b !important;}
.tk-reg-callout.danger .ic{background:#fecaca;color:#991b1b !important;}
.tk-reg-callout.good{background:#ecfdf5;border-color:#a7f3d0;color:#065f46 !important;}
.tk-reg-callout.good .ic{background:#a7f3d0;color:#065f46 !important;}
.tk-reg-callout.brand{background:var(--tk-brand-soft);border-color:#d4cdfc;color:var(--tk-brand-deep) !important;}
.tk-reg-callout.brand .ic{background:#d4cdfc;color:var(--tk-brand-deep) !important;}

/* ----- 표 ----- */
.tk-reg-table-wrap{
    border:1px solid var(--tk-line);
    border-radius:var(--tk-r-md);
    overflow:hidden;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:#fff;
}
.tk-reg-table{
    width:100%;border-collapse:collapse;
    min-width:560px;font-size:.93rem;
}
.tk-reg-table.wide{min-width:780px;}
.tk-reg-table thead th{
    background:var(--tk-bg-soft);
    color:var(--tk-ink) !important;
    font-weight:800;text-align:left;
    padding:.85rem 1rem;
    border-bottom:1px solid var(--tk-line);
    white-space:nowrap;
}
.tk-reg-table tbody td{
    padding:.85rem 1rem;
    color:var(--tk-ink-soft) !important;
    border-bottom:1px solid var(--tk-line-2);
    line-height:1.5;
}
.tk-reg-table tbody tr:last-child td{border-bottom:0;}
.tk-reg-table tfoot td{
    padding:.95rem 1rem;
    background:var(--tk-bg-soft);
    color:var(--tk-ink) !important;
    border-top:2px solid var(--tk-line);
    font-weight:800;
}
.tk-reg-table .center{text-align:center;}
.tk-reg-table .right{text-align:right;font-variant-numeric:tabular-nums;}
.tk-reg-table .strong{color:var(--tk-ink) !important;font-weight:700;}
.tk-reg-table .danger{color:var(--tk-danger) !important;font-weight:800;}

/* ----- 미니 키-밸류 그리드 ----- */
.tk-reg-kv{
    display:grid;grid-template-columns:1fr;gap:.7rem;
}
@media (min-width:640px){.tk-reg-kv{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){.tk-reg-kv.cols-3{grid-template-columns:repeat(3,1fr);}}
@media (min-width:900px){.tk-reg-kv.cols-4{grid-template-columns:repeat(4,1fr);}}

.tk-reg-kv .item{
    background:#fff;border:1px solid var(--tk-line);
    border-radius:var(--tk-r-md);
    padding:1rem 1.1rem;
}
.tk-reg-kv .item .lbl{
    font-size:.78rem;font-weight:800;
    color:var(--tk-muted) !important;
    letter-spacing:.04em;text-transform:uppercase;
    margin-bottom:.3rem;
}
.tk-reg-kv .item .val{
    font-size:1.05rem;font-weight:800;color:var(--tk-ink) !important;
    line-height:1.4;
}
.tk-reg-kv .item .sub{
    margin-top:.3rem;font-size:.85rem;
    color:var(--tk-muted) !important;line-height:1.5;
}

/* ----- 단계 그리드 ----- */
.tk-reg-steps{
    display:grid;grid-template-columns:1fr;gap:.85rem;
}
@media (min-width:640px){.tk-reg-steps{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){.tk-reg-steps{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}}
.tk-reg-step{
    background:#fff;border:1px solid var(--tk-line);
    border-radius:var(--tk-r-md);
    padding:1.1rem;
    position:relative;
}
.tk-reg-step .num{
    width:30px;height:30px;border-radius:50%;
    background:var(--tk-brand);color:#fff !important;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:900;font-size:.85rem;margin-bottom:.65rem;
}
.tk-reg-step h4{
    font-size:1rem !important;font-weight:800;
    color:var(--tk-ink) !important;line-height:1.3;
    margin:0 0 .35rem !important;
}
.tk-reg-step p{
    font-size:.86rem;color:var(--tk-muted) !important;
    line-height:1.5;margin:0;
}

/* ----- 등급(특/고/중/초) 색상 박스 ----- */
.tk-reg-grade{
    display:grid;grid-template-columns:1fr;gap:1.2rem;
    margin-bottom:1.4rem;
}
@media (min-width:768px){.tk-reg-grade{grid-template-columns:1fr 1.5fr;}}
.tk-reg-grade .head{
    border-radius:var(--tk-r-md);
    padding:1.4rem;color:#fff;
    display:flex;flex-direction:column;justify-content:center;
}
.tk-reg-grade .head .lvl{
    font-size:.78rem;font-weight:800;letter-spacing:.08em;
    opacity:.95;margin-bottom:.5rem;text-transform:uppercase;
}
.tk-reg-grade .head .name{
    font-size:clamp(1.3rem,3vw,1.7rem);font-weight:900;
    color:#fff !important;letter-spacing:-0.03em;
    margin-bottom:.3rem;line-height:1.2;
}
.tk-reg-grade .head .desc{color:rgba(255,255,255,.92) !important;font-size:.92rem;line-height:1.5;}
.tk-reg-grade.special .head{background:linear-gradient(135deg,#f59e0b,#d97706);}
.tk-reg-grade.advanced .head{background:linear-gradient(135deg,#10b981,#059669);}
.tk-reg-grade.middle .head{background:linear-gradient(135deg,var(--tk-brand),var(--tk-brand-2));}
.tk-reg-grade.beginner .head{background:linear-gradient(135deg,#475569,#334155);}
.tk-reg-grade .body{
    display:flex;flex-direction:column;gap:.85rem;
}

/* ----- 페이지 하단 prev/next ----- */
.tk-reg-pager{
    display:grid;grid-template-columns:1fr;gap:.8rem;
    margin-top:2rem;
}
@media (min-width:640px){.tk-reg-pager{grid-template-columns:1fr 1fr;}}
.tk-reg-pager a{
    display:flex;align-items:center;gap:.8rem;
    padding:1.05rem 1.2rem;
    border:1px solid var(--tk-line);
    border-radius:var(--tk-r-md);
    background:#fff;text-decoration:none;
    transition:border-color var(--tk-tr-fast), transform var(--tk-tr-fast), box-shadow var(--tk-tr-fast);
}
.tk-reg-pager a:hover{border-color:var(--tk-brand);transform:translateY(-2px);box-shadow:var(--tk-shadow-sm);}
.tk-reg-pager a .ic{
    width:36px;height:36px;flex:none;border-radius:50%;
    background:var(--tk-brand-soft);color:var(--tk-brand) !important;
    display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.tk-reg-pager a .meta{
    font-size:.75rem;font-weight:700;color:var(--tk-muted) !important;
    text-transform:uppercase;letter-spacing:.08em;
}
.tk-reg-pager a .title{
    font-size:1rem;font-weight:800;color:var(--tk-ink) !important;line-height:1.3;
}
.tk-reg-pager a.next{justify-content:flex-end;text-align:right;flex-direction:row-reverse;}
.tk-reg-pager a.next .title{text-align:right;}

/* ----- 빠른 액션 CTA ----- */
.tk-reg-cta{
    margin-top:1.6rem;
    background:linear-gradient(120deg,var(--tk-brand) 0%, #6d5ee5 60%, var(--tk-brand-2) 100%);
    border-radius:var(--tk-r-xl);
    padding:clamp(1.4rem,3vw,2rem);
    color:#fff;
    box-shadow:var(--tk-shadow-lg);
    display:grid;gap:1.2rem;
    grid-template-columns:1fr;
    align-items:center;
}
@media (min-width:768px){
    .tk-reg-cta{grid-template-columns:1.4fr auto;}
}
.tk-reg-cta h3{font-size:clamp(1.05rem,2vw,1.3rem) !important;color:#fff !important;margin-bottom:.4rem !important;line-height:1.3;}
.tk-reg-cta p{color:rgba(255,255,255,.92) !important;font-size:.95rem;line-height:1.55;}
.tk-reg-cta .acts{display:flex;flex-wrap:wrap;gap:.6rem;}
.tk-reg-cta .acts .tk-btn{min-height:46px;padding:.78rem 1.3rem;font-size:.95rem;}
.tk-reg-cta .acts .tk-btn-accent{background:#fff;color:var(--tk-brand) !important;box-shadow:0 12px 24px -8px rgba(0,0,0,.18);}
.tk-reg-cta .acts .tk-btn-accent:hover{transform:translateY(-2px);color:var(--tk-brand) !important;}
.tk-reg-cta .acts .tk-btn-light{background:rgba(255,255,255,.16);color:#fff !important;border:1.5px solid rgba(255,255,255,.4);}
.tk-reg-cta .acts .tk-btn-light:hover{background:rgba(255,255,255,.28);color:#fff !important;}

/* ----- 비용 카드 (가격용) ----- */
.tk-reg-price{
    background:#fff;border:1px solid var(--tk-line);
    border-radius:var(--tk-r-md);
    padding:1.2rem 1.3rem;
}
.tk-reg-price .lbl{
    font-size:.78rem;font-weight:800;color:var(--tk-muted) !important;
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;
}
.tk-reg-price .amt{
    font-size:clamp(1.3rem,3vw,1.8rem);font-weight:900;
    color:var(--tk-brand) !important;line-height:1.2;
    font-variant-numeric:tabular-nums;
}
.tk-reg-price .amt .unit{font-size:.85rem;color:var(--tk-muted) !important;font-weight:700;}
.tk-reg-price.danger .amt{color:var(--tk-danger) !important;}
.tk-reg-price.good .amt{color:var(--tk-good) !important;}
.tk-reg-price .sub{margin-top:.4rem;font-size:.85rem;color:var(--tk-muted) !important;line-height:1.5;}