/* 호스티 — 방문자(pub) 담당 화면: 요금제·가입·찾기·FAQ·공지·약관. 접두어 .pub- 만 쓴다. 색은 var(--토큰), 크기는 rem. */

/* ── 공통 ─────────────── */
.pub-appbar { margin-bottom: var(--sp-3); }
.pub-center { justify-content: center; }
.auth-links .pub-plain { display: inline-flex; align-items: center; color: var(--ink-3); }
.pub-auth-one { grid-template-columns: minmax(0, 34rem); justify-content: center; }
.pub-who { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--sp-3); }
.pub-who .ic { color: var(--accent); width: 1.1rem; height: 1.1rem; }
.pub-who .link { margin-left: auto; min-height: 2.75rem; display: inline-flex; align-items: center; }
.pub-more { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; padding: var(--sp-6) 0 var(--sp-7); }
.pub-count { margin: var(--sp-4) 0 var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); }
.pub-count strong { color: var(--ink); }
.pub-help { display: flex; align-items: center; justify-content: center; gap: .375rem; flex-wrap: wrap; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-3); }
.pub-help .ic { color: var(--accent); }

/* 검색 + 분류 탭 */
.pub-search { margin-top: var(--sp-2); }
.pub-search-row { display: flex; gap: var(--sp-2); max-width: 36rem; }
.pub-search-row .input { flex: 1 1 auto; min-width: 0; }
.pub-search-row .btn { flex: 0 0 auto; }
.pub-tabs { margin-top: var(--sp-4); }
@media (max-width: 47.5rem) {
  .pub-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
  .pub-tabs::-webkit-scrollbar { display: none; }
}

/* 문의 안내 띠 */
.pub-ask { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); background: var(--surface-3); }
.pub-ask > div:first-child { flex: 1 1 22rem; }
.pub-ask p { margin-top: .375rem; }

/* ── 구독 ─────────────── */
.pub-cycle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0; }
.pub-cycle .seg-btn { display: inline-flex; align-items: center; gap: .375rem; min-height: var(--tap); padding: 0 1.1rem; font-size: var(--fs-md); }
.pub-cycle .seg-btn .badge { font-size: var(--fs-xs); }
.pub-badges { display: inline-flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.pub-plans .plan { gap: var(--sp-2); }
.pub-plans .plan .btn { margin-top: var(--sp-3); }
.pub-plans .plan-note { margin-top: auto; }
.pub-price-sub { color: var(--warm-ink); font-weight: 650; }
.pub-is-mine { outline: 2px dashed var(--ok); outline-offset: 3px; }
.pub-mine { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); border-color: var(--accent); background: var(--accent-soft); }
.pub-mine-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-lg); margin: .25rem 0; }
.pub-calc { min-width: 30rem; }
.pub-calc td.num, .pub-calc th.num { text-align: right; }

/* ── 가입·찾기 ─────────────── */
.pub-all { padding: .75rem .9rem; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface-3); }
.pub-all strong { font-size: var(--fs-lg); }
.pub-terms { display: grid; gap: 0; margin-top: var(--sp-2); border-bottom: 1px solid var(--line); }
.pub-terms > li { border-top: 1px solid var(--line); padding: var(--sp-2) 0; }
.pub-terms > li:first-child { border-top: 0; }
.pub-term-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.pub-term-row .check { flex: 1 1 auto; }
.pub-term-row .btn { flex: 0 0 auto; margin-top: .125rem; text-decoration: underline; text-underline-offset: .1875rem; }
.pub-keep { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r); background: var(--surface-3); border: 1px solid var(--line); }
.pub-keep .h-sub { font-size: var(--fs-md); }
.pub-keep ul { list-style: disc; padding-left: 1.2em; margin-top: var(--sp-2); display: grid; gap: .25rem; font-size: var(--fs-sm); color: var(--ink-2); }
.pub-pol-modal { width: min(42rem, calc(100vw - 2rem)); }
.pub-pol-modal .modal-body { max-height: 60vh; overflow-y: auto; }
.pub-done-head { text-align: center; margin: var(--sp-5) 0 var(--sp-4); }
.pub-done-head .ico-box { background: var(--ok-soft); color: var(--ok); }
.pub-done-head h1 { margin-top: var(--sp-3); }
.pub-done-kv { padding: var(--sp-4); border-radius: var(--r); background: var(--surface-3); border: 1px solid var(--line); }
.pub-done-kv dd { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pub-next { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.pub-next > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pub-next-no { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; }
.pub-next p { color: var(--ink-3); font-size: var(--fs-sm); margin-top: .125rem; }
.pub-next-ic { color: var(--accent); margin-top: .25rem; }
.pub-done-cta { margin-top: var(--sp-5); }
.pub-done-cta .btn { flex: 1 1 12rem; }
.pub-result { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r); border: 1.5px solid var(--ok); background: var(--ok-soft); }
.pub-result .ico-box { background: var(--surface); color: var(--ok); }
.pub-result.is-none { border-color: var(--line-strong); background: var(--surface-3); }
.pub-result.is-none .ico-box { color: var(--ink-2); }
.pub-result-id { font-size: var(--fs-h4); font-weight: 800; margin: .375rem 0 .125rem; word-break: break-all; color: var(--ink); }
.pub-demo-link { margin-top: var(--sp-3); padding: var(--sp-4); border-radius: var(--r); border: 1.5px dashed var(--accent); background: var(--accent-soft); display: grid; gap: var(--sp-2); }
.pub-demo-link p { display: flex; align-items: center; gap: .375rem; color: var(--accent-ink); }
.pub-rule { display: grid; gap: .25rem; padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface-3); font-size: var(--fs-sm); color: var(--ink-2); }
.pub-rule li { display: flex; align-items: center; gap: .375rem; }
.pub-rule .ic { color: var(--accent); }
.pub-blocked { text-align: center; padding: var(--sp-4) 0; display: grid; gap: var(--sp-3); justify-items: center; }
.pub-blocked p { max-width: 26rem; }

/* ── FAQ ─────────────── */
.pub-faq { display: grid; gap: var(--sp-2); }
.pub-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.pub-faq-item[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.pub-faq-item summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); min-height: 3.5rem; padding: .75rem var(--sp-4); cursor: pointer; list-style: none; font-weight: 700; }
.pub-faq-item summary::-webkit-details-marker { display: none; }
.pub-faq-item summary:hover .pub-faq-qtext { color: var(--accent-ink); }
.pub-faq-item summary:focus-visible { box-shadow: var(--focus); border-radius: var(--r); }
.pub-faq-chev { color: var(--ink-3); transition: transform var(--t-short) var(--ease); }
.pub-faq-item[open] .pub-faq-chev { transform: rotate(180deg); }
.pub-q, .pub-a { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 800; font-size: var(--fs-sm); }
.pub-q { background: var(--accent); color: var(--on-accent); }
.pub-a { background: var(--warm-soft); color: var(--warm-ink); flex: 0 0 auto; }
.pub-faq-a { display: flex; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); color: var(--ink-2); line-height: 1.8; }
@media (max-width: 35rem) {
  .pub-faq-item summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pub-faq-item summary .badge { grid-column: 2; grid-row: 2; justify-self: start; }
  .pub-faq-chev { grid-column: 3; grid-row: 1; }
}

/* ── 공지 ─────────────── */
.pub-notices { border-top: 2px solid var(--ink); }
.pub-notices > li { border-bottom: 1px solid var(--line); }
.pub-notices > li.is-pinned { background: var(--surface-3); }
.pub-notices a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 3.5rem; padding: .75rem var(--sp-3); }
.pub-notices a:hover .pub-n-title { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .1875rem; }
.pub-n-badges { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.pub-n-title { font-weight: 650; color: var(--ink); }
.pub-n-meta { display: inline-flex; align-items: center; gap: .375rem; flex-wrap: wrap; color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; }
.pub-n-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
@media (max-width: 47.5rem) {
  .pub-notices a { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}
.pub-article { margin-top: var(--sp-3); padding: var(--sp-6); }
.pub-article-head { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); display: grid; gap: var(--sp-2); }
.pub-article-head h1 { font-size: var(--fs-h3); line-height: 1.35; }
.pub-article-head .pub-n-meta { gap: var(--sp-4); }
.pub-article-body { padding-top: var(--sp-3); }
@media (max-width: 47.5rem) { .pub-article { padding: var(--sp-5) var(--sp-4); } }
.pub-prevnext { margin-top: var(--sp-4); border-top: 1px solid var(--line-strong); }
.pub-prevnext a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: 3.25rem; padding: .5rem var(--sp-2); border-bottom: 1px solid var(--line); }
.pub-prevnext a:hover .pub-pn-t { color: var(--accent-ink); text-decoration: underline; }
.pub-pn-k { display: inline-flex; align-items: center; gap: .25rem; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 650; }
.pub-pn-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (max-width: 35rem) { .pub-prevnext a { grid-template-columns: 4.5rem minmax(0, 1fr); } .pub-prevnext time { display: none; } }

/* ── 약관·방침 ─────────────── */
.pub-doc { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--sp-5); align-items: start; }
.pub-doc-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
.pub-doc-side { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 62.5rem) { .pub-doc { grid-template-columns: minmax(0, 1fr); } .pub-doc-side { position: static; } }
.pub-doc-body { padding: var(--sp-6); }
.pub-doc-body > h2:first-child { margin-top: 0; }
.pub-doc-body .table-wrap { margin: var(--sp-2) 0; }
@media (max-width: 47.5rem) { .pub-doc-body { padding: var(--sp-5) var(--sp-4); } }
.pub-doc-end { margin-top: var(--sp-5) !important; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-3); }
.pub-doc-intro { color: var(--ink-2); }
.pub-doc-foot { font-size: var(--fs-sm); color: var(--ink-3); }
.pub-ver-form { display: grid; gap: .375rem; }
.pub-ver-row { display: flex; gap: var(--sp-2); max-width: 28rem; }
.pub-ver-row .select { flex: 1 1 auto; min-width: 0; }
.pub-history { display: grid; margin-top: var(--sp-2); }
.pub-history > li { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .125rem var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.pub-history > li:first-child { border-top: 0; }
.pub-history time { color: var(--ink-3); }
.pub-history-ver { font-weight: 800; color: var(--accent-ink); }
.pub-history-sum { grid-column: 1 / -1; color: var(--ink-2); }
.pub-history-link { grid-column: 1 / -1; justify-self: start; min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--accent-ink); text-decoration: underline; text-underline-offset: .1875rem; font-weight: 650; }
.pub-history > li > .badge { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; }
.pub-related { display: grid; margin-top: var(--sp-2); }
.pub-related a { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); border-top: 1px solid var(--line); font-weight: 650; }
.pub-related li:first-child a { border-top: 0; }
.pub-related a .ic:first-child { color: var(--accent); }
.pub-related a:hover span { color: var(--accent-ink); text-decoration: underline; }
.pub-arrow { margin-left: auto; color: var(--ink-3); }
.pub-toc { list-style: decimal; padding-left: 1.4em; margin-top: var(--sp-2); display: grid; gap: .25rem; font-size: var(--fs-sm); color: var(--ink-2); }
.pub-my { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; border-color: var(--accent); }
.pub-my p { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pub-mk-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.pub-mk-items > li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.pub-mk-items p + p { margin-top: .25rem; }
@media (max-width: 56.25rem) { .pub-mk-items { grid-template-columns: 1fr; } }