/* 운영 사항(operations.html, 2026-10-25) — tokens.css·hub.css 위에 얹는다. 문서형 페이지: 히어로(번호 카드 여섯) → 왼쪽 따라오는 목차 · 오른쪽 본문.
 * 섬이 아니다 — 히어로도 바탕을 칠하지 않아 페이지 배경(오로라·그레인)이 그대로 보이고, 라이트 테마에서는 라이트 토큰으로 그린다.
 * 그래서 section-hero 클래스(tokens.css 가 라이트에서 다크 섬 토큰을 다시 선언한다)와 section-hero.css 를 쓰지 않고, 사진 히어로 부품 이름
 * (section-hero-copy·hero-eyebrow·hero-actions·hero-btn·section-hero-wide)만 빌려 여기서 토큰으로 그린다. 색은 토큰만(theme-ratchet 상한 0).
 * 주황(--ember)은 실행 버튼과 현재 위치(라벨·목차의 지금 절)에만, 번호는 --amber, 카드 제목은 본문색(올리면 --link).
 * 규칙: .claude/rules/hubs/intro.md '운영 사항' · 시험: scripts/lib/operations-page.test.js */
.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:600px;height:600px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-240px;left:-180px;animation:opsb1 22s ease-in-out infinite alternate}
.blob.b{width:480px;height:480px;background:radial-gradient(circle,var(--glow3),transparent 60%);top:46%;right:-200px;animation:opsb2 26s ease-in-out infinite alternate}
@keyframes opsb1{to{transform:translate(70px,60px) scale(1.08)}}
@keyframes opsb2{to{transform:translate(-60px,-50px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob.a,.blob.b{animation:none}}

.ops-main{padding-bottom:24px} /* 바닥글이 위 여백 84px 을 갖는다(nav.css) */

/* ── 히어로: 경로 → 라벨 → 제목 → 설명 → 버튼, 아래 넓은 칸에 번호 카드 여섯 ── */
.ops-hero{padding-top:52px;padding-bottom:4px}
.ops-hero .section-hero-copy{max-width:760px}
.ops-hero .hero-eyebrow{margin:0 0 14px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:var(--ember)}
.ops-hero h1{margin:0;font-size:clamp(42px,5.4vw,68px);font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.ops-lede{margin:22px 0 0;max-width:60ch;font-size:17px;line-height:1.85;color:var(--read);text-wrap:pretty}
.ops-hero .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ops-hero .hero-btn{display:inline-flex;align-items:center;min-height:46px;padding:12px 20px;border:1px solid var(--glass-line);border-radius:10px;background:var(--glass);backdrop-filter:blur(10px);color:var(--txt);font-size:14px;font-weight:600;transition:border-color .2s,transform .2s,box-shadow .2s}
.ops-hero .hero-btn:hover{border-color:rgba(var(--ember-rgb),.55);transform:translateY(-2px)}
.ops-hero .hero-btn.is-primary{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
.ops-hero .hero-btn.is-primary:hover{box-shadow:0 12px 26px -14px rgba(var(--ember-rgb),.75)}

/* 번호 카드 — 카드 전체가 그 절 앵커. 좁은 화면에서는 목차를 숨기고 이 카드가 목차를 맡는다 */
.ops-hero .section-hero-wide{margin-top:48px}
.ops-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ops-card{position:relative;display:flex;flex-direction:column;height:100%;min-height:150px;padding:20px 22px 22px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);transition:border-color .2s,transform .2s,box-shadow .2s,background .2s}
/* 아래로 가는 표시 — 글자가 아니라 선으로 그린다(화면 읽기 프로그램이 읽지 않게) */
.ops-card::after{content:"";position:absolute;top:24px;right:24px;width:7px;height:7px;border-right:1.5px solid var(--txt-faint);border-bottom:1.5px solid var(--txt-faint);transform:rotate(45deg);transition:transform .2s,border-color .2s}
.ops-card-no{display:flex;align-items:center;gap:10px;font:600 12.5px/1 "Space Grotesk",var(--font-sans);letter-spacing:.14em;color:var(--amber)}
.ops-card-no::after{content:"";width:26px;height:1px;background:rgba(var(--amber-rgb),.45)}
.ops-card b{margin-top:16px;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.35;color:var(--txt);transition:color .2s}
.ops-card-sum{margin-top:8px;font-size:14px;line-height:1.7;color:var(--txt-dim);text-wrap:pretty}
.ops-card:hover,.ops-card:focus-visible{border-color:rgba(var(--ember-rgb),.42);background:var(--glass-hover);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.ops-card:hover b,.ops-card:focus-visible b{color:var(--link)}
.ops-card:hover::after,.ops-card:focus-visible::after{border-color:var(--link);transform:translateY(3px) rotate(45deg)}

/* ── 문서: 왼쪽 따라오는 목차 · 오른쪽 본문 ── */
.ops-doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start;margin-top:88px}
.ops-toc{position:sticky;top:104px;align-self:start}
.ops-toc-title{margin:0 0 14px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:var(--txt-dim)}
.ops-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--glass-line)}
.ops-toc a{display:flex;align-items:baseline;gap:12px;min-height:40px;margin-left:-1px;padding:9px 0 9px 16px;border-left:2px solid transparent;font-size:14px;line-height:1.5;color:var(--txt-dim);transition:color .15s,border-color .15s}
.ops-toc-no{flex:0 0 auto;font:600 11.5px/1 "Space Grotesk",var(--font-sans);letter-spacing:.08em;color:var(--txt-faint);transition:color .15s}
.ops-toc a:hover{color:var(--txt)}
.ops-toc a:is([aria-current="location"],.is-current){border-left-color:var(--ember);color:var(--txt);font-weight:600}
.ops-toc a:is([aria-current="location"],.is-current) .ops-toc-no{color:var(--ember)}

/* 읽기 좋은 너비 — 본문 칸 하나가 약 68ch 이고 절 구분선·카드·목록이 모두 그 폭에 맞는다 */
.ops-body{min-width:0;max-width:68ch}
.ops-body p,.ops-body li{font-size:16px;line-height:1.9;color:var(--read)}
.ops-body p{margin:0 0 14px}
.ops-body p:last-child{margin-bottom:0}
.ops-body a[href]{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.ops-body b{color:var(--txt);font-weight:600}

/* 절 — 위아래 여백은 절 안에 둬서 절과 절 사이에 빈틈이 없다(지금 절 표시가 한 번에 한 절만 고른다) */
.ops-sec{scroll-margin-top:104px;padding:0 0 60px}
.ops-sec+.ops-sec{padding-top:56px;border-top:1px solid var(--glass-line)}
.ops-sec:last-child{padding-bottom:0}
.ops-sec h2{margin:0 0 24px;font-size:clamp(24px,2.5vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--txt)}
.ops-no{font:600 .74em/1 "Space Grotesk",var(--font-sans);letter-spacing:.08em;color:var(--amber);font-variant-numeric:tabular-nums}
.ops-dot{color:var(--txt-faint);font-weight:400}
.ops-sec h3{margin:40px 0 10px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--txt)}

/* 01 만드는 방법 — 단계 이름이 있는 번호 목록 다섯(번호는 CSS 가 센다) */
.ops-flow{list-style:none;counter-reset:flow;margin:0;padding:0;display:grid;gap:10px}
.ops-body .ops-flow li{counter-increment:flow;position:relative;padding:16px 20px 16px 58px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);font-size:15px;line-height:1.8}
.ops-flow li::before{content:counter(flow);position:absolute;left:20px;top:16px;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(var(--amber-rgb),.45);border-radius:50%;font:600 12px/1 "Space Grotesk",var(--font-sans);color:var(--amber)}
.ops-flow b{display:block;margin-bottom:2px}

/* 02 지키는 원칙 — 문장 목록과 '자료를 다루는 기준'(BUILD:OPSRULES — AI 쪽 기준이라 왼쪽 선은 --green) */
.ops-principles{list-style:none;margin:0;padding:0}
.ops-body .ops-principles li{position:relative;padding:11px 0 11px 24px;border-bottom:1px solid var(--glass-line)}
.ops-principles li:last-child{border-bottom:0}
.ops-principles li::before{content:"";position:absolute;left:3px;top:23px;width:7px;height:7px;border:1.5px solid var(--amber);border-radius:50%}
.ops-rules{margin:16px 0 0;padding:18px 24px 18px 42px;border:1px solid var(--glass-line);border-left:2px solid rgba(var(--green-rgb),.7);border-radius:4px 14px 14px 4px;background:var(--glass);backdrop-filter:blur(14px)}
.ops-body .ops-rules li{margin-bottom:6px;font-size:15px;line-height:1.8}
.ops-body .ops-rules li:last-child{margin-bottom:0}
.ops-rules li::marker{color:var(--green)}
.ops-rules ul{margin:6px 0 0;padding-left:20px}

/* 06 개발·운영 — 만든 곳·문의(BUILD:OPSMAKER). 메일 주소는 assets/mail.js 가 누를 때 조립한다(산출물에 원문 없음) */
.ops-contact{display:grid;gap:10px;margin:0;padding:22px 24px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card)}
.ops-contact>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:baseline}
.ops-contact dt{font:600 11px/1.6 "Space Grotesk",var(--font-sans);letter-spacing:.14em;color:var(--txt-dim)}
.ops-contact dd{margin:0;font-size:16px;line-height:1.7;color:var(--txt);overflow-wrap:anywhere}
.ops-mail{display:block;margin-top:4px;font-size:14px;color:var(--txt-dim)}
.ops-body .ops-maker-note{margin:16px 0 0;font-size:13.5px;line-height:1.8;color:var(--txt-faint)}

@media (max-width:1100px){
  .ops-doc{grid-template-columns:200px minmax(0,1fr);gap:44px}
}
@media (max-width:860px){
  .ops-doc{grid-template-columns:minmax(0,1fr);margin-top:64px}
  .ops-toc{display:none}
  .ops-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .ops-hero{padding-top:36px}
  .ops-lede{font-size:16px}
  .ops-cards{grid-template-columns:minmax(0,1fr)}
  /* 한 칸일 때는 번호 옆에 절 이름 — 카드 여섯이 목차를 맡으므로 짧게 */
  .ops-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;min-height:0;padding:16px 44px 16px 18px}
  .ops-card-no{grid-row:1/3}
  .ops-card-no::after{display:none}
  .ops-card b{margin-top:0;font-size:17px}
  .ops-card-sum{margin-top:4px}
  .ops-card::after{top:22px;right:20px}
  .ops-sec{padding-bottom:48px}
  .ops-sec+.ops-sec{padding-top:44px}
  .ops-body .ops-flow li{padding:14px 16px 14px 52px}
  .ops-flow li::before{left:16px;top:15px}
  .ops-rules{padding:16px 18px 16px 36px}
  .ops-contact{padding:18px 20px}
  .ops-contact>div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media print{
  .ops-toc{display:none}
  .ops-doc{display:block}
  .ops-card,.ops-body .ops-flow li,.ops-contact{box-shadow:none;backdrop-filter:none}
}