/* Shared Korean copy typography (Toss/Kakao-style line breaks).
   Linked from every public page. Breaks are semantic, never mid-syllable.

   Markup:
     <div class="copy-stack">            multi-line block (brand / operator / biz reg / benefit / hold / channels)
       <p class="copy-line">...</p>      one semantic line; wraps only at word boundaries
       <p class="copy-line"><span class="copy-chunk">문장 1.</span> <span class="copy-chunk">문장 2.</span></p>
     </div>
     .prose-ko                            long-form body copy with readable measure
     .copy-chunk / .copy-part             inline by default; complete chunks stack on mobile
     .copy-nowrap                         keep a short token (number, ㈜ phrase, "3일·15일·30일") together
     <br>                                 phrase break on both desktop and mobile
     <br class="pc">                      desktop-only break (Toss br.pc)
     <br class="mo">                      mobile-only break (Toss br.mo / KakaoBank br_mo)
     <span class="only-pc"> · </span>     separator shown only when the mobile break is hidden
*/

:root { --copy-measure: 38em; --copy-measure-mobile: 24em; }

/* Baseline for all Korean copy (zero specificity so page CSS can override). */
:where(body) { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
:where(p, li, dd, dt, summary, figcaption, blockquote, small, .lead, .notice, .micro, .section-head, .subtitle, .disclosure, .detail) {
  word-break: keep-all; overflow-wrap: break-word; line-break: strict;
}
@supports (text-wrap: pretty) {
  :where(p, li, dd, summary, blockquote, .lead, .notice, .micro, .section-head, .subtitle, .disclosure) { text-wrap: pretty; }
}
@supports (text-wrap: balance) {
  :where(h1, h2, h3) { text-wrap: balance; }
}
:where(h1, h2, h3, h4) { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
:where(a) { overflow-wrap: break-word; }
:where(code) { overflow-wrap: anywhere; }

/* Readable measure: full width on mobile, capped on desktop. */
.prose-ko, .copy-stack { max-width: min(100%, var(--copy-measure)); word-break: keep-all; overflow-wrap: break-word; line-break: strict; letter-spacing: -0.01em; }
.prose-ko > p, .copy-stack > .copy-line { max-width: 100%; }
.prose-ko > p + p { margin-top: .75em; }

/* One semantic line per paragraph. */
.copy-stack { display: grid; gap: .5em; }
.copy-stack > .copy-line { margin: 0; }
.copy-line { display: block; word-break: keep-all; overflow-wrap: break-word; }
@supports (text-wrap: pretty) { .copy-line { text-wrap: pretty; } }

.copy-chunk, .copy-part { display: inline; }
.copy-nowrap { white-space: nowrap; }

@media (max-width: 760px) {
  .prose-ko, .copy-stack { max-width: min(100%, var(--copy-measure-mobile)); }
  .copy-chunk { display: block; }
  .copy-part { display: inline; }
  .copy-chunk + .copy-chunk { margin-top: .15em; }
  .copy-stack { gap: .6em; }
}
@supports (text-wrap: balance) {
  @media (max-width: 760px) { .copy-part, .copy-chunk:not(:has(.copy-part)) { text-wrap: balance; } }
}

/* Footer / meta lines: each child is one legal phrase (company, registration, contact). */
.copy-footer-lines { display: grid; gap: .3em; margin: .35em 0 .15em; }
.copy-footer-lines > span { display: block; word-break: keep-all; overflow-wrap: break-word; line-break: strict; }

/* Toss br.pc / KakaoBank br_mo. Hide only; a shown <br> keeps the native line break.
   Do not set display on the visible break — .hero-intro already hides its own <br> on mobile. */
@media (min-width: 761px) {
  br.mo, .only-mo { display: none; }
}
@media (max-width: 760px) {
  br.pc, .only-pc { display: none; }
}

/* Badges and the operator summary are flex/inline-flex; a <br> inside them would
   become a flex item instead of a line break. Block formatting makes the phrase break real. */
.badge { display: inline-block; max-width: 100%; white-space: normal; vertical-align: top; line-height: 1.45; }
#operatorSummary { display: block; width: max-content; max-width: 100%; line-height: 1.55; text-align: left; word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
#operatorSummary .copy-nowrap,
p.hero-trust span { display: inline; white-space: nowrap; }
p.hero-trust { display: block; max-width: 36em; margin: 14px 0 0; font-size: 13px; line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
nav.footer-nav { display: block; margin-top: .45em; line-height: 1.7; }
nav.footer-nav a { white-space: nowrap; }

/* Existing hero/guide chunk classes share the same behavior. */
.hero-intro__chunk, .hero-intro__part, .lead__chunk, .lead__part { display: inline; }
@media (max-width: 760px) {
  .hero-intro__chunk, .lead__chunk { display: block; }
  .hero-intro__part, .lead__part { display: inline; }
}

/* Group paragraphs by meaning without imposing a fixed number of lines. */
.copy-prose { max-width: min(100%, var(--copy-measure)); line-height: 1.75; }
.copy-prose > p { margin: 0; }
.copy-prose > p + p { margin-top: 1em; }
.copy-prose :where(h1, h2, h3) { line-height: 1.35; }
/* Only constrain children of our copy containers, not unrelated app layouts. */
:where(.copy-prose, .copy-stack, .copy-footer-lines) > * { min-width: 0; }
.copy-url, .copy-email, .copy-identifier { overflow-wrap: anywhere; word-break: normal; }
.copy-prose a { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .copy-prose { max-width: min(100%, var(--copy-measure-mobile)); }
}

/* Reflow boundaries for public cards and actual administrator workflows. */
:where(.row, .grid, .actions, .header-inner, .admin-layout, .admin-main, .editor-grid, .copy-grid) > * { min-width: 0; }
:where(.button, button, .btn, .cta-main, .cta-secondary) { white-space: normal; overflow-wrap: break-word; height: auto; }
:where(p, li) { line-height: 1.75; }
:where(.row strong, .row a, .admin-main a, .admin-main td) { overflow-wrap: anywhere; }
:where(.row) { gap: 12px; }
:where(.copy-table-scroll, .table-wrap) { max-width: 100%; overflow-x: auto; }
.service-definition { max-width: 38em; line-height: 1.75; }
.service-facts-summary { margin: 1em 0; font-size: .9em; color: #afc4d2; }
#introPreview { padding: 16px; border: 1px solid #b9cbd3; border-radius: 12px; margin-top: 12px; }
@media (max-width: 760px) { .row { flex-wrap: wrap; } .row > * { max-width: 100%; } }