/* Legal pages (/privacy /terms /cookie /refund) — page-specific styles on top of site.css (.rb-page-hero, .rb-prose).
   Prefix rbl-. Tokens only, logical properties only (RTL). Markup: app/Views/pages/_legal_doc.php */

/* hero meta line (document subtitle, effective date) */
.rbl-meta{display:inline-flex;align-items:center;gap:.4rem}
.rbl-meta .rb-icon{flex:none;color:var(--rb-muted)}

/* Korean line breaks: middle-dot compounds, time ranges and the effective date stay whole (_legal_doc.php $nw) */
.rbl-nw{white-space:nowrap}

/* Korean fallback on languages without a translated pack (lang="ko" dir="ltr" wrapper in _legal_doc.php) */
.rbl-ko-fallback{word-break:keep-all;--rb-tracking-kicker:0}
.rbl-ko-fallback .rb-breadcrumb li + li::before{transform:rotate(45deg)}

/* phones: long single words (ru "конфиденциальности" ≈ 10.8em) must fit the column, so the h1 is capped at 1/11 of it */
@media (max-width:479px){html:is(:lang(ru),:lang(mn)) .rb-page-hero__title{font-size:min(var(--rb-text-page),calc((100vw - 2 * var(--rb-gutter)) / 11));max-width:100%;hyphens:auto}}

/* the document starts right under the hero */
.rbl-section{padding-top:1.5rem}
@media (min-width:1024px){.rbl-section{padding-top:4rem}}

.rbl-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
@media (min-width:1024px){.rbl-layout{grid-template-columns:16rem minmax(0,46rem);gap:4.5rem;align-items:start}}
@media (min-width:1280px){.rbl-layout{grid-template-columns:17rem minmax(0,46rem);gap:6rem}}

/* ===== TOC: sticky collapsible bar below 1024px, sticky sidebar from 1024px ===== */
.rbl-side{position:sticky;top:4.75rem;z-index:30}
@media (min-width:640px){.rbl-side{top:5.5rem}}
@media (min-width:1024px){.rbl-side{top:6.5rem;z-index:auto;max-height:calc(100vh - 8rem);overflow-y:auto;overscroll-behavior:contain;padding:.25rem;margin:-.25rem;scrollbar-width:thin}}

.rbl-toc__toggle{display:flex;align-items:center;gap:.625rem;width:100%;min-height:3rem;padding:.625rem 1rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-md);background:var(--rb-white);box-shadow:var(--rb-shadow-header);font-size:var(--rb-text-sm);font-weight:700;line-height:1.3;color:var(--rb-ink);text-align:start;cursor:pointer;transition:border-color var(--rb-dur-fast)}
.rbl-toc__toggle:hover,.rbl-toc__toggle[aria-expanded="true"]{border-color:var(--rb-line-strong)}
.rbl-toc__toggle > .rb-icon:first-child{color:var(--rb-accent)}
.rbl-toc__label{flex:none}
.rbl-toc__current{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500;color:var(--rb-muted)}
.rbl-toc__current:not(:empty){padding-inline-start:.625rem;border-inline-start:1px solid var(--rb-line)}
.rbl-toc__chev{margin-inline-start:auto;color:var(--rb-muted);transition:transform var(--rb-dur) var(--rb-ease-std)}
.rbl-toc__toggle[aria-expanded="true"] .rbl-toc__chev{transform:rotate(180deg)}

@media (max-width:1023px){
  /* opaque full-width band behind the stuck bar, from just under the header pill to the bar's bottom: no sliced
     heading shows in the gap or around the bar's rounded corners, and the band has no visible side edges (the
     section clips it; white on the white section while the bar is not stuck) */
  .rb-js .rbl-side::before{content:"";position:absolute;z-index:-1;inset-inline:calc(50% - 50vw);top:-.625rem;bottom:0;background:var(--rb-white)}
  .rbl-toc__panel{padding:1.25rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-lg);background:var(--rb-white)}
  .rb-js .rbl-toc__panel{position:absolute;inset-inline:0;top:calc(100% + .5rem);max-height:min(68vh,34rem);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--rb-shadow-pop)}
  .rb-js .rbl-toc__toggle[aria-expanded="false"] + .rbl-toc__panel{display:none}
  /* without JS: no sticky bar, the full TOC is shown above the document */
  .rb-no-js .rbl-side{position:static}
  .rb-no-js .rbl-toc__toggle{display:none}
  /* the bar already reads "목차": keep the panel heading for screen readers only */
  .rb-js .rbl-toc > .rbl-toc__title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rb-js .rbl-toc > .rbl-toc__title + .rbl-toc__list{margin-top:0}
}
@media (min-width:1024px){.rbl-toc__toggle{display:none}}

.rbl-toc__title{font-size:.78rem;font-weight:800;letter-spacing:var(--rb-tracking-kicker);text-transform:uppercase;color:var(--rb-muted)}
html:lang(th) .rbl-toc__title{letter-spacing:0}   /* Thai is never tracked */
.rbl-toc__list{display:grid;gap:.125rem;margin-top:.625rem}
.rbl-toc__list a{display:flex;gap:.5rem;padding:.4rem .75rem;border-inline-start:2px solid var(--rb-line);font-size:.9rem;line-height:1.45;color:var(--rb-ink-2);transition:color var(--rb-dur-fast),border-color var(--rb-dur-fast)}
.rbl-toc__list a:hover{border-color:var(--rb-line-strong);color:var(--rb-ink)}
.rbl-toc__list a[aria-current="true"]{border-color:var(--rb-accent);color:var(--rb-ink);font-weight:700}
.rbl-toc__no{flex:none;min-width:3.25em;white-space:nowrap;color:var(--rb-muted);font-weight:600;font-variant-numeric:tabular-nums}
/* mn labels ("1 дүгээр зүйл") take a third of the row and vary in width: label above the title */
html:lang(mn) .rbl-toc__list a{flex-direction:column;gap:.125rem}
.rbl-toc__list a[aria-current="true"] .rbl-toc__no{color:var(--rb-accent)}

.rbl-docs{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rb-line)}
.rbl-docs__list{display:grid;gap:.125rem;margin-top:.5rem}
.rbl-docs__list a{display:block;padding:.4rem .75rem;border-radius:var(--rb-radius-sm);font-size:.9rem;line-height:1.45;color:var(--rb-ink-2);transition:background-color var(--rb-dur-fast),color var(--rb-dur-fast)}
.rbl-docs__list a:hover{background:var(--rb-surface-2);color:var(--rb-ink)}
.rbl-docs__list a[aria-current="page"]{background:var(--rb-accent-soft);color:var(--rb-accent-deep);font-weight:700}
@media (max-width:1023px){
  .rbl-docs__list{display:flex;flex-wrap:wrap;gap:.375rem}
  .rbl-docs__list a{padding:.375rem .75rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-pill);font-size:.85rem}
  .rbl-docs__list a[aria-current="page"]{border-color:rgb(var(--rb-accent-rgb) / .3)}
}

/* ===== Document ===== */
.rbl-doc{min-width:0}
.rbl-art{scroll-margin-top:0}
.rb-js .rbl-art{scroll-margin-top:2.75rem}   /* direct #hash loads on phones: clear the sticky TOC bar too */
@media (min-width:1024px){.rb-js .rbl-art{scroll-margin-top:0}}
.rbl-art + .rbl-art{margin-top:2.75rem;padding-top:2.75rem;border-top:1px solid var(--rb-line)}
@media (min-width:1024px){.rbl-art + .rbl-art{margin-top:3.25rem;padding-top:3.25rem}}
.rbl-art > * + *{margin-top:1rem}
.rbl-doc p,.rbl-doc li{text-wrap:pretty}
.rb-prose .rbl-art > h2{margin-top:0;padding-top:0;border-top:0;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:800;line-height:1.4}
.rb-prose .rbl-art > h2 + *{margin-top:1.125rem}
.rbl-art__no{color:var(--rb-accent)}

/* numbered clauses: the number is text (copyable), hanging in its own column */
.rb-prose .rbl-list--num{padding-inline-start:0;list-style:none}
.rbl-list--num > li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);align-items:baseline}
.rb-prose .rbl-list--num > li + li{margin-top:.625rem}
.rbl-list__n{font-weight:700;color:var(--rb-ink)}
.rb-prose .rbl-list__t > .rbl-list{margin-top:.5rem}
.rb-prose .rbl-list:not(.rbl-list--num) .rbl-list{margin-top:.375rem;list-style:circle}

.rb-prose .rbl-h3{margin-top:1.5rem;font-size:1.05rem;font-weight:800}
.rb-prose .rbl-h3 + .rbl-list{margin-top:.5rem}
.rb-prose .rbl-note{font-size:var(--rb-text-sm);color:var(--rb-muted)}

/* bordered sub-section (refund service groups, cookie types) */
.rbl-box{padding:1.25rem 1.25rem 1.375rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-lg);background:var(--rb-surface)}
@media (min-width:640px){.rbl-box{padding:1.5rem 1.75rem 1.625rem}}
.rb-prose .rbl-box + .rbl-box{margin-top:.75rem}
.rb-prose .rbl-box__title{margin-top:0;font-size:1.05rem;font-weight:800}
.rb-prose .rbl-box > .rbl-box__title + *{margin-top:.625rem}

/* contact card (개인정보보호책임자) */
.rbl-card{padding:1.25rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-lg);background:var(--rb-white);box-shadow:var(--rb-shadow-card)}
@media (min-width:640px){.rbl-card{padding:1.5rem 1.75rem}}
.rb-prose .rbl-card__title{display:flex;align-items:center;gap:.75rem;margin-top:0;font-size:1.05rem;font-weight:800}
.rbl-card__rows{display:grid;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--rb-line)}
.rbl-card__rows > div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem}
.rbl-card__rows dt{color:var(--rb-muted)}
.rbl-card__rows dd{color:var(--rb-ink);font-weight:600;overflow-wrap:anywhere}

/* 환불 관련 문의 (refund) */
.rb-prose .rbl-contact{display:grid;gap:.75rem;padding-inline-start:0;list-style:none}
@media (min-width:640px){.rb-prose .rbl-contact{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rb-prose .rbl-contact li + li{margin-top:0}
.rb-prose a.rbl-contact__item{display:flex;align-items:center;gap:1rem;height:100%;padding:1.25rem;color:inherit;text-decoration:none}
.rbl-contact__label{display:block;font-size:var(--rb-text-xs);line-height:1.4;color:var(--rb-muted)}
.rbl-contact__value{display:block;font-weight:700;line-height:1.4;color:var(--rb-ink);overflow-wrap:anywhere}
.rb-prose .rbl-hours{display:flex;align-items:flex-start;gap:.5rem}
.rbl-hours .rb-icon{margin-top:.3em;color:var(--rb-muted)}

/* 부칙 */
.rb-prose .rbl-art--addendum{margin-top:3rem;padding:1.5rem 1.25rem;border-top:0;border-radius:var(--rb-radius-lg);background:var(--rb-surface-2)}
@media (min-width:640px){.rb-prose .rbl-art--addendum{padding:1.75rem 2rem}}
.rb-prose .rbl-art--addendum > h2{font-size:1.15rem}
.rb-prose .rbl-art--addendum > * + *{margin-top:.5rem}

/* print: one column without the TOC; keep boxes, cards and 부칙 whole, headings with their text */
@media print{
  .rbl-layout{display:block}
  .rbl-side{display:none}
  .rbl-box,.rbl-card,.rbl-art--addendum{break-inside:avoid}
  .rbl-art > h2,.rbl-h3,.rbl-box__title{break-after:avoid}
}