@import url("../design-system/css/common.css");
/* ============================================================
   예우 장례 절차 — 이 화면에만 있는 배치 (yw-procedure__…)
   부품(머리 줄 · 단계 칩 막대 · 카드 · 목록 줄 · 요약표 · 정할 것 목록 · 기한 표 · 하단 탭 …)은
   design-system/css/common.css 에서 온다(이 파일 첫 줄). 여기서 부품의 겉모양을 덮어쓰지 않는다.
   2026-10-26 부품 이전 — 보이는 결과는 이전과 같다(옛 판: new_보관_2026-10-26/시안/부품이전전/)
   ============================================================ */
/* 화면 틀(yw-stage · yw-frame)은 공통 layout.css 로 올렸다(10/26 CSS 구조) */
html { scroll-behavior: smooth; }
.yw-procedure { line-height: normal; overflow-wrap: break-word; }
.yw-procedure strong { font-weight: 700; color: var(--text); }

/* 머리 줄(고정) + 단계 칩 — 전체 흐름을 지나면 칩이 나타난다 */
.yw-procedure__top { position: sticky; top: 0; z-index: 8; background: var(--bg-page); }
.yw-procedure__top[data-state="scrolled"] { box-shadow: var(--shadow-low); }
.yw-procedure__jump { opacity: 0; max-height: 0; transition: opacity .3s var(--ease), max-height .3s var(--ease); }
.yw-procedure__top[data-state="scrolled"] .yw-procedure__jump { opacity: 1; max-height: 60px; }

/* 머리 */
.yw-procedure__hero { position: relative; padding: 18px var(--screen-margin) 0; }
.yw-procedure__hero-mark { position: absolute; right: var(--screen-margin); top: 14px; width: 52px; height: 52px; color: var(--accent-on-dark); }
.yw-procedure__hero-title { padding-right: 64px; font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: var(--font-size-display); line-height: 1.42; letter-spacing: -.01em; }
.yw-procedure__hero-lead { margin-top: var(--space-md); font-size: var(--font-size-body); line-height: 1.65; color: var(--text-secondary); }
.yw-procedure__hero-tiny { display: inline-block; margin-top: var(--space-md); font-size: var(--font-size-meta); font-weight: 500; color: var(--text-accent); }

/* 구역 */
.yw-procedure__block { margin-top: var(--space-section); padding: 0 var(--screen-margin); scroll-margin-top: 120px; }
.yw-procedure__heading { font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: 21px; line-height: 1.4; }  /* 이 화면 구역 제목 21 (메인은 20) */
.yw-procedure__lead { margin-top: 6px; font-size: var(--font-size-body); line-height: 1.65; color: var(--text-secondary); }

/* 전체 흐름 — 세로 점과 선 */
.yw-procedure__flow { margin-top: var(--space-lg); list-style: none; }
.yw-procedure__flow .yw-list__row { position: relative; min-height: 80px; }
.yw-procedure__flow li:not(:last-child) .yw-list__row::after { content: ""; position: absolute; left: 21px; top: calc(50% + 6px); width: 2px; height: calc(100% - 12px); background: color-mix(in srgb, var(--fill-action) 18%, transparent); }
.yw-procedure__flow-dot { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; border: 2px solid var(--fill-action); border-radius: var(--radius-full); background: var(--surface-raised); }
.yw-procedure__flow-title { display: block; font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: var(--font-size-body); }
.yw-procedure__flow-when { margin-left: var(--space-sm); font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--text-accent); }
.yw-procedure__hint { margin-top: 10px; font-size: var(--font-size-meta); color: var(--text-secondary); text-align: center; }

/* 먼저 알아 두세요 */
.yw-procedure__know { display: grid; gap: 10px; margin-top: 14px; list-style: none; }
.yw-procedure__know-item { display: flex; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-lg) 14px; background: var(--surface-raised); border: 1px solid var(--border-card); border-radius: var(--radius-md); font-size: var(--font-size-body); line-height: 1.65; color: var(--text-secondary); }
.yw-procedure__know-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--bg-page); font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: var(--font-size-body-sm); color: var(--fill-action); }

/* 단계 카드 */
.yw-procedure__step { margin-top: var(--space-lg); padding: var(--space-xxl) 18px 22px; background: var(--surface-raised); border: 1px solid var(--border-card); border-radius: var(--radius-lg); scroll-margin-top: 120px; }
.yw-procedure__step-head { display: flex; align-items: center; justify-content: space-between; }
.yw-procedure__step-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-md); border-radius: var(--radius-full); background: var(--fill-action); color: var(--on-action); font-size: 13.5px; font-weight: 500; }
.yw-procedure__step-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-page); color: var(--accent-line); }
.yw-procedure__step-title { margin-top: var(--space-md); font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: 21px; line-height: 1.4; }
.yw-procedure__step-lead { margin-top: var(--space-sm); font-size: var(--font-size-body); line-height: 1.65; color: var(--text-secondary); }
.yw-procedure__summary { margin-top: 18px; }
.yw-procedure__subhead { margin: var(--space-xxl) 0 10px; font-size: var(--font-size-body-sm); font-weight: 600; color: var(--fill-action); }
.yw-procedure__dots { display: grid; gap: var(--space-sm); list-style: none; }
.yw-procedure__dots li { position: relative; padding-left: 14px; font-size: var(--font-size-body); line-height: 1.65; color: var(--text-secondary); }
.yw-procedure__dots li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--accent-line); }
.yw-procedure__nums { display: grid; gap: 10px; list-style: none; }
.yw-procedure__nums li { display: flex; gap: 10px; font-size: var(--font-size-body); line-height: 1.65; color: var(--text-secondary); }
.yw-procedure__num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border: 1.5px solid var(--accent-line); border-radius: var(--radius-full); font-size: var(--font-size-caption); font-weight: 600; color: var(--fill-action); }
.yw-procedure__small { font-size: var(--font-size-meta); color: var(--text-secondary); }
.yw-procedure__addon { margin-top: var(--space-md); font-size: var(--font-size-body-sm); line-height: 1.6; color: var(--text-secondary); }
/* 어디에서 돌아가셨나요 */
.yw-procedure__where { display: grid; gap: 10px; }
.yw-procedure__case { padding: 14px; border-radius: var(--radius-md); background: var(--bg-page); font-size: var(--font-size-body); line-height: 1.65; color: var(--text-secondary); }
.yw-procedure__case-title { margin-bottom: var(--space-xs); font-size: var(--font-size-body-sm); font-weight: 600; color: var(--text); }
.yw-procedure__branch { margin-top: var(--space-sm); padding: 10px var(--space-md); border-left: 3px solid var(--fill-action); border-radius: var(--radius-sm); background: var(--surface-raised); }
.yw-procedure__branch--urgent { border-left-color: var(--status-warning); background: var(--status-warning-tint); }
.yw-procedure__branch--urgent strong { color: var(--status-warning); }
.yw-procedure__case-note { margin-top: var(--space-sm); font-size: 14.5px; }
/* 모실 곳 */
.yw-procedure__places { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.yw-procedure__place { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: var(--space-md); border-radius: var(--radius-md); background: var(--bg-page); }
.yw-procedure__place b { font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: var(--font-size-body); color: var(--fill-action); }
.yw-procedure__place p { font-size: var(--font-size-body-sm); line-height: 1.6; color: var(--text-secondary); }
/* 장례 뒤 행정 */
.yw-procedure__admin { margin-top: 14px; padding: 18px var(--space-lg); border-radius: var(--radius-md); background: var(--bg-page); }
.yw-procedure__admin-title { margin: 0 0 var(--space-sm); font-size: var(--font-size-body); font-weight: 600; color: var(--fill-action); }
/* 낱말 풀이 */
.yw-procedure__words { margin-top: var(--space-xl); padding-top: 18px; border-top: 1px dashed var(--border-hairline); }
.yw-procedure__words-label { margin-bottom: 6px; font-size: var(--font-size-caption); font-weight: 600; color: var(--text-accent); }
.yw-procedure__words-list { display: grid; gap: 6px; }
.yw-procedure__words-list div { display: grid; grid-template-columns: 76px 1fr; gap: var(--space-sm); font-size: 14.5px; line-height: 1.55; }
.yw-procedure__words-list dt { font-weight: 600; color: var(--text); }
.yw-procedure__words-list dd { color: var(--text-secondary); }

/* 가족이 정하실 것 · 기한 */
.yw-procedure__decide, .yw-procedure__deadline { margin-top: var(--space-lg); }
/* 1년 대 3개월 — 잉크 바탕 비교 */
.yw-procedure__vs { margin-top: var(--space-xl); padding: var(--space-xl) 18px; border-radius: var(--radius-lg); background: var(--surface-ink); color: var(--on-ink); }
.yw-procedure__vs-title { font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: 17px; color: var(--accent-on-dark); }
.yw-procedure__vs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
.yw-procedure__vs-col { padding: var(--space-lg) 14px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 7%, transparent); }
.yw-procedure__vs-col p { margin-top: 6px; font-size: var(--font-size-meta); line-height: 1.5; color: color-mix(in srgb, var(--color-bg) 80%, transparent); }
.yw-procedure__vs-col strong { color: var(--accent-on-dark); }
.yw-procedure__vs-col .yw-procedure__vs-name { font-size: 13.5px; color: color-mix(in srgb, var(--color-bg) 75%, transparent); }
.yw-procedure__vs-col .yw-procedure__vs-big { margin-top: var(--space-xs); font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: 22px; color: var(--on-ink); }
.yw-procedure__vs-col .yw-procedure__vs-ext { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); font-size: 12.5px; color: color-mix(in srgb, var(--color-bg) 65%, transparent); }
.yw-procedure__vs-after { margin-top: var(--space-md); font-size: var(--font-size-body-sm); line-height: 1.65; color: color-mix(in srgb, var(--color-bg) 85%, transparent); }
.yw-procedure__miss { display: grid; gap: var(--space-sm); margin-top: 14px; list-style: none; }
.yw-procedure__miss li { padding: var(--space-md) 14px; background: var(--surface-raised); border: 1px solid var(--border-card); border-radius: var(--radius-md); font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
/* 요즘은 */
.yw-procedure__today { margin-top: 14px; padding: var(--space-lg); background: var(--surface-raised); border: 1px solid var(--border-card); border-radius: var(--radius-md); font-size: var(--font-size-body); line-height: 1.65; color: var(--text-secondary); }
.yw-procedure__today p + p { margin-top: var(--space-sm); font-size: var(--font-size-body-sm); }
/* 예우에서 이어서 */
.yw-procedure__next { margin-top: 14px; }
.yw-procedure__row-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--bg-page); color: var(--text-muted); }  /* 이 화면 아이콘 원 38 (메인은 36) · 아이콘 색은 확정 화면 그대로 흐린 잉크(메인은 로즈 골드) */
.yw-procedure__stage-tag { flex: none; font-size: 12.5px; font-weight: 500; color: var(--text-accent); }
.yw-procedure__fine { margin-top: 10px; font-size: var(--font-size-meta); line-height: 1.55; color: var(--text-secondary); }
/* 바닥 */
.yw-procedure__foot { margin: var(--space-section) var(--screen-margin) 0; padding-top: 22px; border-top: 1px solid var(--border-hairline); font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); text-align: center; }
.yw-procedure__foot-text { text-align: left; }
.yw-procedure__foot-text p + p { margin-top: 6px; }
.yw-procedure__foot-mark { display: block; width: 28px; height: 28px; margin: 0 auto var(--space-sm); color: var(--accent-line); }