/* /service page — page-specific layer on top of site.css (tokens + .rb-* components, CONTENT_PLAN §6.3). Logical properties only (RTL).
   Rebuilt 2026-10 for the 5-area map + 9 solution rows. Mock parts are neutral; one accent indicator per mock. */

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

/* ===== Line breaking =====
   ja: break headings and leads at phrase boundaries (Chromium), not inside words; balanced short leads avoid orphans. */
html:lang(ja) :is(h1,h2,h3),html:lang(ja) .rb-page-hero .rb-lead,html:lang(ja) .rb-heading .rb-lead{word-break:auto-phrase}
.rb-page-hero .rb-lead,.rb-heading--center .rb-lead{text-wrap:balance}

/* ===== Solution rows (.rb-feature): head, sizes, plan-scope line ===== */
.rb-svc-head{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .625rem}
.rb-svc-head .rb-kicker{color:var(--rb-accent)}
.rb-svc-head .rb-tag{white-space:normal}
.rb-svc-head + .rb-feature__title{margin-top:.625rem}
.rb-feature__text > .rb-feature__sub{margin-top:.625rem}
@media (min-width:1024px){
  .rb-feature{align-items:start}
  .rb-feature__media{position:sticky;top:6.5rem}
}
.rb-svc-scope{margin-top:1rem}
p.rb-note.rb-svc-scope{display:inline-flex;max-width:100%}
.rb-svc-minis{gap:.625rem;margin-top:1.5rem}
.rb-svc-minis .rb-mini{height:100%}
.rb-svc-minis .rb-kicker{font-size:.7rem}
@media (min-width:640px) and (max-width:1023px){.rb-svc-minis--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.rb-svc-minis--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rb-feature__text .rb-flow{margin-top:1.5rem}
.rb-feature__text > .rb-check-list{margin-top:.75rem}
.rb-feature__text .rb-chip-row{margin-top:1.5rem}
.rb-feature__text .rb-item-list{gap:1rem}

/* Text stats inside rows: values like "1주일 → 5분", "3일 → 4분", "10초~3분" stay on one line at any width */
.rb-svc-stat{padding:1.25rem 1.5rem}
.rb-svc-stat .rb-stat__num{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem)}
.rb-svc-stat .rb-stat__label{margin-top:.5rem}
.rb-svc-stats2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}
.rb-svc-stats2 .rb-stat{display:block;padding:1rem 1.25rem}
.rb-svc-stats2 .rb-stat__num{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem)}
.rb-svc-stats2 .rb-stat__label{margin-top:.375rem;font-size:.92rem;text-align:start}
@media (max-width:399px){.rb-svc-stats2{grid-template-columns:minmax(0,1fr)}}

/* Two-column "대행과 다른 점" tables inside a row */
.rb-svc-diff__title{margin-top:1.75rem}
.rb-compare.rb-svc-diff{margin-top:.75rem}
.rb-svc-diff .rb-compare__row{grid-template-columns:minmax(0,.8fr) repeat(2,minmax(0,1fr));padding-block:.625rem}
.rb-svc-diff .rb-compare__label{font-size:.85rem}
.rb-svc-diff .rb-compare__col{padding:.5rem .625rem}
.rb-svc-diff .rb-compare__col-title{font-size:.85rem}
@media (max-width:767px){.rb-svc-diff .rb-compare__row{grid-template-columns:1fr}}

/* ===== #shift: PAST / NOW / NEXT ===== */
.rb-svc-stage{display:flex;flex-direction:column;min-width:0}
.rb-svc-stage__tag{min-block-size:1.6rem;display:flex;align-items:center}
.rb-svc-stage__title{margin-top:.5rem}
.rb-svc-stage__sub{margin-top:.125rem}
.rb-svc-stage__mock{margin-top:1rem}
.rb-svc-stage__mock .rb-figure__body{padding:1rem}
@media (min-width:1024px){.rb-svc-stage__mock .rb-figure__body{min-block-size:15.25rem}}
.rb-svc-stage > .rb-check-list{margin-top:1rem}

/* ===== #solutions: the 5 plan areas (3 + 2 at ≥1024) ===== */
.rb-svc-area__desc{margin-block:-.25rem .875rem;font-size:.85rem;line-height:1.55;color:var(--rb-ink-2);text-wrap:pretty}
.rb-svc-map .rb-solmap__area{scroll-margin-top:6.5rem}
/* one numbering per card: the area number only (deck solution numbers 01–09 live in the solution index + row kickers) */
.rb-svc-map .rb-solmap__sol{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon title" "icon desc" "icon tag"}

/* ===== Solution index: sticky under the floating header while #website … #crm scroll. Zero-height sticky box, so it takes
   no room in the flow; the pill overlays the rows' top padding. Scrolls sideways on narrow screens ===== */
.rb-svc-index{display:flow-root;position:sticky;top:4rem;z-index:30;block-size:0}   /* flow-root: the list's top margin must not collapse through the 0-height box */
@media (min-width:640px){.rb-svc-index{top:4.75rem}}
.rb-svc-index__list{display:flex;gap:.125rem;inline-size:max-content;max-inline-size:calc(100% - 1.5rem);margin:.75rem auto 0;padding:.3rem;overflow-x:auto;border:1px solid var(--rb-line);border-radius:var(--rb-radius-pill);background:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--rb-shadow-header);scrollbar-width:none}
.rb-svc-index__list::-webkit-scrollbar{display:none}
.rb-svc-index__link{display:inline-flex;align-items:center;gap:.375rem;padding:.45rem .75rem;border-radius:var(--rb-radius-pill);font-size:.8rem;font-weight:700;line-height:1.2;color:var(--rb-ink-2);white-space:nowrap;transition:background-color var(--rb-dur-mid),color var(--rb-dur-mid)}
.rb-svc-index__link:is(:hover,[aria-current="true"]){background:var(--rb-accent-soft);color:var(--rb-accent-deep)}   /* aria-current: the row being read (site.js 5d) */
.rb-svc-index__no{font:700 .68rem/1 var(--rb-font-display);color:var(--rb-muted)}
.rb-svc-index__link:hover .rb-svc-index__no{color:inherit}
/* the area with the most solutions (02 콘텐츠) spans two rows: 01 | 02 | 03 / 04 | 02 | 05 (2 cols: 01 | 02 / 03 | 02 / 04 | 05) */
@media (min-width:640px){.rb-svc-map .rb-svc-area--tall{grid-row:span 2}}

/* ===== #website: browser mock ===== */
.rb-svc-site .rb-figure__body{display:grid;gap:.875rem}
.rb-svc-site__nav{display:flex;align-items:center;gap:.5rem}
.rb-svc-site__logo{inline-size:2.25rem;block-size:.75rem;margin-inline-end:auto;border-radius:var(--rb-radius-pill);background:var(--rb-ink-2);opacity:.75}
.rb-svc-site__navline{inline-size:2.5rem;block-size:.4rem;border-radius:var(--rb-radius-pill);background:var(--rb-line-strong)}
.rb-svc-site__hero{display:grid;gap:.5rem;padding:1.25rem;border-radius:var(--rb-radius-md);background:var(--rb-grad-media)}
.rb-svc-site__hero span{display:block;block-size:.55rem;border-radius:var(--rb-radius-pill);background:rgb(255 255 255 / .85)}
.rb-svc-site__hero span:nth-child(1){inline-size:55%;block-size:.8rem}
.rb-svc-site__hero span:nth-child(2){inline-size:75%}
.rb-svc-site__hero span:nth-child(3){inline-size:40%}
.rb-svc-site__menu-title{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--rb-ink)}
.rb-svc-site__menu-title svg{inline-size:.95rem;block-size:.95rem;color:var(--rb-muted)}
.rb-svc-site__menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.rb-svc-site__menu li{block-size:2.25rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-sm);background:linear-gradient(var(--rb-line-strong),var(--rb-line-strong)) .75rem 50%/45% .4rem no-repeat,var(--rb-surface)}
[dir="rtl"] .rb-svc-site__menu li{background-position:calc(100% - .75rem) 50%,0 0}
.rb-svc-site__langs{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem}
.rb-svc-site__plus{font-size:.8rem;font-weight:700;color:var(--rb-muted)}
.rb-svc-code{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2rem;padding:.25rem .45rem;border-radius:var(--rb-radius-pill);background:var(--rb-surface-2);font:700 .68rem/1.2 var(--rb-font-display);letter-spacing:.02em;color:var(--rb-ink-2);direction:ltr;unicode-bidi:isolate}
.rb-svc-code.is-active{background:var(--rb-accent-soft);color:var(--rb-accent-deep);box-shadow:inset 0 0 0 1px rgb(var(--rb-accent-rgb) / .3)}
.rb-svc-site .rb-mock__foot{margin-top:0}

/* ===== #search: SEO / GEO / AEO list + proof mocks ===== */
.rb-svc-what{display:grid;gap:.5rem;margin-top:1.5rem}
.rb-svc-what li{display:flex;align-items:center;gap:.75rem;padding:.625rem .875rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-md);background:#fff}
.rb-svc-what .rb-code-badge{inline-size:2.75rem;block-size:2rem;font-size:.72rem}
.rb-svc-what b{display:block;font-size:.92rem;font-weight:700;line-height:1.35;color:var(--rb-ink)}
.rb-svc-what small{display:block;font-size:.8rem;line-height:1.45;color:var(--rb-ink-2)}
.rb-svc-proofs{display:grid;gap:1rem}
.rb-svc-proof .rb-figure__body{display:grid;gap:.75rem;padding:1.25rem}
.rb-svc-proof__head{display:flex;align-items:center;gap:.625rem;font-size:.95rem;color:var(--rb-ink)}
.rb-svc-proof__result{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem .875rem;border:1px solid rgb(var(--rb-accent-rgb) / .25);border-radius:var(--rb-radius-sm);background:var(--rb-accent-tint)}
.rb-svc-proof__text{font-size:.88rem;font-weight:700;line-height:1.45;color:var(--rb-ink);text-wrap:pretty}
.rb-svc-proof__rest{display:grid;gap:.375rem}
.rb-svc-proof__rest li{block-size:2rem;border-radius:var(--rb-radius-sm);background:linear-gradient(var(--rb-line-strong),var(--rb-line-strong)) .75rem 50%/50% .35rem no-repeat,var(--rb-surface-2)}
[dir="rtl"] .rb-svc-proof__rest li{background-position:calc(100% - .75rem) 50%,0 0}
.rb-svc-proof__rest li + li{opacity:.6}

/* ===== #blog: post mock ===== */
.rb-svc-post .rb-figure__body{display:grid;justify-items:start;gap:.5rem}
.rb-svc-post__title{margin-top:.25rem;font-family:var(--rb-font-display);font-size:1.2rem;font-weight:800;line-height:1.35;letter-spacing:var(--rb-tracking-display);color:var(--rb-ink);text-wrap:balance}
.rb-svc-post__sub{font-size:.82rem;color:var(--rb-muted)}
.rb-svc-post__lines{display:grid;gap:.4rem;inline-size:100%;margin-block:.375rem}
.rb-svc-post__lines span{block-size:.45rem;border-radius:var(--rb-radius-pill);background:var(--rb-surface-2)}
.rb-svc-post__lines span:nth-child(2){inline-size:88%}.rb-svc-post__lines span:nth-child(3){inline-size:64%}
.rb-svc-post__path{display:flex;align-items:center;gap:.5rem;inline-size:100%;padding:.625rem .875rem;border-radius:var(--rb-radius-sm);background:var(--rb-accent-tint);font-size:.85rem;font-weight:700;color:var(--rb-accent-deep)}
.rb-svc-post__path svg{flex:none;inline-size:1rem;block-size:1rem}

/* ===== #translation: 1 → 6 mock ===== */
.rb-svc-tr__body{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.6fr);align-items:center;gap:1rem}
.rb-svc-tr__src,.rb-svc-tr__out{display:grid;gap:.625rem;justify-items:center;text-align:center}
.rb-svc-tr__img{position:relative;display:grid;align-content:end;gap:.3rem;inline-size:100%;aspect-ratio:4/5;padding:.625rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-sm);background:var(--rb-grad-media)}
.rb-svc-tr__img span{display:block;block-size:.4rem;border-radius:var(--rb-radius-pill);background:rgb(255 255 255 / .9)}
.rb-svc-tr__img span + span{inline-size:65%}
.rb-svc-tr__img--sm{aspect-ratio:1;padding:.4rem;background:var(--rb-surface-2)}
.rb-svc-tr__img--sm span{background:var(--rb-line-strong)}
.rb-svc-tr__label{font-size:.82rem;font-weight:700;color:var(--rb-ink)}
.rb-svc-tr__arrow{display:grid;place-items:center;inline-size:2.25rem;block-size:2.25rem;border-radius:50%;background:var(--rb-accent-soft);color:var(--rb-accent)}
.rb-svc-tr__arrow svg{inline-size:1.05rem;block-size:1.05rem}
.rb-svc-tr__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;inline-size:100%}
.rb-svc-tr__tiles li{display:grid;justify-items:center;gap:.375rem}
@media (max-width:479px){
  .rb-svc-tr__body{grid-template-columns:1fr;justify-items:center}
  .rb-svc-tr__src{inline-size:55%}
  .rb-svc-tr__out{inline-size:100%}
  .rb-svc-tr__arrow{transform:rotate(90deg)}
}

/* ===== #banner: generator mock (tones reuse the .rb-reel--k* fills of site.css) ===== */
.rb-svc-banner__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.rb-svc-banner__tile{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;aspect-ratio:4/5;padding:.75rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-md);background:var(--rb-reel-bg,var(--rb-surface-2))}
.rb-svc-banner__tile .rb-tag{align-self:flex-start;background:rgb(255 255 255 / .85)}
.rb-svc-banner__lines{display:grid;gap:.35rem}
.rb-svc-banner__lines span{display:block;block-size:.45rem;border-radius:var(--rb-radius-pill);background:rgb(255 255 255 / .9)}
.rb-svc-banner__lines span + span{inline-size:60%}
.rb-svc-banner__status{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding-top:.875rem;border-top:1px solid var(--rb-line);font-size:.85rem;font-weight:700;color:var(--rb-ink-2)}

/* ===== #design: modes + editor mock ===== */
.rb-svc-modes{gap:.5rem;margin-top:.75rem}
@media (max-width:639px){.rb-svc-modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rb-svc-mode{display:flex;align-items:center;gap:.75rem;padding:.75rem .875rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-md);background:#fff}
.rb-svc-mode__no{flex:none;font:800 1.35rem/1 var(--rb-font-display);color:var(--rb-accent)}
.rb-svc-mode__io{display:flex;flex-wrap:wrap;align-items:center;gap:.125rem .375rem;min-width:0;font-size:.84rem;line-height:1.35;color:var(--rb-ink-2)}
.rb-svc-mode__io svg{inline-size:.85rem;block-size:.85rem;color:var(--rb-muted)}
.rb-svc-mode__io b{color:var(--rb-ink)}
.rb-svc-editor__ui{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.75rem}
.rb-svc-editor__tools{display:grid;align-content:start;gap:.5rem;padding:.5rem;border-radius:var(--rb-radius-sm);background:var(--rb-surface-2)}
.rb-svc-editor__tools span{display:block;aspect-ratio:1;border-radius:.375rem;background:#fff;box-shadow:inset 0 0 0 1px var(--rb-line)}
.rb-svc-editor__canvas{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr auto;gap:.625rem;min-block-size:11rem;padding:1rem;border:1px dashed var(--rb-line-strong);border-radius:var(--rb-radius-sm);background:var(--rb-surface)}
.rb-svc-editor__canvas span{border-radius:.5rem;background:var(--rb-grad-media)}
.rb-svc-editor__canvas span:nth-child(1){grid-row:1/span 2}
.rb-svc-editor__canvas span:nth-child(2){background:var(--rb-surface-2)}
.rb-svc-editor__canvas span:nth-child(3){block-size:1.25rem;background:var(--rb-line)}
.rb-svc-editor__stats{gap:.5rem;margin-top:1rem}
.rb-svc-editor__stats .rb-stat{padding:1rem;box-shadow:none}
.rb-svc-editor__stats .rb-stat__num{font-size:clamp(1.35rem,1.05rem + 1vw,1.75rem)}
.rb-svc-editor__stats .rb-stat__label{margin-top:.375rem;font-size:.85rem}
@media (min-width:768px){.rb-svc-editor__stats.rb-stat-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== #chatbot: response stat, rail (always the vertical variant inside the text column), phone mock ===== */
.rb-svc-resp .rb-stat__num{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;white-space:normal}
.rb-svc-resp .rb-stat__num .rb-tag{font-family:var(--rb-font-body);letter-spacing:0}
.rb-svc-resp .rb-stat__label{font-size:.75rem;font-weight:700;letter-spacing:var(--rb-tracking-kicker);color:var(--rb-muted)}
.rb-svc-resp .rb-stat__sub{font-size:.92rem;color:var(--rb-ink-2)}
.rb-rail.rb-svc-rail{max-width:none;margin-top:1.5rem}
.rb-svc-rail .rb-rail__list{gap:.75rem}
.rb-svc-rail .rb-rail__card{padding:.875rem 1.125rem}
.rb-svc-rail .rb-card__title{font-size:.95rem}
.rb-svc-rail .rb-card__text{margin-top:.125rem;font-size:.85rem}
@media (min-width:768px){
  .rb-svc-rail .rb-rail__line{inset-inline-start:1.35rem}
  .rb-svc-rail .rb-rail__item{display:block}
  .rb-svc-rail .rb-rail__node{position:absolute;top:.25rem;inset-inline-start:0}
  .rb-svc-rail .rb-rail__card,.rb-svc-rail .rb-rail__item:nth-child(even) .rb-rail__card{margin:0;margin-inline-start:4rem}
}
.rb-svc-chat{display:grid;place-items:center;padding:2rem 1rem;border-radius:var(--rb-radius-card);background:var(--rb-grad-media)}
.rb-phone.rb-svc-chat__phone{inline-size:min(17rem,100%);border-radius:2rem}
.rb-svc-chat__top{display:flex;align-items:center;gap:.5rem;padding:.75rem .875rem;border-bottom:1px solid var(--rb-line);font-size:.85rem;font-weight:700;color:var(--rb-ink)}
.rb-svc-chat__top .rb-icon-well{inline-size:1.75rem;block-size:1.75rem}
.rb-svc-chat__top .rb-icon-well svg{inline-size:.9rem;block-size:.9rem}
.rb-svc-chat__body{display:grid;gap:.75rem;padding:1rem .875rem 1.25rem;background:var(--rb-surface)}
.rb-svc-chat__bubble{display:grid;gap:.35rem;inline-size:80%;padding:.75rem;border-radius:.875rem;border-start-start-radius:.25rem;background:#fff;box-shadow:inset 0 0 0 1px var(--rb-line)}
.rb-svc-chat__bubble span{display:block;block-size:.4rem;border-radius:var(--rb-radius-pill);background:var(--rb-line-strong)}
.rb-svc-chat__bubble span + span{inline-size:60%}
.rb-svc-chat__menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem}
.rb-svc-chat__menu .rb-chip{justify-content:center;min-height:2.125rem;padding:.35rem .5rem;font-size:.78rem;white-space:normal;text-align:center}
.rb-svc-chat__cta{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem .75rem;border-radius:var(--rb-radius-pill);background:var(--rb-accent);color:#fff;font-size:.82rem;font-weight:700}
.rb-svc-chat__cta svg{inline-size:.95rem;block-size:.95rem}

/* ===== #crm: numbered gets + console mock ===== */
.rb-svc-gets{margin-top:.875rem}
.rb-svc-gets .rb-index{margin-top:.1rem}
.rb-svc-console .rb-figure__body{display:grid;gap:.875rem}
.rb-svc-console__chips{margin:0}
.rb-svc-console__chips .rb-chip{min-height:2rem;padding:.3rem .75rem;font-size:.8rem}
.rb-svc-console__list{display:grid;gap:.375rem}
.rb-svc-console__list li{block-size:2.25rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-sm);background:radial-gradient(circle,var(--rb-line-strong) 0 .3rem,transparent .32rem) .9rem 50%/.7rem .7rem no-repeat,linear-gradient(var(--rb-line),var(--rb-line)) 2.25rem 50%/40% .4rem no-repeat,#fff}
[dir="rtl"] .rb-svc-console__list li{background-position:calc(100% - .9rem) 50%,calc(100% - 2.25rem) 50%,0 0}
.rb-svc-diag{display:grid;gap:.5rem;padding:1rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-md);background:var(--rb-surface)}
.rb-svc-diag__label{font-size:.88rem;font-weight:700;color:var(--rb-ink)}
.rb-svc-meter{gap:1rem}
.rb-svc-meter .rb-meter__track{flex:1;inline-size:auto;block-size:.625rem;overflow:visible}
.rb-svc-meter .rb-meter__fill{background:var(--rb-accent)}
.rb-svc-meter__tick{position:absolute;top:-.3rem;bottom:-.3rem;inline-size:2px;margin-inline-start:-1px;border-radius:1px;background:var(--rb-ink-2)}
.rb-svc-diag__value{flex:none;font:800 1.35rem/1 var(--rb-font-display);letter-spacing:-.02em;color:var(--rb-ink);direction:ltr;unicode-bidi:isolate}
.rb-svc-diag__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.375rem .75rem;font-size:.8rem;font-weight:600;color:var(--rb-muted)}
.rb-svc-console .rb-mock__foot{margin-top:0}

/* ===== #technology (night) ===== */
.rb-svc-tech{margin-top:1.25rem}
.rb-svc-tech__card{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;border-radius:var(--rb-radius-card)}
.rb-svc-tech__card .rb-kicker{color:var(--rb-accent-bright)}
.rb-svc-tech__title{margin-top:.25rem;font-family:var(--rb-font-display);font-size:1.35rem;font-weight:800;line-height:1.25;letter-spacing:var(--rb-tracking-display);color:#fff}
.rb-svc-tech__sub{font-size:.88rem;font-weight:600;color:var(--rb-on-night-2)}
.rb-svc-tech__text{margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--rb-night-border);font-size:.9rem;line-height:1.55;color:var(--rb-on-night-3);text-wrap:pretty}
.rb-svc-knowhow{row-gap:1.5rem;margin-top:1.5rem}

/* ===== #loop (tint): hub facts + INPUT / RETURN ===== */
.rb-svc-loopfacts{display:flex;justify-content:center;gap:1.25rem}
.rb-svc-loopfacts li{display:grid;justify-items:center;gap:.125rem}
/* the three facts are equal: numbers ink, units/labels carry the accent (design-spec: stat units in accent) */
.rb-svc-loopfacts b{font:800 clamp(1.6rem,1.3rem + 1vw,2.1rem)/1 var(--rb-font-display);letter-spacing:-.02em;color:var(--rb-ink)}
.rb-svc-loopfacts span{font-size:.8rem;font-weight:700;color:var(--rb-accent);white-space:nowrap}
.rb-svc-io{max-width:var(--rb-container-narrow);margin-inline:auto}
.rb-svc-io__card{display:flex;align-items:center;gap:1rem;height:100%}
.rb-svc-io__card .rb-kicker{font-size:.72rem}
.rb-svc-io__card .rb-h4{margin-top:.125rem}
/* #crm: a channel that is not live yet (WeChat) — dimmed card, small grey status badge after the title */
.rb-mini--soon :is(.rb-mini__title,.rb-mini__text){color:var(--rb-muted)}   /* muted text, not opacity: the "개발 중" tag stays readable */
.rb-mini__badge{margin-inline-start:.375rem;padding:.125rem .5rem;font-size:.6875rem;vertical-align:.1em}
/* solution index: a thin divider where the next service area (common.areas) starts, so the bar reads like the 서비스 menu */
.rb-svc-index__group{display:flex;align-items:center}.rb-svc-index__group::before{content:"";flex:none;inline-size:1px;block-size:1.1rem;margin-inline:.2rem;background:var(--rb-line-strong)}
@media (min-width:1024px){.rb-svc-index__link{padding-inline:.5rem}}
/* service review (2026-10-12): area bands, sticky media column, notes under the text column in mirrored rows, diff band */
.rb-svc-band{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .75rem;margin-bottom:2.5rem;padding-bottom:1rem;border-bottom:1px solid var(--rb-line)}
.rb-svc-band__no{display:inline-grid;place-items:center;flex:none;min-inline-size:1.75rem;block-size:1.75rem;padding-inline:.375rem;border-radius:var(--rb-radius-pill);background:var(--rb-accent-soft);color:var(--rb-accent-deep);font:800 .75rem/1 var(--rb-font-display)}
.rb-svc-band__name{font-family:var(--rb-font-display);font-size:1.1rem;font-weight:800;letter-spacing:var(--rb-tracking-display);color:var(--rb-ink)}
.rb-svc-band__desc{flex:1 1 18rem;font-size:.9rem;color:var(--rb-muted);text-wrap:pretty}
@media (min-width:1024px) and (min-height:800px){.rb-svc-rows .rb-feature{align-items:start}.rb-svc-rows .rb-feature__media{position:sticky;top:9rem}}
@media (min-width:768px){.rb-svc-diff .rb-compare__cell.is-us{margin-block:-.625rem;padding-block:.625rem}}
.rb-svc-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem 2.5rem;margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--rb-line)}
.rb-svc-foot__notes{flex:1 1 26rem;display:grid;gap:.2rem;font-size:.78rem;line-height:1.6;color:var(--rb-muted);text-wrap:pretty}
.rb-svc-foot .rb-svc-scope{flex:none;margin:0}
.rb-svc-scope--note{display:inline-flex;align-items:center;gap:.375rem;font-size:.85rem;font-weight:600;color:var(--rb-ink-2)}
.rb-svc-scope--note .rb-icon,.rb-svc-scope--note svg{flex:none;inline-size:1rem;block-size:1rem;color:var(--rb-accent)}
@media (max-width:767px){.rb-svc-foot{margin-top:2rem;gap:.75rem}.rb-svc-foot__notes{flex-basis:100%}}
/* index bar numbers: the same small square badge as the 서비스 menu items */
.rb-svc-index__no{display:inline-grid;place-items:center;flex:none;min-inline-size:1.45rem;block-size:1.15rem;padding-inline:.25rem;border:1px solid rgb(var(--rb-accent-rgb) / .28);border-radius:.375rem;background:var(--rb-accent-tint);color:var(--rb-accent-deep);font:700 .64rem/1 var(--rb-font-display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.rb-svc-index__link:is(:hover,[aria-current="true"]) .rb-svc-index__no{background:#fff;color:var(--rb-accent-deep)}
@media (min-width:1024px){.rb-svc-index__group::before{margin-inline:.1rem}.rb-svc-index__link{gap:.3rem;padding-inline:.34rem;font-size:.78rem}.rb-svc-index__no{min-inline-size:1.3rem;padding-inline:.2rem;font-size:.6rem}}
/* row kicker: the solution number as the same square badge as the menu / index, then the area name */
.rb-svc-head .rb-kicker{display:inline-flex;align-items:center;gap:.5rem}
.rb-svc-head__no,.rb-svc-map .rb-solmap__sol-no{display:inline-grid;place-items:center;min-inline-size:1.6rem;block-size:1.3rem;padding-inline:.3rem;border:1px solid rgb(var(--rb-accent-rgb) / .28);border-radius:.375rem;background:var(--rb-accent-tint);color:var(--rb-accent-deep);font:800 .7rem/1 var(--rb-font-display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* service map: each solution = number badge + title + its one-line core feature (common.sol desc) */
.rb-svc-map .rb-solmap__sol-no{margin-inline-end:.45rem;vertical-align:.12em}
.rb-svc-map .rb-solmap__sol-desc{display:block;margin-top:.15rem}
/* mobile review 2026-10-12: the sticky index pill (~56px) overlays #website's top padding, only 52px on phones */
.rb-svc-index + #website{padding-top:max(var(--rb-section-y),5rem)}
/* phones: all four mode cards wrap the same way (input → / output) */
@media (max-width:639px){.rb-svc-mode__io b{flex-basis:100%}}