/* ================================================================
   Ian Recipe — 사용자(주방 태블릿) 화면
   ----------------------------------------------------------------
   컨셉: 조리대 위의 "작업 지시서".
         소비자용 레시피 앱이 아니라, 젖은 손으로 힐끗 보는 계기판이다.
         코랄은 '지금 여기'(현재 카테고리 / 현재 단계 / 주 액션)에만 쓰고
         나머지 면은 전부 조용한 중립색으로 둔다.

   레이아웃 골격은 관리자 화면(admin.css)과 동일하다.
       aside 고정 + main-content(navbar / page-content / footer-bar)
   다만 태블릿 GPU 예산 때문에 backdrop-filter · 큰 그림자는 쓰지 않는다.

   주 타깃 1340 x 800 / 실질 설계 기준 1325 x 680
   접두사: rc-
   ================================================================ */


/* ================================================================
   1. 토큰
   ================================================================ */
:root {
    /* 브랜드 — docs/ui/web/design.md */
    --rc-coral:        #fe8f7e;
    --rc-coral-active: #e9613c;
    --rc-bg:           #212121;

    /* 파생 중립색 — 3색만으로는 카드/구분선을 그릴 수 없어 추가 정의 */
    --rc-surface:    #2b2b2b;
    --rc-surface-2:  #353535;
    --rc-text:       #f5f5f5;
    --rc-text-muted: #a3a3a3;
    --rc-border:     #3a3a3a;

    /* 사진 위에 까는 막 — 조명·구도가 제각각인 사진들의 밝기를 눌러
       카드 하단 텍스트와 이어지게 한다. 정적 그라데이션이라 페인트는 1회다 */
    --rc-photo-veil: linear-gradient(to top,
                     rgba(33, 33, 33, .85) 0%,
                     rgba(33, 33, 33, .25) 38%,
                     rgba(33, 33, 33, 0) 70%);

    /* 코랄 면 위에 얹는 글자 — 밝은 코랄이라 어두운 글자로 대비 확보 (약 8.9:1) */
    --rc-on-coral: #211008;

    /* 레이아웃 상수 — 세로 680px 예산을 여기서 못 박는다 */
    --rc-sidebar-w: 272px;
    --rc-navbar-h:  64px;
    --rc-footer-h:  52px;
    --rc-nav-h:     84px;  /* 레시피 하단 이동 바 */
    --rc-touch:     44px;  /* 터치 타깃 최소치 */

    /* 간격 — 4의 배수 */
    --rc-space-1:  4px;
    --rc-space-2:  8px;
    --rc-space-3: 12px;
    --rc-space-4: 16px;
    --rc-space-5: 20px;
    --rc-space-6: 24px;
    --rc-space-8: 32px;
    --rc-space-12: 48px;

    /* 타이포 스케일 — 조리대에서 한 발짝 떨어져 읽는 거리 기준 */
    --rc-text-xs:    13px;
    --rc-text-sm:    15px;
    --rc-text-base:  17px;  /* 폼 확대 방지 최소치(16px)를 넘긴다 */
    --rc-text-md:    20px;
    --rc-text-lg:    24px;
    --rc-text-xl:    30px;
    --rc-text-2xl:   40px;
    --rc-text-step:  30px;  /* 조리 설명 본문 — 이 화면의 주인공 */
    --rc-text-count: 96px;  /* 단계 카운터 */

    /* 모양 */
    --rc-radius:      20px;
    --rc-radius-sm:   12px;
    --rc-radius-lg:   28px;
    --rc-radius-pill: 999px;

    /* 모션 — 200ms 이내, transform/opacity만 */
    --rc-dur:  200ms;
    --rc-ease: cubic-bezier(.22, .61, .36, 1);
}


/* ================================================================
   2. 리셋 / 베이스
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    /* body 대신 html에 건다 — 모바일 Safari에서 body overflow-x가
       세로 스크롤을 막는 버그 방지 */
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

.rc-theme {
    /* 평평한 단색 위에 코랄 빛을 아주 옅게 한 겹 깐다. 화면이 검은 판때기로
       보이지 않게 하는 최소한의 장치다. 정적 그라데이션이라 페인트는 1회고
       스크롤·애니메이션에 다시 계산되지 않는다 */
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(254, 143, 126, .07), transparent 62%),
        var(--rc-bg);
    background-attachment: fixed;
    color: var(--rc-text);
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                 system-ui, 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-size: var(--rc-text-base);
    line-height: 1.5;
    letter-spacing: -.01em;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    /* 조리 중 실수로 글자가 선택되거나 더블탭 확대되는 것을 막는다 */
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

/* 외장 키보드 사용자를 위해 절대 제거하지 않는다 */
:focus-visible {
    outline: 3px solid var(--rc-coral);
    outline-offset: 2px;
}

/* 숫자는 자리를 흔들지 않게 — 계량값·카운터가 많은 화면이다 */
.rc-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* 스크린리더 전용 */
.rc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ================================================================
   3. 레이아웃 — 관리자와 동일한 골격
   ================================================================ */
.rc-main-content {
    margin-left: var(--rc-sidebar-w);
    /* 페이지 전체 스크롤 대신 영역 스크롤.
       svh가 아니라 dvh다. svh는 '브라우저 UI가 최대로 펼쳐진 기준의 가장 작은 높이'인데,
       설치형으로 띄우면 접었다 펼 주소창이 없어 기기마다 이 값을 제각각 계산한다.
       실제로 자리를 차지하는 것은 안드로이드 시스템 바이고, 그건 하단을 터치할 때마다
       올라왔다 내려간다 — 그때 따라 움직이는 단위는 dvh뿐이라 하단 바가 흔들리지 않는다.
       기기를 특정할 수 없으므로 지금 보이는 높이를 그대로 따르게 둔다.
       (responsive.md 4.1 / 8절이 요구하는 값이기도 하다) */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

.rc-page-content {
    /* min-height:0 이 없으면 flex 자식이 부풀어 스크롤이 생기지 않는다 */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--rc-space-6);
}

/* 스크롤이 필요 없는 페이지(레시피 단계)용 — 내용을 화면에 고정한다 */
.rc-page-content--fixed {
    overflow: hidden;
    padding: 0;
}

.rc-page-content::-webkit-scrollbar {
    width: 6px;
}

.rc-page-content::-webkit-scrollbar-thumb {
    background: var(--rc-border);
    border-radius: 3px;
}


/* ================================================================
   4. .rc-sidebar — 카테고리 네비게이션
   ================================================================ */
.rc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rc-sidebar-w);
    /* 본문(.rc-main-content)과 같은 단위를 써야 한다. 한쪽만 svh로 두면
       시스템 바가 오르내릴 때 사이드바와 본문의 밑변이 어긋난다 */
    height: 100vh;
    height: 100dvh;

    background: var(--rc-surface);
    border-right: 1px solid var(--rc-border);

    display: flex;
    flex-direction: column;
    z-index: 100;
}

/* Brand */
.rc-sidebar-brand {
    flex-shrink: 0;
    height: var(--rc-navbar-h);
    padding: 0 var(--rc-space-5);
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    border-bottom: 1px solid var(--rc-border);
}

.rc-sidebar-brand-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--rc-radius-sm);
    background: var(--rc-coral);
    color: var(--rc-on-coral);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--rc-text-sm);
    font-weight: 800;
    letter-spacing: -.04em;
}

.rc-sidebar-brand-text {
    font-size: var(--rc-text-base);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.rc-sidebar-brand-sub {
    margin-top: 1px;
    font-size: var(--rc-text-xs);
    color: var(--rc-text-muted);
}

/* Nav */
.rc-sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--rc-space-3);
}

.rc-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.rc-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--rc-border);
    border-radius: 2px;
}

.rc-sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    min-height: 56px;
    /* 왼쪽은 썸네일이 채우므로 패딩을 줄여 pill 안에 딱 맞게 앉힌다 */
    padding: var(--rc-space-2) var(--rc-space-4) var(--rc-space-2) var(--rc-space-2);
    margin-bottom: var(--rc-space-2);
    border-radius: var(--rc-radius-pill);
    color: var(--rc-text-muted);
    font-size: var(--rc-text-md);
    font-weight: 500;
    transition: background var(--rc-dur) var(--rc-ease),
                color var(--rc-dur) var(--rc-ease);
}

/* 태블릿엔 hover가 없다. 눌린 순간의 피드백만 준다 */
.rc-sidebar-link:active {
    background: var(--rc-surface-2);
    color: var(--rc-text);
}

/* 지금 보고 있는 카테고리 — 멀리서도 한눈에 걸리도록 면으로 채운다 */
.rc-sidebar-link.is-active {
    background: var(--rc-coral);
    color: var(--rc-on-coral);
    font-weight: 700;
}

/* 카테고리 썸네일 — 사진 한 장이 이름보다 빨리 읽힌다 */
.rc-sidebar-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--rc-surface-2);
    color: var(--rc-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 활성 항목은 코랄 면 위라 썸네일 테두리가 묻힌다. 어두운 링으로 떼어낸다 */
.rc-sidebar-link.is-active .rc-sidebar-thumb {
    background: rgba(33, 16, 8, .20);
    color: var(--rc-on-coral);
    box-shadow: 0 0 0 2px rgba(33, 16, 8, .22);
}

.rc-sidebar-link-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 카테고리별 메뉴 개수 — 장식이 아니라 정보다 */
.rc-sidebar-link-count {
    flex-shrink: 0;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: var(--rc-radius-pill);
    background: var(--rc-surface-2);
    color: var(--rc-text-muted);
    font-size: var(--rc-text-sm);
    font-weight: 600;
    text-align: center;
}

.rc-sidebar-link.is-active .rc-sidebar-link-count {
    background: rgba(33, 16, 8, .18);
    color: var(--rc-on-coral);
}


/* --- 조리 화면(.rc-focus) — 카테고리 네비를 걷는다 ---
   조리 중에는 한 메뉴만 보고, 다른 카테고리로 건너뛰는 일이 드물다.
   회수한 240px 은 사진을 넓히는 데 쓰지 않는다. 사진 틀이 가로로 넓어지면
   object-fit: cover 가 세로 사진의 위아래를 잘라내기 때문이다(8번 항목 참고).
   대신 조리 지시문의 활자를 키우는 데 쓴다. */
.rc-focus .rc-sidebar,
.rc-focus .rc-sidebar-overlay,
.rc-focus .rc-sidebar-toggle {
    display: none;
}

.rc-focus .rc-main-content {
    margin-left: 0;
}

.rc-focus {
    --rc-text-step: 40px;
}


/* ================================================================
   5. .rc-navbar — 상단 헤더
   ================================================================ */
.rc-navbar {
    flex-shrink: 0;
    min-height: var(--rc-navbar-h);
    padding: var(--rc-space-2) var(--rc-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rc-space-4);
    border-bottom: 1px solid var(--rc-border);
    background: var(--rc-bg);
}

.rc-navbar-left {
    display: flex;
    align-items: center;
    gap: var(--rc-space-4);
    min-width: 0;
}

.rc-navbar-right {
    display: flex;
    align-items: center;
    gap: var(--rc-space-3);
    flex-shrink: 0;
}

.rc-navbar-title {
    font-size: var(--rc-text-lg);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-navbar-sub {
    margin-top: 1px;
    font-size: var(--rc-text-xs);
    color: var(--rc-text-muted);
}

/* 진행 위치의 숫자 표기 — 본문의 큰 단계 번호를 보조하는 자리다.
   조용하게 두고 강조는 본문 쪽에 남긴다 */
.rc-navbar-count {
    font-size: var(--rc-text-md);
    font-weight: 600;
    color: var(--rc-text-muted);
    white-space: nowrap;
}

/* 아이콘 버튼 — 시각적 아이콘은 20px, 터치 영역은 44px */
.rc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rc-touch);
    height: var(--rc-touch);
    flex-shrink: 0;
    border-radius: var(--rc-radius-sm);
    color: var(--rc-text-muted);
    transition: background var(--rc-dur) var(--rc-ease),
                color var(--rc-dur) var(--rc-ease);
}

.rc-icon-btn:active {
    background: var(--rc-surface-2);
    color: var(--rc-text);
}

/* 목록으로 돌아가기 — 아이콘 + 라벨 (아이콘만 두면 뜻이 안 읽힌다) */
.rc-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
    height: var(--rc-touch);
    padding: 0 var(--rc-space-4) 0 var(--rc-space-3);
    flex-shrink: 0;
    border-radius: var(--rc-radius-pill);
    background: var(--rc-surface);
    color: var(--rc-text);
    font-size: var(--rc-text-sm);
    font-weight: 600;
    transition: background var(--rc-dur) var(--rc-ease);
}

.rc-back-btn:active {
    background: var(--rc-surface-2);
}

/* 라벨이 세트 이름일 때가 있다. 길어도 화살표와 제목을 밀어내지 않게 자른다 */
.rc-back-label {
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 아이콘 크기 헬퍼 */
.rc-icon    { width: 20px; height: 20px; }
.rc-icon-sm { width: 16px; height: 16px; }


/* ================================================================
   6. 언어 토글 — 3개국어가 항상 보여야 한다 (드롭다운 금지)
   ================================================================ */
.rc-lang {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--rc-radius-pill);
    background: var(--rc-surface);
}

.rc-lang-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--rc-touch);
    height: 38px;
    padding: 0 var(--rc-space-3);
    border-radius: var(--rc-radius-pill);
    color: var(--rc-text-muted);
    font-size: var(--rc-text-sm);
    font-weight: 600;
    letter-spacing: .02em;
    transition: background var(--rc-dur) var(--rc-ease),
                color var(--rc-dur) var(--rc-ease);
}

.rc-lang-item:active {
    background: var(--rc-surface-2);
}

.rc-lang-item.is-active {
    background: var(--rc-text);
    color: var(--rc-bg);
}


/* ================================================================
   7. 메뉴 카드 그리드
   ================================================================ */
.rc-grid {
    display: grid;
    /* 고정 px 대신 minmax — 1340에서 4열, 좁아지면 자동으로 줄어든다 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--rc-space-4);
}

/* 사진 위에 이름을 얹는다. 카드 높이가 사진 하나로 끝나 세로 예산이 남고,
   veil이 사진마다 다른 밝기를 같은 톤으로 눌러준다 */
/* 대표이미지가 가로 3:2 로 들어오므로 카드도 같은 비율로 맞춘다.
   정사각으로 두면 좌우 33%를 잘라내 접시가 화면 밖으로 밀리고,
   카드가 세로로 길어져 한 화면에 두 줄이 안 들어간다 */
.rc-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--rc-radius);
    background: var(--rc-surface-2);
    overflow: hidden;
    transition: transform var(--rc-dur) var(--rc-ease);
}

.rc-card:active {
    transform: scale(.97);
}

/* 사진 위에 까는 막 — 가장 아래 레이어 */
.rc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--rc-photo-veil);
    pointer-events: none;
}

/* 눌림 표시용 링 + 위쪽 가장자리 하이라이트.
   1px 밝은 선 하나로 카드가 배경에서 살짝 떠 보인다. 그림자보다 훨씬 싸다 */
.rc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    outline: 2px solid transparent;
    outline-offset: -2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    transition: outline-color var(--rc-dur) var(--rc-ease);
    pointer-events: none;
}

.rc-card:active::before {
    outline-color: var(--rc-coral);
}

.rc-card-thumb {
    width: 100%;
    height: 100%;
}

.rc-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-card-body {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--rc-space-4) var(--rc-space-5) var(--rc-space-5);
}

.rc-card-name {
    font-size: var(--rc-text-md);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.25;
    /* 2줄까지만 — 이름이 길어도 카드 아래를 넘지 않는다 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rc-card-meta {
    margin-top: var(--rc-space-2);
    display: flex;
    align-items: center;
    gap: var(--rc-space-2);
    font-size: var(--rc-text-xs);
}

.rc-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--rc-radius-pill);
    background: rgba(245, 245, 245, .12);
    color: var(--rc-text);
    font-weight: 600;
    white-space: nowrap;
}


/* ================================================================
   8. 레시피 단계 뷰 — 이 화면이 제품의 본체다
   ================================================================ */
/* 단계 하나 = 한 화면. 전부 렌더해두고 보이는 것만 바꾼다 (전환 지연 0) */
.rc-stage {
    position: relative;
    height: 100%;
}

.rc-step {
    position: absolute;
    inset: 0;
    display: grid;
    /* 사진 열은 폭을 비율로 잡는다(.rc-step-figure 의 aspect-ratio).
       fr 로 나누면 화면이 넓어질수록 틀이 가로로 늘어나 세로 사진이 잘린다. */
    grid-template-columns: auto minmax(0, 1fr);
    /* 행을 화면 높이에 묶는다. 이게 없으면 본문이 긴 재료 화면에서 행이 늘어나고,
       사진 폭이 높이를 따라가므로 틀까지 같이 커져 글 자리를 밀어낸다. */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    transform: translateX(16px);
    transition: opacity var(--rc-dur) var(--rc-ease),
                transform var(--rc-dur) var(--rc-ease),
                visibility var(--rc-dur);
}

.rc-step.is-current {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* 이미지가 없는 단계는 설명이 화면 전체를 쓴다 */
.rc-step--textonly {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
}

/* 사진은 화면 왼쪽 끝까지 붙인다. 크게 보여야 조리대에서 대조가 된다.
   폭은 높이 × 3/4 로 정해진다 — 조리 단계 사진이 세로 3:4 로 들어오므로
   틀을 같은 비율로 묶어두면 화면 폭이 달라져도 잘리지 않는다. */
.rc-step-figure {
    height: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 0 var(--rc-radius-lg) var(--rc-radius-lg) 0;
    background: var(--rc-surface);
    overflow: hidden;
}

/* 재료 화면에 오는 대표이미지는 가로다. 세로 틀에 넣으면 좌우가 크게 잘려
   접시가 안 보이므로 이 슬라이드만 정사각으로 완화한다. */
.rc-step--mise .rc-step-figure {
    aspect-ratio: 1 / 1;
}

.rc-step-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-step-body {
    align-self: center;
    min-width: 0;
    /* 행을 고정했으므로 내용이 넘치면 여기서 스크롤한다 (재료가 많은 메뉴) */
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--rc-space-8) var(--rc-space-12);
    /* 줄 길이 상한. 태블릿(사진 489 + 이 열 844)에서는 걸리지 않고 열을 꽉 채우며,
       더 넓은 화면에서만 글줄이 늘어지지 않게 막는다.
       ch/em 은 쓰지 않는다 — ch 는 숫자 0 기준이라 한글에서 글자 수의 절반이고,
       em 은 이 요소가 상속한 17px 기준이라 안쪽 40px 본문과 어긋난다. */
    max-width: 900px;
}

.rc-step-num {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.rc-step-count {
    display: block;
    font-size: var(--rc-text-count);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--rc-coral);
}

.rc-step-total {
    margin-left: 2px;
    font-size: var(--rc-text-xl);
    font-weight: 600;
    color: var(--rc-text-muted);
}

/* 숫자와 설명 사이의 한 줄 — 어디까지가 위치 표시이고 어디부터가 지시인지 가른다 */
.rc-step-text {
    margin-top: var(--rc-space-5);
    padding-top: var(--rc-space-5);
    border-top: 1px solid var(--rc-border);
    font-size: var(--rc-text-step);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.02em;
    white-space: pre-line;
}

/* --- 재료 화면 (단계 시작 전) — 단계와 같은 슬라이드 한 장이다 --- */
.rc-mise-label {
    font-size: var(--rc-text-md);
    font-weight: 700;
    color: var(--rc-coral);
}

.rc-mise-title {
    margin-top: var(--rc-space-1);
    font-size: var(--rc-text-2xl);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.15;
}

.rc-mise-desc {
    margin-top: var(--rc-space-3);
    font-size: var(--rc-text-md);
    line-height: 1.5;
    color: var(--rc-text-muted);
    white-space: pre-line;
}

/* 계량표. 스크롤은 바깥 .rc-step-body 가 맡는다 — 여기서 또 잡으면 영역이 겹쳐
   재료가 많을 때 안쪽만 움직이고 메뉴 이름이 화면에 남는다 */
.rc-mise-list {
    margin-top: var(--rc-space-5);
    padding-top: var(--rc-space-2);
    border-top: 1px solid var(--rc-border);
}

/* 이름은 왼쪽, 계량값은 오른쪽 끝에 세로로 맞춘다.
   조리 중 찾는 건 "몇 g"이라 눈이 오른쪽 한 줄기만 훑고 지나가면 되게 한다 */
.rc-mise-item {
    display: flex;
    align-items: baseline;
    gap: var(--rc-space-4);
    padding: var(--rc-space-3) 0;
    border-bottom: 1px solid var(--rc-border);
    font-size: var(--rc-text-md);
    line-height: 1.3;
}

.rc-mise-item:last-child {
    border-bottom: 0;
}

.rc-mise-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--rc-text-muted);
}

.rc-mise-amount {
    flex-shrink: 0;
    font-size: var(--rc-text-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--rc-text);
    font-variant-numeric: tabular-nums;
}

/* 조리 설명 속의 계량값 — 문장에 묻히지 않게 색과 무게만 올린다.
   크기까지 키우면 줄 높이가 들쭉날쭉해져 읽는 흐름이 끊긴다 */
.rc-amount {
    font-weight: 800;
    color: var(--rc-coral);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* ================================================================
   9. 하단 이동 바 — 스크롤과 무관하게 항상 같은 자리에 있어야 한다
   ================================================================ */
/* 고정 height가 아니라 min-height다. 기기 글꼴 배율이 커져 버튼이 부풀어도
   내용을 잘라내지 않고 바가 늘어나야 한다 (본문이 그만큼 양보한다) */
.rc-nav-bar {
    flex-shrink: 0;
    min-height: var(--rc-nav-h);
    padding: var(--rc-space-2) var(--rc-space-6);
    display: flex;
    align-items: center;
    gap: var(--rc-space-4);
    border-top: 1px solid var(--rc-border);
    background: var(--rc-bg);
}

/* 진행 표시 — 세그먼트 하나가 단계 하나. 눌러서 바로 점프한다 */
.rc-progress {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rc-progress-seg {
    flex: 1;
    min-width: 0;
    height: var(--rc-touch);
    padding: 0;
    display: flex;
    align-items: center;
    border-radius: 2px;
    /* 터치 영역은 44px이지만 시각적으로는 6px 막대만 보인다 */
    background: none;
}

.rc-progress-seg::before {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--rc-border);
    transition: background var(--rc-dur) var(--rc-ease);
}

.rc-progress-seg.is-done::before {
    background: var(--rc-text-muted);
}

.rc-progress-seg.is-current::before {
    background: var(--rc-coral);
}

/* 재료 세그먼트는 단계가 아니므로 폭을 줄여 구분한다 */
.rc-progress-seg--mise {
    flex: 0 0 32px;
}

/* --- 이동 버튼 --- */
.rc-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-space-2);
    height: 56px;
    min-width: 128px;
    padding: 0 var(--rc-space-6);
    flex-shrink: 0;
    border-radius: var(--rc-radius-pill);
    font-size: var(--rc-text-md);
    font-weight: 700;
    letter-spacing: -.02em;
    transition: background var(--rc-dur) var(--rc-ease),
                opacity var(--rc-dur) var(--rc-ease);
}

.rc-nav-btn--ghost {
    background: var(--rc-surface);
    color: var(--rc-text);
}

.rc-nav-btn--ghost:active {
    background: var(--rc-surface-2);
}

/* 주 액션 — 코랄을 쓰는 마지막 자리 */
.rc-nav-btn--primary {
    background: var(--rc-coral);
    color: var(--rc-on-coral);
}

.rc-nav-btn--primary:active {
    background: var(--rc-coral-active);
}

.rc-nav-btn:disabled {
    opacity: .3;
    cursor: default;
}


/* ================================================================
   10. 빈 상태 — 텅 빈 화면도 다음 행동을 안내한다
   ================================================================ */
.rc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rc-space-3);
    padding: var(--rc-space-8);
    min-height: 240px;
    color: var(--rc-text-muted);
    text-align: center;
}

.rc-empty-icon {
    color: var(--rc-border);
}

.rc-empty-text {
    font-size: var(--rc-text-md);
}


/* ================================================================
   11. .rc-footer-bar — 하단 정보 바
   ================================================================ */
.rc-footer-bar {
    flex-shrink: 0;
    min-height: var(--rc-footer-h);
    padding: var(--rc-space-2) var(--rc-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rc-space-4);
    border-top: 1px solid var(--rc-border);
    font-size: var(--rc-text-xs);
    color: var(--rc-text-muted);
}


/* ================================================================
   12. 반응형 — 주 타깃은 xl(1280+). 그 아래는 동작 보장 수준
   ================================================================ */

/* 사이드바를 밀어내는 폭 (태블릿 세로 / 폰) */
@media (max-width: 1023px) {
    .rc-sidebar {
        transform: translateX(-100%);
        transition: transform var(--rc-dur) var(--rc-ease);
    }

    .rc-sidebar.is-open {
        transform: none;
    }

    .rc-main-content {
        margin-left: 0;
    }

    .rc-sidebar-toggle {
        display: inline-flex;
    }

    .rc-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(0, 0, 0, .6);
    }
}

/* 1024 이상에서는 사이드바가 항상 보이므로 토글이 필요 없다 */
@media (min-width: 1024px) {
    .rc-sidebar-toggle,
    .rc-sidebar-overlay {
        display: none;
    }
}

/* 세로가 더 짧은 기기 — 단계 화면의 활자를 먼저 줄인다.
   .rc-focus 는 body 에 붙어 :root 보다 가까운 조상이다. CSS 변수는 specificity 가 아니라
   상속 거리로 정해지므로, :root 만 줄이면 조리 화면에서는 그대로 큰 값이 남는다. */
@media (max-height: 700px) {
    :root {
        --rc-text-count: 76px;
        --rc-text-step:  26px;
    }

    .rc-focus {
        --rc-text-step: 30px;
    }
}

/* 더 짧은 기기(1024×600 급) — 여기서는 활자를 줄이는 것으로 부족하다.
   헤더 64 + 하단 바 84 = 148px 이 세로 600 의 25%를 먹어, 정작 사진과 지시문에
   남는 자리가 452px 뿐이다. 바를 깎아 본문에 32px 을 돌려준다.
   버튼은 48px 까지만 줄인다 — responsive.md 5.1 의 터치 최소치 44px 을 지켜야 하고,
   젖은 손으로 누르는 화면이라 그 아래로는 내리지 않는다. */
@media (max-height: 620px) {
    :root {
        --rc-navbar-h: 52px;
        --rc-nav-h:    64px;
    }

    /* min-height 만 낮춰서는 줄지 않는다. 헤더 안의 버튼이 터치 최소치인 44px 이라
       상하 패딩 8px 과 합쳐 60px 을 만들고, 그게 min-height 를 이기기 때문이다.
       패딩을 4px 로 좁혀 44 + 8 = 52px 을 맞춘다 (버튼은 44px 그대로 둔다) */
    .rc-navbar {
        padding: var(--rc-space-1) var(--rc-space-6);
    }

    /* 하단 바도 같은 계산이다. 48 + 8*2 = 64 로 --rc-nav-h 와 정확히 맞물린다 */
    .rc-nav-btn {
        height: 48px;
    }
}

/* 좁은 화면, 그리고 세로로 든 화면.
   가로 강제(manifest의 orientation: landscape)는 '설치'해서 띄웠을 때만 걸린다.
   크롬 탭으로 열면 그대로 세로가 되는데, 이때 폭으로만 판단하면 걸러지지 않는다 —
   800×1280 기기를 세로로 들면 폭 800은 767을 넘지만 사진 틀(height 100% × 3/4)이
   849px 로 계산되어 화면 밖으로 나간다. 그래서 폭이 아니라 방향으로도 쌓는다. */
@media (max-width: 767px), (orientation: portrait) {
    :root {
        --rc-text-count: 56px;
        --rc-text-step:  22px;
        --rc-text-2xl:   30px;
    }

    .rc-focus {
        --rc-text-step: 22px;
    }

    /* 세로로 쌓는다. 스크롤은 본문(.rc-step-body)이 맡으므로 여기서 또 잡지 않는다 */
    .rc-step {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    /* 사진은 위쪽 띠가 된다. 높이를 %로 주면 안 된다 — 행이 auto 라 순환 참조가 생겨
       납작하게 찌그러진다. 폭을 채우고 비율로 높이를 정하게 둔다.
       세로 배치에서는 세로 3:4 를 유지할 만한 높이가 안 나오므로 가로 비율을 쓴다. */
    .rc-step-figure,
    .rc-step--mise .rc-step-figure {
        aspect-ratio: 4 / 3;
        width: 100%;
        height: auto;
        border-radius: 0 0 var(--rc-radius) var(--rc-radius);
    }

    .rc-step-body {
        align-self: start;
        padding: var(--rc-space-5) var(--rc-space-4);
    }

    .rc-nav-btn {
        min-width: 0;
        padding: 0 var(--rc-space-4);
    }
}


/* ================================================================
   13. 모션 감소 존중
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ================================================================
   세트 구성 — 사진 위 핫스팟과 시트
   ----------------------------------------------------------------
   핀 좌표는 관리자가 사진 전체를 기준으로 찍은 % 다.
   그래서 이 슬라이드의 사진만은 잘리면 안 된다. 틀을 원본 비율로
   잡아(인라인 aspect-ratio) cover 로도 잘리는 곳이 없게 만든다.
   ================================================================ */

/* 사진을 감싸는 껍데기. 일반 메뉴에서는 틀을 그대로 채우기만 한다 */
.rc-hotspot-stage {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* 세트 사진 — 정사각 틀(.rc-step--mise) 대신 원본 비율을 쓴다.
   틀은 자리만 잡고, 실제 사진 크기는 stage 의 aspect-ratio 가 정한다 */
.rc-step--mise .rc-step-figure--set {
    height: 100%;
    aspect-ratio: auto;
    /* 가로로 긴 사진이 글 자리를 다 먹지 않게 상한을 둔다 */
    max-width: 58vw;
    display: grid;
    place-items: center;
    background: none;
    border-radius: 0;
    overflow: visible;
}

/* 비율을 지킨 채 틀 안에 들어간다 — 여기가 곧 좌표계다 */
.rc-step--mise .rc-step-figure--set .rc-hotspot-stage {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--rc-radius);
    overflow: hidden;
}

/* 핀 — width 가 지름(%)이고 높이는 aspect-ratio 로 따라온다.
   한 축만 기준으로 삼아야 사진 비율이 달라도 원이 유지된다 */
.rc-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 작은 종지에 찍은 핀도 젖은 손으로 눌러야 한다.
   보이는 원은 그대로 두고 터치 영역만 44px 까지 넓힌다 */
.rc-hotspot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: var(--rc-touch);
    min-height: var(--rc-touch);
}

.rc-hotspot-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .12);
    /* 밝은 접시 위에서도 테두리가 묻히지 않게 어두운 실선을 덧댄다 */
    box-shadow: 0 0 0 1px rgba(33, 33, 33, .45);
    transition: background var(--rc-dur) var(--rc-ease),
                border-color var(--rc-dur) var(--rc-ease);
}

/* 누르는 순간에만 코랄이 된다 — '지금 여기'에만 쓰는 색이다 */
.rc-hotspot:active .rc-hotspot-ring,
.rc-hotspot:focus-visible .rc-hotspot-ring {
    border-color: var(--rc-coral);
    background: rgba(254, 143, 126, .30);
}

/* 만질 수 있다는 신호.
   조리 중에는 화면을 계속 보지 않고 손을 놓았다 힐끗 본다. 몇 번 돌고 멈추면
   그때 신호가 없으므로 계속 돌린다. transform/opacity 만 쓰므로 리페인트 없이
   합성만 일어난다 */
.rc-hotspot-ring::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .7);
    animation: rc-hotspot-pulse 1.6s var(--rc-ease) infinite;
}

@keyframes rc-hotspot-pulse {
    0%   { opacity: .8; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(1.7); }
    100% { opacity: 0;  transform: scale(1.7); }
}

/* 사진을 만질 수 있다는 안내 */
.rc-set-hint {
    display: flex;
    align-items: center;
    gap: var(--rc-space-2);
    margin: 0 0 var(--rc-space-4);
    color: var(--rc-coral);
    font-size: var(--rc-text-base);
    font-weight: 600;
}

.rc-set-hint-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--rc-coral);
}


/* ── 시트 ───────────────────────────────────────────────────── */

.rc-sheet {
    position: fixed;
    inset: 0;
    z-index: 200; /* 사이드바(100) 위 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rc-space-6);
    opacity: 0;
    transition: opacity var(--rc-dur) var(--rc-ease);
}

.rc-sheet.is-open { opacity: 1; }

.rc-sheet-veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .68);
}

.rc-sheet-panel {
    position: relative;
    display: flex;
    width: min(760px, 100%);
    max-height: 100%;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-lg);
    overflow: hidden;
    transform: translateY(10px) scale(.985);
    transition: transform var(--rc-dur) var(--rc-ease);
}

.rc-sheet.is-open .rc-sheet-panel { transform: none; }

.rc-sheet-figure {
    flex-shrink: 0;
    width: 260px;
    background: var(--rc-surface-2);
}

.rc-sheet-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-sheet-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rc-space-3);
    padding: var(--rc-space-6);
}

.rc-sheet-title {
    margin: 0;
    font-size: var(--rc-text-xl);
    font-weight: 700;
    line-height: 1.25;
    color: var(--rc-text);
}

.rc-sheet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rc-space-4);
}

.rc-sheet-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--rc-space-2);
    color: var(--rc-text-muted);
    font-size: var(--rc-text-sm);
}

.rc-sheet-desc {
    margin: 0;
    color: var(--rc-text-muted);
    font-size: var(--rc-text-base);
    line-height: 1.6;
}

/* 시트에서 할 일은 하나뿐이다. 주 액션에만 코랄을 쓴다 */
.rc-sheet-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-space-2);
    min-height: 56px;
    padding: 0 var(--rc-space-6);
    border-radius: var(--rc-radius-pill);
    background: var(--rc-coral);
    color: var(--rc-on-coral);
    font-size: var(--rc-text-md);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--rc-dur) var(--rc-ease);
}

.rc-sheet-go:active { background: var(--rc-coral-active); }

.rc-sheet-close {
    position: absolute;
    top: var(--rc-space-3);
    right: var(--rc-space-3);
    z-index: 1;
    width: var(--rc-touch);
    height: var(--rc-touch);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(33, 33, 33, .6);
    color: var(--rc-text);
    cursor: pointer;
}

.rc-sheet-close:active { background: var(--rc-surface-2); }

/* 좁은 화면 — 사진을 위로 올린다 */
@media (max-width: 767.98px) {
    .rc-sheet-panel {
        flex-direction: column;
        overflow-y: auto;
    }

    .rc-sheet-figure {
        width: 100%;
        height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rc-hotspot-ring::before { animation: none; }
}


/* ================================================================
   16. 기기 등록 — 태블릿을 처음 놓을 때 한 번만 보는 화면
   ================================================================ */
.rc-gate-page {
    /* 사이드바가 없는 단독 화면이라 본문 여백 규칙을 따르지 않는다 */
    min-height: 100dvh;
}

.rc-gate {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--rc-space-6);
}

.rc-gate-card {
    width: 100%;
    max-width: 440px;
    padding: var(--rc-space-8);
    border-radius: var(--rc-radius-lg);
    background: var(--rc-surface);
    text-align: center;
}

.rc-gate-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-space-3);
    margin-bottom: var(--rc-space-6);
}

.rc-gate-brand-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rc-radius-sm);
    background: var(--rc-coral);
    color: var(--rc-on-coral);
    font-size: var(--rc-text-xs);
    font-weight: 800;
    letter-spacing: .02em;
}

.rc-gate-brand-text {
    font-size: var(--rc-text-md);
    font-weight: 700;
}

.rc-gate-title {
    margin: 0 0 var(--rc-space-2);
    font-size: var(--rc-text-lg);
    font-weight: 700;
}

.rc-gate-desc {
    margin: 0 0 var(--rc-space-6);
    color: var(--rc-text-muted);
    font-size: var(--rc-text-sm);
    line-height: 1.5;
}

/* 틀린 코드는 조용히 넘어가면 안 된다. 젖은 손으로 다시 치기 전에 눈에 걸려야 한다 */
.rc-gate-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-space-2);
    margin: 0 0 var(--rc-space-5);
    padding: var(--rc-space-3) var(--rc-space-4);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-coral);
    color: var(--rc-on-coral);
    font-size: var(--rc-text-sm);
    font-weight: 600;
    text-align: left;
}

.rc-gate-label {
    display: block;
    margin-bottom: var(--rc-space-2);
    color: var(--rc-text-muted);
    font-size: var(--rc-text-xs);
    font-weight: 600;
    text-align: left;
}

.rc-gate-input {
    width: 100%;
    height: 64px;
    padding: 0 var(--rc-space-4);
    border: 2px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-bg);
    color: var(--rc-text);
    /* 코드를 한 글자씩 확인하며 넣는다. 크고 넓게 벌린다 */
    font-size: var(--rc-text-xl);
    font-weight: 700;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
    transition: border-color var(--rc-dur) var(--rc-ease);
}

.rc-gate-input:focus {
    outline: none;
    border-color: var(--rc-coral);
}

.rc-gate-input::placeholder {
    color: var(--rc-text-muted);
    font-weight: 400;
    letter-spacing: .04em;
}

.rc-gate-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-space-2);
    width: 100%;
    height: 60px;
    margin-top: var(--rc-space-4);
    border-radius: var(--rc-radius-pill);
    background: var(--rc-coral);
    color: var(--rc-on-coral);
    font-size: var(--rc-text-base);
    font-weight: 700;
    transition: background var(--rc-dur) var(--rc-ease);
}

.rc-gate-submit:active {
    background: var(--rc-coral-active);
}

.rc-gate-help {
    margin: var(--rc-space-5) 0 0;
    color: var(--rc-text-muted);
    font-size: var(--rc-text-xs);
}

.rc-gate-lang {
    display: flex;
    justify-content: center;
    margin-top: var(--rc-space-6);
    padding-top: var(--rc-space-6);
    border-top: 1px solid var(--rc-border);
}