/* 레바온 서비스 목록 (P6, 2026-10-21). Loaded after hub-site.css + hub-chrome.css on index.html only.
   Tokens: Solution Hub/DESIGN_TOKENS.md (refero "Vercel" base + 15_디자인_원칙_계층.md).
   Neutral base 3 steps, one accent (Hub teal) for the primary action and current location only,
   radius 4 (+ pill for chips), type 13/16/21/28/37, weights 400/500/600, 4·8 spacing, controls 48px. */

body[data-page="services"]{
  --canvas:#fafafa;      /* base: background */
  --paper:#ffffff;       /* base: surface */
  --line:#ebebeb;        /* base: hairline */
  --line-2:#ebebeb;
  --ink:#171717;         /* text 1: headings, names */
  --ink-2:#4d4d4d;       /* text 2: body */
  --muted:#666666;       /* text 3: meta, counts */
  --brand:#135666;--brand-hover:#0e4552;--brand-press:#0b3a45;--brand-tint:#e2eef0; /* accent: Hub mark */
  --ring:0 0 0 1px rgba(0,0,0,.08);
  --r:4px;--r-panel:4px;
}
body[data-page="services"] :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
body[data-page="services"] .page{width:min(1280px,calc(100% - 2 * var(--site-gutter)));padding:40px 0 96px}

/* Buttons: primary (filled) / secondary (outline) / text. 48px. States: hover, focus, pressed, disabled, loading. */
body[data-page="services"] .btn{min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font-size:16px;font-weight:500;transition:background .15s,border-color .15s}
body[data-page="services"] .btn:hover{background:var(--canvas);border-color:#c9c9c9}
body[data-page="services"] .btn:active{background:var(--line)}
body[data-page="services"] .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
body[data-page="services"] .btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
body[data-page="services"] .btn.primary:active{background:var(--brand-press)}
body[data-page="services"] .btn:disabled,body[data-page="services"] .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
body[data-page="services"] .btn[aria-busy="true"]{cursor:progress;opacity:.7}

/* 1st: page title (display 37/600), 2nd: filters, 3rd: zones */
body[data-page="services"] .page-head{align-items:end;padding-bottom:32px;border-bottom:0}
body[data-page="services"] .page-head h1{font-size:37px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
body[data-page="services"] .page-head .lead{margin-top:16px;max-width:60ch;color:var(--ink-2);font-size:16px;line-height:1.5}

/* Filters: current choice = accent (current location), never filled like the primary action */
body[data-page="services"] .catalog-tools{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filter-groups{display:flex;flex-wrap:wrap;gap:8px}
.filter-group{display:inline-flex;gap:4px;padding:4px;background:#fff;border-radius:4px;box-shadow:var(--ring)}
.filter-label{display:inline-flex;align-items:center;padding:0 8px 0 12px;color:var(--muted);font-size:13px;white-space:nowrap}
.filter-group button{min-height:48px;min-width:48px;padding:0 16px;border:0;border-radius:4px;background:transparent;color:var(--ink-2);font-size:16px;font-weight:400;cursor:pointer;transition:background .15s}
.filter-group button:hover{background:var(--canvas);color:var(--ink)}
.filter-group button:active{background:var(--line)}
.filter-group button[aria-pressed="true"]{background:var(--brand-tint);color:var(--brand);font-weight:600;box-shadow:inset 0 -2px 0 var(--brand)}
body[data-page="services"] .catalog-search{flex:1 1 240px;width:auto;max-width:360px;margin-left:auto}
body[data-page="services"] .catalog-search input:not([type=checkbox]){min-height:48px;border-color:var(--line);border-radius:4px;font-size:16px}
body[data-page="services"] .catalog-search input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
body[data-page="services"] .catalog-tools p{flex-basis:100%;color:var(--muted);font-size:13px}

/* Zones: 웹 / 모바일 앱 — heading column left (H2 28/600), audience lists right */
.svc-zones{display:flex;flex-direction:column;gap:96px;padding-top:40px}
.zone{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.zone-head{position:sticky;top:calc(var(--site-top) + 24px);padding-top:16px}
.zone-head::before{content:"";display:block;width:24px;height:4px;margin-bottom:16px;background:var(--brand)}
.zone-head h2{font-size:28px;font-weight:600;line-height:1.25;color:var(--ink)}
.zone-head p{margin-top:8px;color:var(--muted);font-size:13px}
.zone-body{display:flex;flex-direction:column;gap:40px;min-width:0}

/* Audience blocks (H3 21/600) separated by 40px */
.aud h3{display:flex;align-items:baseline;gap:8px;margin-bottom:16px;font-size:21px;font-weight:600;line-height:1.3;color:var(--ink)}
.aud h3 span{color:var(--muted);font-size:13px;font-weight:400}
.svc-list{margin:0;padding:0;list-style:none;background:#fff;border-radius:4px;box-shadow:var(--ring)}
.svc-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:16px 24px;padding:20px 24px;border-top:1px solid var(--line)}
.svc-row:first-child{border-top:0}
.svc-icon{width:40px;height:40px;border-radius:4px;object-fit:contain}
.svc-name{margin:0;font-size:16px;font-weight:600;line-height:1.5;color:var(--ink)}
.svc-en{color:var(--muted);font-weight:400}
.svc-desc{margin-top:4px;color:var(--ink-2);font-size:16px;line-height:1.5}
.svc-act{display:flex;align-items:center;gap:8px}
.svc-price{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--ink-2);font-size:16px;text-decoration:none}
.svc-price:hover{color:var(--ink);text-decoration:underline}
.svc-wait{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--muted);font-size:13px}
.svc-wait svg{fill:none;stroke:currentColor;stroke-width:1.5}

body[data-page="services"] .state-box{border:0;box-shadow:var(--ring);border-radius:4px}
body[data-page="services"] #searchEmpty{margin-top:40px}
body[data-page="services"] #searchEmpty .btn{margin-top:16px}
body[data-page="services"] .cta-strip{margin-top:96px;border:0;box-shadow:var(--ring);border-radius:4px}
body[data-page="services"] .cta-strip h2{font-size:21px;font-weight:600}

@media (prefers-reduced-motion:reduce){body[data-page="services"] *{transition:none!important}}
@media (max-width:900px){
  .zone{grid-template-columns:minmax(0,1fr);gap:16px}
  .zone-head{position:static;padding-top:0}
  .zone-head::before{margin-bottom:12px}
  .zone-head h2,.zone-head p{display:inline}
  .zone-head p{margin:0 0 0 12px}
  body[data-page="services"] .catalog-search{flex-basis:100%;max-width:none;margin-left:0}
}
@media (max-width:760px){
  body[data-page="services"] .page-head{grid-template-columns:minmax(0,1fr)}
  body[data-page="services"] .page-head h1{font-size:28px}
  .svc-zones{gap:56px}
  .svc-row{grid-template-columns:40px minmax(0,1fr);padding:16px}
  .svc-act{grid-column:2}
  .filter-groups,.filter-group{width:100%}
  .filter-group button{flex:1 1 0;padding:0 8px}
}