/* =========================================================
   한장 요리사 / One-Card Chef — 숏츠 레시피 카드
   -----------------------------------------------------------
   단일 소스 스타일시트 (v1→v2→v3로 누적됐던 오버라이드를
   각 요소당 하나의 규칙으로 정리). 메인 화면은 에디토리얼
   매거진 톤으로 재설계했고, 상세 카드뉴스 화면(다크 잉크 톤)은
   기존 그대로 유지된다.
   ========================================================= */
   :root{
      --ink: #1E1710;
      --paper: #FBF3E3; --paper-2: #F3E7CE; --paper-line: #E2CFA4;
      --char: #2B2016; --char-soft: #6B5D4B;
      --gochu: #D6472B; --gochu-dark: #B23A22;
      --herb: #4F7A55; --herb-dark: #3C5F41;
      --yolk: #F2A93B; --yolk-dark: #B8831F;
      --line-on-ink: rgba(251,243,227,0.14);
      --shadow: 0 18px 40px -14px rgba(0,0,0,.55);
      --font-display: 'Noto Serif KR', serif;
      --font-hand: 'Gaegu', 'Noto Sans KR', sans-serif;
      --font-body: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-mono: 'DM Mono', 'Noto Sans KR', 'SFMono-Regular', monospace;
      /* 메인 화면(에디토리얼) 전용 토큰 */
      --font-editorial: 'Playfair Display', 'Noto Serif KR', serif;
      --ivory: #F2ECDD; --ivory-2: #FBF8F1;
      --hair: rgba(43,32,22,.16);
      --safe-b: env(safe-area-inset-bottom, 0px);
      --safe-t: env(safe-area-inset-top, 0px);
      --app-max: 480px;
      --ad-height: 100px;
      --ad-offset: var(--ad-height);
      }
      *,*::before,*::after{ box-sizing:border-box; }
      [hidden]{ display:none !important; }
      html,body{ margin:0; padding:0; }
      body{
      background: #E7E1D2;
      color: var(--char);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display:flex; justify-content:center;
      }
      img{ max-width:100%; display:block; }
      button{ font-family:inherit; cursor:pointer; }
      input{ font-family:inherit; }
      h1,h2,h3{ margin:0; }
      ::selection{ background: var(--yolk); color:var(--ink); }
      @media (prefers-reduced-motion: reduce){
      *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
      }
      /* -------------------- 앱 프레임 -------------------- */
      #app{
      position:relative; width:100%; max-width:var(--app-max); min-height:100vh;
      background: var(--ivory-2);
      }
      @media (min-width:560px){
      body{ padding:28px 0; }
      #app{ min-height:calc(100vh - 56px); border-radius:20px; clip-path: inset(0 round 20px); box-shadow:0 24px 70px rgba(34,27,18,.16), 0 0 0 1px rgba(34,27,18,.06); }
      }
      @media (min-width:900px){
      :root{ --app-max: 680px; }
      }
      .icon-btn svg{ width:20px; height:20px; }
      .icon-btn{
      width:38px; height:38px; display:flex; align-items:center; justify-content:center;
      background: transparent; border:1px solid var(--hair); border-radius:50%;
      color: var(--char); transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
      }
      .icon-btn:active{ transform: scale(.9); }
      .icon-btn[aria-pressed="true"]{ background: var(--gochu); border-color: var(--gochu); color:#fff; }
      .text-btn{ background:none; border:none; color: var(--gochu); font-weight:700; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; padding:8px 4px; }
      /* =========================================================
      메인 화면 — 에디토리얼 / 매거진 톤
      ========================================================= */
      .screen{ min-height:100vh; position:relative; z-index:2; }
      .main-screen{ padding: calc(20px + var(--safe-t)) 20px calc(var(--ad-offset) + 60px); }
    
      /* -------------------- 마스트헤드 -------------------- */
      .masthead{ margin-bottom:24px; }
      .masthead-kicker{ font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gochu); margin:0 2px 12px; }
      .masthead-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:2px solid var(--char); }
      .install-btn{ border-color: rgba(214,71,43,.5); animation: install-pulse 2.4s ease-in-out infinite; }
      @keyframes install-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(214,71,43,.35);} 50%{ box-shadow:0 0 0 7px rgba(214,71,43,0);} }
      .logo{
      font-family: var(--font-editorial); font-weight:700; font-size:2rem; letter-spacing:.01em;
      color: var(--char); line-height:1;
      }
      .logo span{ font-style:italic; color: var(--gochu); font-weight:600; }
      .masthead-tagline{ font-family:var(--font-editorial); font-style:italic; font-weight:500; color:var(--char-soft); font-size:.86rem; margin:12px 2px 0; }
      .topbar-actions{ display:flex; align-items:center; gap:8px; }
    
      /* -------------------- 검색 -------------------- */
      .search-panel{ margin:18px 0 20px; animation: panel-drop .28s cubic-bezier(.2,.9,.3,1.2); position:relative; z-index:1; }
      @keyframes panel-drop{ from{ opacity:0; transform:translateY(-10px);} to{ opacity:1; transform:translateY(0);} }
      .search-box{ display:flex; align-items:center; gap:10px; background:transparent; border-bottom:1.5px solid var(--char); padding:8px 2px 12px; }
      .search-box svg{ width:18px; height:18px; color: var(--char-soft); flex-shrink:0; }
      .search-box input{ flex:1; border:none; background:transparent; outline:none; font-family:var(--font-editorial); font-style:italic; font-size:1.02rem; color:var(--char); min-width:0; }
      .search-box input::placeholder{ color:#A69A82; font-style:italic; }
      .search-hint{ color:#9A9382; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; margin:10px 2px 0; }
      .search-hint b{ color:var(--gochu); font-family:var(--font-mono); text-transform:none; }
    
      /* -------------------- 섹션 라벨(최근 본 레시피 등) -------------------- */
      .section-label{ font-family:var(--font-mono); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--char-soft); margin:0 2px 12px; display:flex; align-items:center; gap:10px; }
      .section-label::after{ content:''; flex:1; height:1px; background:var(--hair); }
      .history-section{ margin-bottom: 22px; position:relative; z-index:1; }
      .history-row{ display:flex; gap:14px; overflow-x:auto; padding: 4px 4px 8px; scrollbar-width:none; }
      .history-row::-webkit-scrollbar{ display:none; }
      .history-stamp{ flex-shrink:0; width:72px; text-align:center; background:none; border:none; color:var(--char); }
      .history-stamp .stamp-circle{
      width:60px; height:60px; border-radius:12px; background: var(--ivory); display:flex; align-items:center; justify-content:center;
      font-size:1.6rem; border:1px solid var(--hair); margin:0 auto 7px; transition: transform .15s ease;
      }
      .history-stamp:active .stamp-circle{ transform: scale(.92); }
      .history-stamp .stamp-label{ font-size:.68rem; color:var(--char-soft); font-family:var(--font-mono); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    
      /* -------------------- 카테고리 탭 (언더라인 내비) -------------------- */
      .filter-bar{ position:sticky; top:0; z-index:15; background: var(--ivory-2); margin:0 -20px; padding:10px 20px 12px; box-shadow: 0 10px 14px -12px rgba(34,27,18,.18); }
      .category-tabs{ display:flex; gap:22px; overflow-x:auto; padding:2px 2px 0; margin-bottom:16px; border-bottom:1px solid var(--hair); scrollbar-width:none; }
      .category-tabs::-webkit-scrollbar{ display:none; }
      .cat-tab{ flex-shrink:0; padding:6px 0 12px; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; color:var(--char-soft); font-family:var(--font-mono); font-weight:600; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; transition: color .18s ease, border-color .18s ease; }
      .cat-tab.active{ color:var(--char); border-color: var(--gochu); }
    
      /* -------------------- 태그 칩 -------------------- */
      .tag-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; min-height:2px; }
      .chip{ padding:5px 12px; border-radius:999px; border:1px solid var(--hair); background:transparent; color:var(--char-soft); font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; display:inline-flex; align-items:center; gap:5px; transition: all .18s ease; }
      .chip.active{ background: var(--herb); border-color:var(--herb); color:#fff; }
    
      /* -------------------- 즐겨찾기 필터 / 결과 카운트 -------------------- */
      .favorite-toggle-row{ display:flex; align-items:center; justify-content:space-between; margin: 2px 2px 18px; padding-top:16px; border-top:1px solid var(--hair); }
      .fav-filter{ border:1px solid var(--hair); background:transparent; color:var(--char-soft); font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; border-radius:999px; }
      .fav-filter .heart-svg{ width:13px; height:13px; }
      .fav-filter[aria-pressed="true"]{ background: var(--yolk); border-color:var(--yolk); color:var(--ink); }
      .fav-filter[aria-pressed="true"] .heart-svg{ fill:var(--ink); }
      .result-count{ color:#A79C86; font-size:.68rem; font-family:var(--font-mono); letter-spacing:.03em; text-transform:uppercase; }
    
      /* -------------------- 레시피 그리드: 인덱스카드 스타일 -------------------- */
      .recipe-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px 14px; align-items:start; }
      @media (min-width:900px){ .recipe-grid{ grid-template-columns: repeat(3, 1fr); gap:22px 20px; } }
      .recipe-card{
      position:relative; display:flex; flex-direction:column; overflow:hidden;
      border:none; padding:0; text-align:left;
      background: var(--ivory-2); border:1px solid var(--hair); border-radius:10px;
      box-shadow: 0 1px 2px rgba(34,27,18,.05);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      animation: card-settle .45s cubic-bezier(.2,.85,.3,1.1) backwards;
      }
      .recipe-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background: var(--cat-a, var(--gochu)); }
      .recipe-card:active{ transform: scale(.97); }
      @media (hover:hover){ .recipe-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(34,27,18,.32); border-color: rgba(34,27,18,.22); } }
      @keyframes card-settle{ from{ opacity:0; transform: translateY(12px) scale(.96);} to{ opacity:1; transform: translateY(0) scale(1);} }
      .rc-media{ position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; font-size:3.2rem; background: color-mix(in srgb, var(--cat-a, var(--gochu)) 15%, var(--ivory-2)); }
      .rc-media img{ width:100%; height:100%; object-fit:cover; }
      .rc-cat-pill{ position:absolute; top:11px; left:11px; z-index:3; background: rgba(255,255,255,.88); backdrop-filter: blur(3px); color:var(--char); font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; }
      .rc-fav-btn{ position:absolute; top:9px; right:9px; z-index:3; width:29px; height:29px; border-radius:50%; background: rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; }
      .rc-mini-btn{ position:absolute; bottom:9px; right:9px; z-index:3; width:27px; height:27px; border-radius:50%; background: rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; color:var(--char); transition: transform .12s ease; }
      .rc-mini-btn svg{ width:13px; height:13px; }
      .rc-mini-btn:active{ transform: scale(.88); }
      .rc-fav-btn svg{ width:14px; height:14px; color:#B0483A; }
      .rc-fav-btn[aria-pressed="true"] svg{ color:var(--gochu); }
      .rc-info{ padding:12px 13px 14px; }
      .rc-title{ font-family:var(--font-editorial); font-weight:600; font-size:1.02rem; color:var(--char); line-height:1.32; margin-bottom:7px; }
      .rc-meta-row{ display:flex; align-items:center; gap:9px; color:var(--char-soft); font-size:.68rem; font-family:var(--font-mono); margin-bottom:8px; }
      .rc-meta-row svg{ width:10px; height:10px; }
      .rc-diff{ display:inline-flex; align-items:center; gap:5px; font-weight:600; }
      .rc-diff .diff-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
      .rc-diff.diff-easy{ color:var(--herb-dark); }
      .rc-diff.diff-easy .diff-dot{ background:var(--herb); }
      .rc-diff.diff-medium{ color:var(--yolk-dark); }
      .rc-diff.diff-medium .diff-dot{ background:var(--yolk); }
      .rc-diff.diff-hard{ color:var(--gochu-dark); }
      .rc-diff.diff-hard .diff-dot{ background:var(--gochu); }
      .rc-tip-badge{ display:inline-flex; align-items:center; gap:4px; color:var(--herb-dark); font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; margin-bottom:8px; }
      .rc-tags{ display:flex; flex-wrap:wrap; gap:5px; }
      .rc-tag{ font-size:.6rem; font-family:var(--font-mono); color:var(--char-soft); background:transparent; border:1px solid var(--hair); padding:2px 7px; border-radius:5px; font-weight:600; }
      .empty-state{ text-align:center; color:#A79C86; padding:60px 20px; font-family:var(--font-editorial); font-style:italic; font-size:1rem; }
      .foot-note{ text-align:center; color:#B7AE99; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; margin-top:40px; }
    
      /* -------------------- 다른 컨텐츠 보기 -------------------- */
      .promo-toggle-btn{
      position:relative; overflow:hidden;
      display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px;
      padding:14px 18px; border:none; border-radius:999px;
      background: linear-gradient(115deg, var(--gochu) 0%, #E0672E 25%, var(--yolk) 50%, #C9922E 75%, var(--gochu) 100%);
      background-size: 300% 100%;
      color:#fff; font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
      box-shadow: 0 8px 20px -8px rgba(214,71,43,.6);
      animation: promo-gradient-shift 5s ease-in-out infinite, promo-pulse 2.2s ease-in-out infinite;
      }
      .promo-toggle-btn::after{
      content:''; position:absolute; top:0; bottom:0; left:-45%; width:35%; pointer-events:none;
      background: linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
      animation: promo-shine 2.8s ease-in-out infinite;
      }
      .promo-toggle-sparkle{ display:inline-block; font-size:.95rem; animation: promo-twinkle 1.7s ease-in-out infinite; }
      .promo-toggle-arrow{ width:15px; height:15px; flex-shrink:0; animation: promo-bounce 1.2s ease-in-out infinite; }
      @keyframes promo-gradient-shift{ 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} }
      @keyframes promo-pulse{ 0%,100%{ box-shadow:0 8px 20px -8px rgba(214,71,43,.6);} 50%{ box-shadow:0 10px 30px -6px rgba(214,71,43,.9), 0 0 0 6px rgba(214,71,43,.14);} }
      @keyframes promo-shine{ 0%{ left:-45%;} 55%,100%{ left:120%;} }
      @keyframes promo-twinkle{ 0%,100%{ transform:scale(1) rotate(0deg); opacity:1;} 50%{ transform:scale(1.3) rotate(14deg); opacity:.7;} }
      @keyframes promo-bounce{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(4px);} }
      .promo-toggle-btn:active{ transform: scale(.96); }
      @media (hover:hover){ .promo-toggle-btn:hover{ transform: scale(1.02); box-shadow:0 12px 30px -6px rgba(214,71,43,.7); } }
    
      .promo-modal{ position:fixed; inset:0; z-index:250; display:flex; align-items:flex-end; }
      .promo-modal-backdrop{ position:absolute; inset:0; background: rgba(20,15,9,.55); animation: fade-in .2s ease; }
      .promo-modal-inner{ position:relative; width:100%; max-width:var(--app-max); margin:0 auto; max-height:82vh; background: var(--ivory-2); border-radius:22px 22px 0 0; display:flex; flex-direction:column; animation: sheet-up .3s cubic-bezier(.2,.9,.25,1.1); box-shadow: 0 -10px 40px rgba(20,15,9,.25); }
      .promo-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 10px 14px 20px; border-bottom:1px solid var(--hair); flex-shrink:0; }
      .promo-modal-head h3{ font-family:var(--font-editorial); font-weight:600; font-size:1.08rem; color:var(--char); }
      .promo-grid{ overflow-y:auto; padding:16px 16px calc(32px + var(--safe-b)); display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
      .promo-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:14px 6px; background: var(--ivory); border:1px solid var(--hair); border-radius:12px; color:var(--char); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
      .promo-card:active{ transform: scale(.95); }
      @media (hover:hover){ .promo-card:hover{ border-color: rgba(34,27,18,.3); background:#fff; } }
      .promo-icon{ font-size:1.6rem; line-height:1; }
      .promo-text{ font-size:.7rem; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    
      /* =========================================================
      상세 화면 — 카드뉴스 (스크롤 스냅, 다크 잉크 톤 유지)
      ========================================================= */
      .detail-screen{ position:absolute; inset:0; z-index:40; background: var(--ink); }
      .detail-topbar{ position:absolute; top: calc(14px + var(--safe-t)); left:16px; right:16px; z-index:12; display:flex; align-items:center; justify-content:space-between; pointer-events:none; transform: translateZ(0); will-change: transform; }
      .detail-topbar .icon-btn{ pointer-events:auto; background: rgba(255,255,255,.92); border:1px solid rgba(30,25,15,.10); color:#4A443A; box-shadow:0 2px 10px rgba(30,25,15,.12); backdrop-filter: blur(6px); }
      .detail-topbar .icon-btn:active{ transform:scale(.9); }
      .detail-topbar .icon-btn[aria-pressed="true"]{ background:var(--gochu); border-color:var(--gochu); color:#fff; }
      .detail-topbar .cooking-btn[aria-pressed="true"]{ background:var(--yolk); border-color:var(--yolk); color:var(--ink); }
      .detail-actions{ display:flex; gap:8px; }
      .cooking-mode-badge{
      position:absolute; top: calc(64px + var(--safe-t)); left:50%; transform:translateX(-50%); z-index:11;
      background: var(--yolk); color:var(--ink); font-weight:700; font-size:.75rem; padding:7px 14px; border-radius:999px;
      box-shadow:0 8px 20px -6px rgba(0,0,0,.5); animation: badge-in .3s ease;
      }
      @keyframes badge-in{ from{ opacity:0; transform:translate(-50%,-8px);} to{ opacity:1; transform:translate(-50%,0);} }
      .index-tabs{
      position:absolute; right:6px; top:50%; transform:translateY(-50%); z-index:11;
      display:flex; flex-direction:column; gap:8px;
      background: rgba(15,11,7,.4); backdrop-filter: blur(4px); padding:10px 6px; border-radius:14px;
      }
      .index-tab{ width:8px; height:22px; border-radius:99px; background: rgba(251,243,227,.35); transition: all .25s ease; cursor:pointer; }
      .index-tab.active{ width:8px; height:30px; background: var(--gochu); box-shadow: 0 0 10px rgba(214,71,43,.8); }
      .story-scroller{ position:relative; height:100vh; height:100dvh; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
      .story-scroller::-webkit-scrollbar{ display:none; }
      .story-card{ height: calc(100dvh - var(--ad-offset)); scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; position:relative; }
      /* ---- 카드 1: 요리 이미지 + 재료 ---- */
      .ingredients-card{ background: var(--paper); overflow:hidden; }
      .ing-scroll{ flex:1; overflow-y:auto; padding: calc(72px + var(--safe-t)) 22px 30px; }
      .ing-ornament{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
      .ing-ornament::before, .ing-ornament::after{ content:''; flex:1; max-width:56px; height:3px; background: repeating-linear-gradient(to right, var(--char-soft) 0 7px, transparent 7px 10px); opacity:.45; }
      .ing-ornament span{ font-family:var(--font-hand); color:var(--herb-dark); font-size:.92rem; font-weight:700; white-space:nowrap; }
      .ing-title{ font-family:var(--font-display); font-size:1.55rem; text-align:center; color:var(--char); margin-bottom:16px; line-height:1.3; }
      .ing-photo{ width:min(66%, 250px); margin:0 auto 14px; aspect-ratio:4/3; border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:3.4rem; box-shadow:0 14px 30px -10px rgba(0,0,0,.35); cursor:zoom-in; transition:transform .22s ease, box-shadow .22s ease; }
      .ing-photo:active{ transform:scale(.96); }
      .ing-photo img{ width:100%; height:100%; object-fit:cover; }
      .ing-badges{ display:flex; gap:8px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
      .ing-badge{ display:inline-flex; align-items:center; gap:6px; background: var(--char); color: var(--paper); font-family:var(--font-mono); font-size:.76rem; font-weight:700; padding:6px 14px; border-radius:999px; }
      .ing-badge .diff-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
      .ing-badge.diff-easy .diff-dot{ background:var(--herb); }
      .ing-badge.diff-medium .diff-dot{ background:var(--yolk); }
      .ing-badge.diff-hard .diff-dot{ background:var(--gochu); }
      .summary-block-label{ font-family:var(--font-hand); font-weight:700; color:var(--herb-dark); font-size:1rem; margin: 14px 0 8px; display:flex; align-items:center; gap:6px; }
      .ingredient-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
      .ingredient-list li{ background: var(--paper-2); border:1px solid var(--paper-line); border-radius:10px; padding:6px 10px; font-size:.83rem; display:flex; align-items:baseline; gap:5px; }
      .ingredient-list li b{ color:var(--char); }
      .ingredient-list li .amt{ color:var(--char-soft); font-family:var(--font-mono); font-size:.76rem; }
      .ingredient-list li.optional{ opacity:.7; border-style:dashed; }
      .opt-flag{ font-size:.62rem; color:var(--herb-dark); background:rgba(79,122,85,.18); padding:1px 5px; border-radius:5px; font-weight:700; }
      .ingredient-list.ingredient-list-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
      .ingredient-list.ingredient-list-grid li{ width:auto; }
      .swipe-cue{ text-align:center; color:var(--char-soft); font-size:.72rem; margin-top:16px; animation: bob 1.6s ease-in-out infinite; }
      .swipe-cue.swipe-on-dark{ color:rgba(251,243,227,.55); }
      @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }
      /* ---- 카드 2: 전체 조리법 요약 ---- */
      .method-card{ padding: calc(90px + var(--safe-t)) 22px 40px; justify-content:center; justify-content:safe center; align-items:center; text-align:center; overflow-y:auto; background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(79,122,85,.16), transparent 60%); }
      .method-icon{ font-size:2.4rem; margin-bottom:8px; }
      .method-eyebrow{ font-family:var(--font-hand); font-weight:700; color:var(--herb); font-size:.95rem; }
      .method-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--paper); margin: 6px 0 22px; }
      .summary-steps{ list-style:none; margin:0; padding:0; counter-reset: sstep; width:100%; max-width:26em; text-align:left; }
      .summary-steps li{ counter-increment: sstep; position:relative; padding: 8px 0 8px 32px; font-size:.92rem; color:var(--char); border-bottom:1px dashed var(--paper-line); }
      .summary-steps li:last-child{ border-bottom:none; }
      .summary-steps li::before{ content: counter(sstep); position:absolute; left:0; top:7px; width:22px; height:22px; border-radius:50%; background: var(--gochu); color:#fff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
      .summary-steps.method-steps li{ color:#EFE4CC; border-bottom-color: var(--line-on-ink); }
      .summary-steps.method-steps li::before{ background: var(--herb); }
      /* ---- 주의할 점 카드 ---- */
      .caution-card{ padding: calc(90px + var(--safe-t)) 22px 40px; justify-content:center; justify-content:safe center; overflow-y:auto; background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(242,169,59,.14), transparent 60%); }
      .caution-icon{ font-size:2.5rem; margin-bottom:10px; }
      .caution-title{ font-family: var(--font-display); font-size:1.45rem; color:var(--yolk); margin-bottom:6px; }
      .caution-sub{ color:#C9BBA0; font-size:.88rem; margin-bottom:22px; }
      .caution-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
      .caution-list li{ display:flex; gap:12px; align-items:flex-start; background:rgba(251,243,227,.06); border:1px solid var(--line-on-ink); border-radius:14px; padding:13px 15px; }
      .caution-num{ flex-shrink:0; width:23px; height:23px; border-radius:50%; background:var(--yolk); color:var(--ink); font-weight:800; font-size:.76rem; display:flex; align-items:center; justify-content:center; }
      .caution-list li span:last-child{ color:#EFE4CC; font-size:.92rem; line-height:1.55; }
      /* ---- 스텝 카드 ---- */
      .step-card{ padding: calc(90px + var(--safe-t)) 22px 40px; justify-content:center; justify-content:safe center; overflow-y:auto; }
      .step-eyebrow{ font-family:var(--font-mono); color: var(--yolk); font-size:.8rem; font-weight:600; margin-bottom:10px; opacity:0; }
      .step-number{ font-family:var(--font-display); font-weight:700; font-size:5.2rem; line-height:1; color: var(--paper); opacity:.14; position:absolute; top:70px; right:14px; }
      .step-title{ font-family:var(--font-display); font-size:1.65rem; color:var(--paper); margin-bottom:14px; opacity:0; transform:translateY(14px); }
      .step-desc{ color:#E4D8BE; font-size:1rem; line-height:1.7; max-width:32em; opacity:0; transform:translateY(14px); }
      .step-time-chip{ margin-top:22px; display:inline-flex; align-items:center; gap:8px; background: var(--gochu); color:#fff; border:none; padding:14px 22px; border-radius:999px; font-weight:700; font-size:.98rem; box-shadow: 0 10px 26px -8px rgba(214,71,43,.7); opacity:0; transform:translateY(14px); transition: transform .15s ease, background .2s ease; }
      .step-time-chip svg{ width:19px; height:19px; }
      .step-time-chip:active{ transform: scale(.94); }
      .step-time-chip.running{ background: var(--herb); box-shadow: 0 10px 26px -8px rgba(79,122,85,.7); }
      .step-time-chip.done{ background: #6B5D4B; }
      .story-card.in-view .step-eyebrow, .story-card.in-view .step-title, .story-card.in-view .step-desc, .story-card.in-view .step-time-chip,
      .story-card.in-view .caution-icon, .story-card.in-view .caution-title, .story-card.in-view .caution-sub, .story-card.in-view .caution-list{
      animation: rise-in .55s cubic-bezier(.2,.85,.3,1.1) forwards;
      }
      .story-card.in-view .step-title, .story-card.in-view .caution-title{ animation-delay:.05s; }
      .story-card.in-view .step-desc, .story-card.in-view .caution-sub{ animation-delay:.14s; }
      .story-card.in-view .step-time-chip, .story-card.in-view .caution-list{ animation-delay:.22s; }
      @keyframes rise-in{ to{ opacity:1; transform:translateY(0); } }
      /* ---- 완성 카드 ---- */
      .final-card{ align-items:center; justify-content:center; justify-content:safe center; overflow-y:auto; text-align:center; padding: 0 30px 40px; }
      .final-emoji{ font-size:4rem; margin-bottom:14px; }
      .final-title{ font-family:var(--font-display); color:var(--paper); font-size:1.8rem; margin-bottom:8px; }
      .final-sub{ color:#C9BBA0; font-size:.95rem; margin-bottom:26px; }
      .final-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
      .final-btn{ padding:13px 22px; border-radius:14px; border:none; font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:7px; }
      .final-btn.primary{ background: var(--gochu); color:#fff; }
      .final-btn.ghost{ background: rgba(251,243,227,.08); color:var(--paper); border:1px solid var(--line-on-ink); }
      /* 팁 카드(.tip-sheet)는 밝은 배경이라 final-btn.ghost의 크림톤 반투명 스타일이 안 보였던 문제 수정 */
      .tip-sheet .final-btn.ghost{ background: var(--paper-2); color: var(--char); border:1px solid var(--paper-line); }
      /* ---- 꿀팁 카드 ---- */
      .tip-card{ overflow-y:auto; }
      .tip-hero{ height:32vh; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:4.2rem; background: linear-gradient(160deg, var(--cat-a,#7A5A9E), var(--cat-b,#513C6B)); border-radius:0 0 26px 26px; }
      .tip-sheet{ flex:1; background: var(--paper); padding: 22px 22px calc(30px + var(--safe-b)); }
      .tip-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--char); margin-bottom:8px; }
      .tip-summary{ color:var(--char-soft); font-size:.92rem; margin-bottom:20px; line-height:1.5; }
      .tip-points{ display:flex; flex-direction:column; gap:14px; }
      .tip-point{ background: var(--paper-2); border:1px solid var(--paper-line); border-radius:14px; padding:13px 15px; }
      .tip-point-head{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--herb-dark); font-size:.95rem; margin-bottom:5px; }
      .tip-check{ color:var(--herb); }
      .tip-point-desc{ color:var(--char); font-size:.86rem; line-height:1.55; margin:0; }
    
      /* -------------------- 사진 라이트박스 -------------------- */
      .photo-lightbox{
      position:fixed; inset:0; z-index:400;
      background:rgba(10,7,4,.78); backdrop-filter:blur(6px);
      display:flex; align-items:center; justify-content:center;
      cursor:zoom-out; animation:fade-in .2s ease;
      }
      .photo-lightbox .lb-inner{
      max-width:92%; max-height:82vh;
      background:var(--paper); border-radius:22px; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      padding:10px; font-size:6rem;
      animation:lb-pop .28s cubic-bezier(.2,.9,.3,1.2);
      }
      .photo-lightbox .lb-inner img{ width:min(88vw, 640px); max-height:76vh; object-fit:contain; border-radius:14px; }
      @keyframes lb-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
    
      /* =========================================================
      타이머 트레이
      ========================================================= */
      .timer-tray{ position:fixed; left:0; right:0; bottom: var(--ad-offset); z-index:60; padding: 10px 12px calc(12px + var(--safe-b)); display:flex; gap:10px; overflow-x:auto; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); scrollbar-width:none; transition: bottom .3s ease; }
      .timer-tray::-webkit-scrollbar{ display:none; }
      .timer-pill{ flex-shrink:0; display:flex; align-items:center; gap:10px; background: var(--paper); border-radius:999px; padding:8px 8px 8px 14px; box-shadow: var(--shadow); animation: pill-pop .3s cubic-bezier(.25,1,.4,1.3); border:2px solid transparent; }
      @keyframes pill-pop{ from{ opacity:0; transform:scale(.6);} to{ opacity:1; transform:scale(1);} }
      .timer-pill .t-ring{ position:relative; width:34px; height:34px; flex-shrink:0; }
      .timer-pill .t-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
      .timer-pill .t-ring circle{ fill:none; stroke-width:4; }
      .timer-pill .t-ring .bg{ stroke: var(--paper-line); }
      .timer-pill .t-ring .fg{ stroke: var(--gochu); stroke-linecap:round; transition: stroke-dashoffset 1s linear; }
      .timer-pill .t-info{ display:flex; flex-direction:column; line-height:1.2; }
      .timer-pill .t-label{ font-size:.68rem; color:var(--char-soft); font-weight:600; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .timer-pill .t-time{ font-family:var(--font-mono); font-weight:700; font-size:.95rem; color:var(--char); }
      .timer-pill .t-close{ width:26px; height:26px; border-radius:50%; border:none; background:var(--paper-2); color:var(--char-soft); font-size:.9rem; }
      .timer-pill.paused{ opacity:.6; }
      .timer-pill.finished{ border-color: var(--yolk); animation: pill-pop .3s ease, pill-shake .5s ease .1s 2; }
      .timer-pill.finished .t-time{ color: var(--gochu); }
      @keyframes pill-shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-3px);} 75%{ transform:translateX(3px);} }
      /* =========================================================
      카드 비행 애니메이션 + 연기
      ========================================================= */
      .flight-layer{ position:fixed; inset:0; z-index:38; pointer-events:none; }
      .flight-card{ position:fixed; border-radius:16px; overflow:hidden; box-shadow: 0 30px 60px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; font-size:3rem; transition: all .55s cubic-bezier(.16,.9,.2,1.05); }
      .flight-card img{ width:100%; height:100%; object-fit:cover; }
      .steam-canvas{ position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:99; pointer-events:none; }
      .main-screen.dimming{ animation: dim-out .4s ease forwards; }
      @keyframes dim-out{ to{ filter:brightness(.5) saturate(.7); transform:scale(.97); } }
      /* =========================================================
      공유 시트 / 토스트
      ========================================================= */
      .share-sheet{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; }
      .share-sheet-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); animation: fade-in .2s ease; }
      @keyframes fade-in{ from{ opacity:0;} to{ opacity:1;} }
      .share-sheet-inner{ position:relative; width:100%; background: var(--paper); border-radius:24px 24px 0 0; padding: 10px 22px calc(24px + var(--safe-b)); animation: sheet-up .3s cubic-bezier(.2,.9,.25,1.1); }
      @keyframes sheet-up{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
      .sheet-handle{ width:38px; height:4px; background: var(--paper-line); border-radius:99px; margin: 8px auto 14px; }
      .share-sheet-inner h3{ font-family:var(--font-display); font-size:1.1rem; margin-bottom:14px; color:var(--char); }
      .share-option{ width:100%; display:flex; align-items:center; gap:12px; padding:14px 12px; background:none; border:none; border-bottom:1px solid var(--paper-line); font-size:.98rem; font-weight:600; color:var(--char); text-align:left; }
      .share-option:last-of-type{ border-bottom:none; }
      .share-ico{ font-size:1.3rem; }
      .share-ico.brand-ico{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-family:var(--font-editorial); font-weight:700; font-size:.84rem; }
      .share-ico.fb-ico{ background:#1877F2; font-style:italic; }
      .share-ico.x-ico{ background:#000; }
      .share-cancel{ display:block; width:100%; text-align:center; margin-top:8px; color:var(--char-soft); }
    
      /* -------------------- 미니모드 (플립 카드 미리보기) -------------------- */
      .mini-modal{ position:fixed; inset:0; z-index:260; perspective:1400px; }
      .mini-modal-backdrop{ position:absolute; inset:0; background: rgba(20,15,9,.6); backdrop-filter: blur(3px); animation: fade-in .2s ease; }
      .mini-modal-inner{ position:relative; width:100%; max-width:var(--app-max); height:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; padding:24px; }
      .mini-card-wrap{ position:relative; width:min(88vw, 340px); height:min(76vh, 500px); }
      .mini-close-btn{ position:absolute; top:-14px; right:-14px; z-index:20; width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.95); color:var(--char); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.25); }
      .mini-close-btn svg{ width:18px; height:18px; }
      .mini-close-btn:active{ transform: scale(.9); }
    
      .mini-flip-card{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.4,.2,.2,1); animation: mini-pop .3s cubic-bezier(.2,.9,.25,1.1); }
      @keyframes mini-pop{ from{ opacity:0; transform:scale(.85);} to{ opacity:1; transform:scale(1);} }
      .mini-flip-card.flipped{ transform: rotateY(180deg); }
      .mini-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:24px; overflow:hidden; background: var(--ivory-2); border:1px solid var(--hair); box-shadow: 0 24px 60px rgba(20,15,9,.35); display:flex; flex-direction:column; }
      .mini-back{ transform: rotateY(180deg); background:#fff; }
    
      .mini-face-scroll{ flex:1; min-height:0; overflow-y:auto; padding:20px 20px 8px; }
      .mini-front-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
      .mini-kicker{ font-family:var(--font-mono); font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gochu); }
      .mini-time-row{ display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.72rem; color:var(--char-soft); }
      .mini-time-row svg{ width:11px; height:11px; }
    
      .mini-hero{ width:100%; aspect-ratio:16/10; border-radius:16px; background: var(--ivory); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; font-size:3.6rem; margin-bottom:14px; overflow:hidden; }
      .mini-hero img{ width:100%; height:100%; object-fit:cover; }
    
      .mini-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
      .mini-title{ font-family:var(--font-editorial); font-weight:700; font-size:1.3rem; color:var(--char); line-height:1.28; }
      .mini-fav-btn{ flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--ivory); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; }
      .mini-fav-btn svg{ width:15px; height:15px; color:#B0483A; }
      .mini-fav-btn[aria-pressed="true"] svg{ color:var(--gochu); }
    
      .mini-section{ margin-top:16px; }
      .mini-section-label{ font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--char-soft); margin-bottom:8px; }
      .mini-chips{ display:flex; flex-wrap:wrap; gap:6px; }
      .mini-chip{ font-size:.78rem; font-weight:600; background:var(--paper-2); border:1px solid var(--paper-line); color:var(--char); padding:5px 10px; border-radius:8px; }
      .mini-opt{ font-style:normal; font-size:.6rem; color:var(--herb-dark); background:rgba(79,122,85,.14); padding:1px 5px; border-radius:5px; margin-left:3px; font-weight:700; }
      .mini-quick-steps{ list-style:none; counter-reset:mstep; }
      .mini-quick-steps li{ counter-increment:mstep; position:relative; padding:6px 0 6px 26px; font-size:.86rem; color:var(--char); border-bottom:1px dashed var(--hair); }
      .mini-quick-steps li:last-child{ border-bottom:none; }
      .mini-quick-steps li::before{ content:counter(mstep); position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%; background:var(--gochu); color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
    
      .mini-detail-steps{ list-style:none; counter-reset:mdstep; margin-top:2px; }
      .mini-detail-steps li{ counter-increment:mdstep; position:relative; padding:0 0 16px 30px; }
      .mini-detail-steps li::before{ content:counter(mdstep); position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%; background:var(--char); color:#fff; font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
      .mini-detail-steps li b{ display:block; font-size:.88rem; color:var(--char); margin-bottom:3px; }
      .mini-detail-steps li span{ display:block; font-size:.8rem; color:var(--char-soft); line-height:1.55; }
    
      .mini-flip-btn{ margin:10px 16px calc(16px + var(--safe-b)); padding:13px; border-radius:14px; border:none; font-weight:700; font-size:.84rem; display:flex; align-items:center; justify-content:center; gap:6px; background: var(--gochu); color:#fff; flex-shrink:0; }
      .mini-flip-btn:active{ transform: scale(.96); }
      .mini-back-actions{ display:flex; gap:8px; margin:10px 16px calc(16px + var(--safe-b)); flex-shrink:0; }
      .mini-back-actions .mini-flip-btn{ margin:0; flex:1; }
      .mini-back-actions .mini-flip-btn.ghost{ background: var(--paper-2); color:var(--char); border:1px solid var(--paper-line); }
      .toast{ position:fixed; left:50%; bottom: calc(30px + var(--safe-b) + var(--ad-offset)); transform:translateX(-50%); z-index:300; background: var(--char); color: var(--paper); padding:12px 20px; border-radius:999px; font-size:.86rem; font-weight:600; box-shadow: var(--shadow); animation: toast-in .25s ease; transition: bottom .3s ease; max-width: calc(100% - 40px); text-align:center; }
      @keyframes toast-in{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }
      /* =========================================================
      하단 고정 구글 광고
      ========================================================= */
      .ad-fixed-bottom{
      position: fixed; left:0; right:0; bottom:0; width:100%; max-width:var(--app-max); margin:0 auto;
      min-height: var(--ad-height); padding-bottom: env(safe-area-inset-bottom, 0px);
      box-sizing: border-box; background: var(--ivory-2); border-top:1px solid var(--hair);
      display:flex; align-items:center; justify-content:center; overflow:hidden; z-index: 45;
      }
      .ad-fixed-bottom .adsbygoogle{ width:100%; }
      @media (min-width:560px){ .ad-fixed-bottom{ border-radius:0 0 20px 20px; } }
      /* 키보드 포커스 표시 */
      :focus-visible{ outline:2px solid var(--yolk); outline-offset:2px; }