/*
Theme Name: 오퍼코드
Description: offerscodes.com 전용 테마. "요금표가 정체성인 테크 정보지". 외부 폰트·JS 0.
Author: 오퍼코드 운영팀
Version: 1.0
*/

/* §8 토큰 — 이 6개 밖의 색을 늘리지 않는다. */
:root{
  --bg:#FAFAF8;
  --ink:#1B1F27;
  --sub:#5C6470;
  --line:#E7E5E0;
  --accent:#4F46E5;   /* CTA·링크·요금 숫자에만 */
  --warn:#FFF7E6;
  --wrap:44rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:17px;line-height:1.75;
  word-break:keep-all;overflow-wrap:break-word;
}
@media(min-width:48rem){body{font-size:18px}}

/* 숫자는 자릿수가 흔들리지 않게 */
.oc-price-amt,table,time,.oc-checked{font-variant-numeric:tabular-nums}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.oc-wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}

/* ── 헤더 ── */
.oc-head{border-bottom:1px solid var(--line);background:var(--bg)}
.oc-head-in{display:flex;align-items:baseline;gap:1rem;padding:1.1rem 0;flex-wrap:wrap}
.oc-logo{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.oc-logo span{color:var(--accent)}
.oc-tag{font-size:.82rem;color:var(--sub)}
.oc-nav{margin-left:auto;display:flex;gap:1rem;flex-wrap:wrap}
.oc-nav a{font-size:.9rem;color:var(--sub);text-decoration:none;font-weight:600}
.oc-nav a:hover{color:var(--accent)}

/* ── 타이포 (§8: 소제목이 크고 또렷해야 한다) ── */
.oc-title{font-size:2.25rem;line-height:1.25;font-weight:800;letter-spacing:-.03em;margin:.4em 0 .3em}
@media(min-width:48rem){.oc-title{font-size:2.5rem}}
.entry h2{
  font-size:1.62rem;line-height:1.35;font-weight:800;letter-spacing:-.02em;
  margin:2.4rem 0 .9rem;padding-left:.7rem;border-left:6px solid var(--accent);
}
@media(min-width:48rem){.entry h2{font-size:1.85rem}}
.entry h3{font-size:1.2rem;font-weight:800;margin:1.9rem 0 .6rem;letter-spacing:-.01em}
.entry p{margin:0 0 1.15em}
.entry ul,.entry ol{margin:0 0 1.2em;padding-left:1.3em}
.entry li{margin:.35em 0}
.entry strong{font-weight:700}

.oc-meta{font-size:.86rem;color:var(--sub);margin:0 0 1.6rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.oc-lede{font-size:1.06rem;color:var(--sub);margin:0 0 1.6rem}

/* ── 시그니처: 요금 카드 ── */
.oc-price-card{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:1.15rem 1.25rem;margin:1.6rem 0;
}
.oc-price-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.35rem}
.oc-price-name{font-size:1.02rem;font-weight:800}
.oc-checked{
  font-size:.72rem;color:var(--sub);border:1px solid var(--line);
  border-radius:999px;padding:.12rem .55rem;white-space:nowrap;
}
.oc-price-figure{display:flex;align-items:baseline;gap:.35rem}
.oc-price-amt{font-size:2.5rem;font-weight:800;color:var(--accent);letter-spacing:-.03em;line-height:1.1}
.oc-price-cycle{font-size:.95rem;color:var(--sub);font-weight:600}
.oc-price-note{font-size:.87rem;color:var(--sub);margin:.5rem 0 0}

/* ── CTA ── */
.oc-cta-wrap{margin:1.1rem 0}
.oc-cta{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:700;font-size:1rem;padding:.75rem 1.4rem;border-radius:9px;
}
.oc-cta:hover{filter:brightness(1.08)}

/* ── 코드 복사 ── */
.oc-code{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  border:1px dashed var(--accent);border-radius:10px;padding:.8rem 1rem;margin:1.1rem 0;background:#fff;
}
.oc-code-label{font-size:.78rem;color:var(--sub);font-weight:700}
.oc-code-val{font-size:1.15rem;font-weight:800;letter-spacing:.06em;color:var(--ink)}
.oc-code-btn{
  margin-left:auto;background:var(--accent);color:#fff;border:0;border-radius:7px;
  padding:.45rem .95rem;font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;
}

/* ── 고지 박스 ── */
.oc-notice{background:var(--warn);border:1px solid #F0E2C0;border-radius:10px;padding:.95rem 1.15rem;margin:1.5rem 0}
.oc-notice p{margin:0 0 .6em;font-size:.93rem;line-height:1.7}
.oc-notice p:last-child{margin-bottom:0}
.oc-notice-title{font-weight:800;font-size:.95rem}
.oc-disclosure{background:#fff;border:1px solid var(--line)}
.oc-disclosure p{color:var(--sub);font-size:.88rem}
.oc-checked-line{font-size:.87rem;color:var(--sub);border-left:3px solid var(--line);padding-left:.8rem;margin:1.2rem 0}

/* ── 스텝 리스트 (번호 크게) ── */
.oc-steps{list-style:none;counter-reset:s;padding:0;margin:1.5rem 0}
.oc-steps li{counter-increment:s;position:relative;padding-left:2.6rem;margin:0 0 1.05rem;min-height:1.9rem}
.oc-steps li::before{
  content:counter(s);position:absolute;left:0;top:-.05em;
  width:1.9rem;height:1.9rem;border-radius:50%;background:var(--accent);color:#fff;
  font-size:.95rem;font-weight:800;display:flex;align-items:center;justify-content:center;
}

/* ── 표 (모바일에서 카드 스택) ── */
.oc-table-wrap{overflow-x:auto;margin:1.5rem 0}
.entry table{width:100%;border-collapse:collapse;font-size:.93rem}
.entry th,.entry td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top}
.entry th{background:#F3F2EE;font-weight:800}
@media(max-width:37.5rem){
  .oc-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .oc-stack tr{display:block;border:1px solid var(--line);border-radius:10px;margin-bottom:.9rem;background:#fff}
  .oc-stack td{display:flex;justify-content:space-between;gap:1rem;border:0;border-bottom:1px solid var(--line)}
  .oc-stack td:last-child{border-bottom:0}
  .oc-stack td::before{content:attr(data-th);font-weight:800;color:var(--sub);flex:0 0 auto}
}

/* ── FAQ (JS 불요) ── */
.oc-faq{margin:2.2rem 0}
.oc-faq h2{margin-bottom:.8rem}
.oc-faq details{border:1px solid var(--line);border-radius:10px;background:#fff;padding:.15rem .95rem;margin:0 0 .55rem}
.oc-faq summary{cursor:pointer;font-weight:700;padding:.75rem 0;font-size:.97rem;list-style:none}
.oc-faq summary::-webkit-details-marker{display:none}
.oc-faq summary::after{content:"+";float:right;color:var(--accent);font-weight:800}
.oc-faq details[open] summary::after{content:"−"}
.oc-faq details>div{padding-bottom:.5rem;font-size:.93rem;color:var(--sub)}
.oc-faq details>div p{margin:0 0 .6em}

/* ── 이어서 읽기 ── */
.oc-next{border-top:2px solid var(--ink);margin:2.6rem 0 0;padding-top:1.1rem}
.oc-next h2{font-size:1.05rem;font-weight:800;margin:0 0 .6rem;padding:0;border:0}
.oc-next ul{list-style:none;padding:0;margin:0}
.oc-next li{margin:.4rem 0}
.oc-next a{font-weight:700;text-decoration:none}
.oc-next a:hover{text-decoration:underline}

/* ── 목록 ── */
.oc-list{margin:1.5rem 0 0}
.oc-card{border-bottom:1px solid var(--line);padding:1.25rem 0}
.oc-card:first-child{border-top:1px solid var(--line)}
.oc-card h2{font-size:1.24rem;font-weight:800;margin:0 0 .3rem;letter-spacing:-.02em;padding:0;border:0}
.oc-card h2 a{color:var(--ink);text-decoration:none}
.oc-card h2 a:hover{color:var(--accent)}
.oc-card p{margin:.3rem 0 0;color:var(--sub);font-size:.93rem}
.oc-card .oc-date{font-size:.79rem;color:var(--sub)}

.oc-pager{display:flex;gap:.6rem;flex-wrap:wrap;margin:2.2rem 0}
.oc-pager a,.oc-pager span{
  border:1px solid var(--line);border-radius:8px;padding:.4rem .8rem;
  text-decoration:none;font-size:.9rem;font-weight:700;background:#fff;
}
.oc-pager .current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── 푸터 ── */
.oc-foot{border-top:1px solid var(--line);margin-top:3.5rem;padding:1.8rem 0 2.5rem;font-size:.87rem;color:var(--sub)}
.oc-foot a{color:var(--sub)}
.oc-foot-nav{display:flex;gap:1rem;flex-wrap:wrap;margin:0 0 .8rem}
.oc-foot p{margin:.3rem 0}

.oc-skip{position:absolute;left:-9999px}
.oc-skip:focus{left:.5rem;top:.5rem;background:#fff;padding:.5rem .9rem;border:2px solid var(--accent);border-radius:8px;z-index:9}