/* /about — page-only additions on top of site.css (tokens + .rb-* components). Logical properties only (RTL). */

/* Section rhythm: a tighter vertical padding than the site default (≈ 52px phones → 88px desktop) */
.rb-main{--rb-section-y:clamp(3.25rem,2rem + 4.5vw,5.5rem)}

/* #facts: right under the hero, no heading. Four equal cards (4 → 2 × 2 → 1 below 360px): a large purple figure with a
   smaller unit, the label, a note; the last (venture certification) is lavender with a small line shield icon */
.rbp-facts-band{padding-block:clamp(1.75rem,1rem + 2.5vw,3.25rem)}
.rbp-facts{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:.75rem}
@media (min-width:360px){.rbp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:640px){.rbp-facts{gap:1.25rem}}
@media (min-width:1024px){.rbp-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rbp-fact{display:flex;flex-direction:column;align-items:flex-start;gap:.375rem;height:100%;padding:1.125rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-lg);background:#fff;box-shadow:0 1px 2px rgb(24 21 35 / .04),0 10px 28px -18px rgb(23 9 49 / .16)}
@media (min-width:640px){.rbp-fact{padding:1.75rem}}
.rbp-fact--cert{background:var(--rb-surface-2)}
.rbp-fact__value{font:800 clamp(1.75rem,1.3rem + 1.5vw,2.625rem)/1.1 var(--rb-font-display);letter-spacing:-.025em;color:var(--rb-accent)}
.rbp-fact__unit{margin-inline-start:.15em;font-size:.5em;font-weight:700;letter-spacing:0}
.rbp-fact__label{display:flex;align-items:center;gap:.4rem;font-size:.95rem;font-weight:700;line-height:1.4;color:var(--rb-ink)}
.rbp-fact__value + .rbp-fact__label{margin-top:.375rem}
.rbp-fact__icon{display:inline-flex;flex:none;color:var(--rb-accent)}
.rbp-fact__icon svg{width:1.125rem;height:1.125rem;stroke-width:1.75}
.rbp-fact__badge{font:800 clamp(1.2rem,1rem + .6vw,1.5rem)/1.3 var(--rb-font-display);letter-spacing:-.02em;color:var(--rb-accent)}
.rbp-fact__sub{font-size:.85rem;line-height:1.55;color:var(--rb-muted);text-wrap:pretty}

/* #identity: identity card (white) + vision card (lavender), the same card style. Same label / title (one step below the
   hero h1, 2 lines on PC) / text order; from 1024px a subgrid lines up the heading rows and the text rows of both cards */
.rbp-identity .rb-body{text-wrap:pretty}
.rbp-idv__title{font-size:clamp(1.6rem,1.15rem + 1.4vw,2.25rem)}
.rbp-vision{background:var(--rb-surface-2)}
@media (min-width:1024px){
.rbp-idv{grid-template-rows:auto 1fr;row-gap:0}
.rbp-idv > .rb-card{display:grid;grid-row:span 2;grid-template-rows:subgrid}
}

/* #structure: vertical brand tree — 4 tiers on one connector line (numbered nodes at the line); the affiliate tier
   hangs on a dashed segment (관계사, not part of the company) */
.rbp-tree-wrap{max-inline-size:52rem;margin-inline:auto}
.rbp-tree{--node:2.25rem;--node-top:1.25rem;--tier-gap:1rem;position:relative;display:grid;gap:var(--tier-gap)}
.rbp-tree__tier{position:relative;display:grid;grid-template-columns:var(--node) minmax(0,1fr);gap:1rem;align-items:start}
/* connector from this node down to the next one (dashed into the affiliate tier) */
.rbp-tree__tier:not(:last-child)::after{content:"";position:absolute;inset-block:calc(var(--node-top) + var(--node)) calc(-1 * (var(--tier-gap) + var(--node-top)));inset-inline-start:calc(var(--node) / 2 - 1px);inline-size:2px;background:var(--rb-line-strong)}
.rbp-tree__tier:nth-last-child(2)::after{background:repeating-linear-gradient(to bottom,var(--rb-line-strong) 0 6px,transparent 6px 12px)}
.rbp-tree__node{position:relative;display:grid;place-items:center;inline-size:var(--node);block-size:var(--node);margin-block-start:var(--node-top);border:2px solid var(--rb-accent);border-radius:var(--rb-radius-pill);background:var(--rb-white);color:var(--rb-accent);font:700 .78rem/1 var(--rb-font-display);font-variant-numeric:lining-nums}
.rbp-tree__tier--root .rbp-tree__node{background:var(--rb-accent);color:#fff}
.rbp-tree__tier--affiliate .rbp-tree__node{border-color:var(--rb-line-strong);color:var(--rb-ink-2)}
.rbp-tree__card{display:flex;flex-direction:column;align-items:flex-start;gap:.375rem}
.rbp-tree__tier--root .rbp-tree__card{border-color:rgb(var(--rb-accent-rgb) / .35)}
.rbp-tree__title{font-size:1.35rem;font-weight:800;line-height:1.3;color:var(--rb-ink)}
.rbp-tree__card .rb-card__text{margin-top:0}
.rbp-tree__chips{margin-top:.5rem}
.rbp-tree__chips .rb-chip{border-radius:1.25rem}   /* a long chip that wraps on phones stays a rounded box */
.rbp-tree__more{margin-top:.5rem}
.rbp-tree__note{margin-top:1.5rem;color:var(--rb-ink-2);text-wrap:pretty}
/* the note + fine print under the tree start at the cards' edge (node column + tier gap, as in .rbp-tree / __tier) */
.rbp-tree__note,.rbp-tree-wrap > .rb-fineprint{margin-inline-start:calc(2.25rem + 1rem)}
@media (min-width:640px){
.rbp-tree{--node:2.75rem;--tier-gap:1.25rem}
.rbp-tree__tier{gap:1.25rem}
.rbp-tree__node{font-size:.85rem}
.rbp-tree__note,.rbp-tree-wrap > .rb-fineprint{margin-inline-start:calc(2.75rem + 1.25rem)}
}

/* #why (night): 4 cards, the proof value pinned to the card bottom */
.rbp-why{display:flex;flex-direction:column;height:100%;padding:1.5rem;border-radius:var(--rb-radius-lg)}
.rbp-why .rb-kicker{color:var(--rb-accent-bright)}
.rbp-why__title{margin-top:.75rem;font-size:1.2rem;font-weight:800;line-height:1.35;color:var(--rb-on-night)}
.rbp-why__text{margin-block:.5rem 1.25rem;font-size:.95rem;line-height:var(--rb-leading-relaxed);color:var(--rb-on-night-2);text-wrap:pretty}
.rbp-why__proof{margin-block-start:auto;padding-block-start:1.25rem;border-block-start:1px solid var(--rb-night-border)}
.rbp-why__proof-value{font-family:var(--rb-font-display);font-size:1.6rem;font-weight:800;line-height:1.2;letter-spacing:var(--rb-tracking-display);color:#fff}
.rbp-why__proof-label{margin-top:.25rem;font-size:.85rem;color:var(--rb-on-night-3)}

/* #values (light cards on tint) */
.rbp-value{display:flex;flex-direction:column;height:100%;padding:1.5rem}
.rbp-value__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.rbp-value__title{margin-top:1.5rem;font-size:1.25rem;font-weight:800;line-height:1.35;color:var(--rb-ink)}
.rbp-value__text{margin-top:.5rem;font-size:.95rem;line-height:var(--rb-leading-relaxed);color:var(--rb-ink-2);text-wrap:pretty}
/* #how: the value card + an English motto (kicker) above the title */
.rbp-how__tag{margin-top:1.5rem;color:var(--rb-accent)}
.rbp-how__tag + .rbp-value__title{margin-top:.375rem}

/* History cards: period tag (+ status tag on the planned item) above the title */
.rbp-hrail__tags{display:flex;flex-wrap:wrap;gap:.375rem}
#history .rb-tag{font-size:.8rem}

/* Team */
.rbp-member__head{display:flex;align-items:center;gap:1rem}
.rbp-member__role{display:grid;place-items:center;flex:none;width:4rem;height:4rem;border-radius:var(--rb-radius-pill);background:var(--rb-accent-soft);color:var(--rb-accent-deep);font:800 .95rem/1 var(--rb-font-display);letter-spacing:.02em}
.rbp-member__name{font-size:1.35rem;font-weight:800;line-height:1.3;color:var(--rb-ink)}
.rbp-member__position{margin-top:.15rem;font-size:.9rem;font-weight:600;color:var(--rb-muted)}

/* Contact: one compact card — heading, then address / phone / email: stacked rows below 1024px; from 1024px three
   columns with hairlines (phone and e-mail as wide as their content, the address takes the rest); the heading
   moves beside them from 1280px */
.rbp-contact-band{display:grid;gap:1.5rem;padding:1.5rem}
@media (min-width:640px){.rbp-contact-band{padding:2rem 2.25rem}}
@media (min-width:1280px){.rbp-contact-band{grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:2.5rem;align-items:center;padding:2.25rem 2.5rem}}
.rbp-contact-band__head .rb-h3{margin-top:.5rem}
.rbp-contact-band__lead{margin-top:.5rem;font-size:.95rem;line-height:var(--rb-leading-relaxed);color:var(--rb-ink-2);text-wrap:pretty}
.rbp-contact-band__list{display:grid;gap:1.125rem}
.rbp-contact-band__list .rb-item__text{font-size:.95rem}
.rbp-contact-band__manager{display:block;font-size:.8rem;font-weight:600;color:var(--rb-muted)}
@media (min-width:1024px){
.rbp-contact-band__list{grid-template-columns:minmax(0,1fr) auto auto;gap:1.5rem}
.rbp-contact-band__list > li + li{padding-inline-start:1.5rem;border-inline-start:1px solid var(--rb-line)}
}
.rbp-break{overflow-wrap:anywhere}

/* History timeline: tall cards, so no alternating rail. Phones–1023px: line at the start (rail mobile layout);
   ≥1024px: horizontal, one equal column per item (--n) with the node above each card; the list's rows (node / tags /
   body) are shared through subgrids, so every title starts on one line even where a tag row wraps (status tag). */
@media (min-width:768px) and (max-width:1023px){
.rbp-hrail .rb-rail__line{inset-inline-start:1.35rem}
.rbp-hrail .rb-rail__list{gap:2rem}
.rbp-hrail .rb-rail__item{display:block}
.rbp-hrail .rb-rail__node{position:absolute}
.rbp-hrail .rb-rail__card,.rbp-hrail .rb-rail__item:nth-child(even) .rb-rail__card{margin:0;margin-inline-start:4rem}
}
@media (min-width:1024px){
.rbp-hrail{max-width:none}
.rbp-hrail .rb-rail__line{top:1.375rem;bottom:auto;inset-inline:1.375rem 0;width:auto;height:1px}
.rbp-hrail .rb-rail__line::after{top:-.5px;bottom:auto;inset-inline:0;width:auto;height:2px;background:repeating-linear-gradient(to right,var(--rb-accent) 0 8px,transparent 8px 20px);animation:rbp-dash-x 1.6s linear 3}
.rbp-hrail .rb-rail__list{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1.25rem}
.rbp-hrail .rb-rail__list{grid-template-rows:auto auto 1fr}
.rbp-hrail .rb-rail__item{display:grid;grid-row:span 3;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;align-items:start}
.rbp-hrail .rb-rail__node{position:relative;grid-column:1;grid-row:1;justify-self:start}
.rbp-hrail .rb-rail__card,.rbp-hrail .rb-rail__item:nth-child(even) .rb-rail__card{display:grid;grid-column:1;grid-row:2 / span 2;grid-template-rows:subgrid;row-gap:0;align-self:stretch;margin:0}
.rbp-hrail .rb-rail__card{padding:1.125rem}
.rbp-hrail__tags{gap:.25rem}
#history .rbp-hrail__tags .rb-tag{padding-inline:.5rem;font-size:.75rem}
}
@keyframes rbp-dash-x{to{background-position:40px 0}}
@media (prefers-reduced-motion:reduce){.rbp-hrail .rb-rail__line::after{animation:none}}

/* Phones: compact value cards (icon beside the title, no index), compact why cards */
@media (max-width:639px){
.rbp-value{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.875rem;row-gap:.25rem;padding:1.125rem 1.25rem}
.rbp-value__top{grid-row:1 / span 2}
.rbp-value__top .rb-index{display:none}
.rbp-value__title{margin-top:0;font-size:1.1rem}
.rbp-value__text{grid-column:2;margin-top:0;font-size:.9rem}
.rbp-how__tag{grid-column:2;margin-top:0}
.rbp-how__tag + .rbp-value__title{margin-top:0}
.rbp-why{padding:1.25rem}
}

/* Japanese headings: phrase-aware breaks (Chromium auto-phrase; other engines ignore it). Stopgap until core covers all ja pages */
html:lang(ja) main :is(h1,h2,h3,h4){word-break:auto-phrase}

/* Korean fallback body on a non-ko page (no about pack yet; wrapper set in the template): keep-all as under
   html:lang(ko), and undo the html[dir=rtl] icon / breadcrumb flips inside the LTR wrapper */
.rbp-ko-fallback{word-break:keep-all}
.rbp-ko-fallback .rb-icon-flip{transform:none}
.rbp-ko-fallback .rb-breadcrumb li + li::before{transform:rotate(45deg)}

/* #affiliate: the two role cards as wide as the brand tree above; the long structure lead start-aligned on phones */
.rbp-roles{max-inline-size:52rem;margin-inline:auto}
@media (max-width:639px){#structure .rb-heading .rb-lead{text-align:start}}
/* #affiliate lead: one sentence per line on PC (rb-br-sm in the pack), so its heading block is wider there */
@media (min-width:1024px){#affiliate .rb-heading{max-width:62rem}}
/* brochure link in a role card (new tab): icon · label */
.rbp-role__doc{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .4rem;margin-top:.875rem;font-size:.92rem;font-weight:700}
.rbp-role__doc svg{width:1.05rem;height:1.05rem;flex:none}
/* #identity: the IDENTITY · VISION cards float gently (8px over 3.6s), half a beat apart; the translate property leaves the reveal transform alone */
@keyframes rbp-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:no-preference){#identity .rbp-idv > .rb-card{animation:rbp-float 3.6s ease-in-out infinite}#identity .rbp-idv > .rbp-vision{animation-delay:-1.4s}}
/* #why cards: hover lifts 4px with a purple border (pointer devices only); the reveal keeps its stagger delay, the hover has none */
@media (hover:hover){#why .rbp-why{transition-property:opacity,transform,translate,border-color;transition-duration:var(--rb-dur-reveal),var(--rb-dur-reveal),.25s,.25s;transition-timing-function:var(--rb-ease-out);transition-delay:calc(var(--rb-i,0) * var(--rb-stagger)),calc(var(--rb-i,0) * var(--rb-stagger)),0s,0s}#why .rbp-why:hover{translate:0 -4px;border-color:var(--rb-accent)}}
/* #team (2026-10-12): no role badge — name, position in accent, a hairline, then the bio */
.rbp-member .rbp-member__head{display:block}
.rbp-member .rbp-member__position{margin-top:.3rem;font-size:.92rem;font-weight:700;color:var(--rb-accent)}
.rbp-member__bio{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--rb-line)}
/* #affiliate: the two company cards (뷰티어게인 · 리브어게인) float like the IDENTITY · VISION pair, half a beat apart */
@media (prefers-reduced-motion:no-preference){#affiliate .rbp-roles > .rb-card{animation:rbp-float 3.6s ease-in-out infinite}#affiliate .rbp-roles > .rb-card:nth-child(2){animation-delay:-1.4s}}