/* ═══════════════════════════════════════════════════════════════
   KONGI RECIPE v3 — 2026-07 목업 리디자인
   로딩 · 레시피 카드 · 분쇄도 환산표 · 추출 타임라인 · 피드백 스킨.
   kongi-home.css의 :root 토큰(--kh-*)을 그대로 사용한다.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. 로딩 (#screenLoading)
═══════════════════════════════════════════════════════════════ */
#screenLoading {
  background: var(--kh-bg) !important;
  justify-content: center;
}
.kl-kongi {
  position: relative;
  width: 152px;
  margin-bottom: 1.7rem;
  animation: klFadeUp .8s ease both;
}
.kl-kongi-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(70, 40, 26, .22));
  animation: klBob 2.6s ease-in-out infinite;
}
@keyframes klBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-8px) rotate(1.5deg); }
}
/* 콩이 아래로 떨어지는 드립 방울 */
.kl-drip {
  position: absolute;
  left: 50%; bottom: -14px;
  width: 9px; height: 12px;
  margin-left: -4.5px;
  background: var(--kh-brown);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: klDrip 1.5s ease-in-out infinite;
}
@keyframes klDrip {
  0%      { transform: translateY(-6px) scaleY(.7); opacity: 0; }
  35%     { opacity: 1; }
  100%    { transform: translateY(22px) scaleY(1.15); opacity: 0; }
}
.kl-spark {
  position: absolute;
  color: #E5B54C;
  font-size: 1rem;
  animation: klTwinkle 2s ease-in-out infinite;
}
.kl-spark-1 { top: 4px;   left: -6px;  font-size: 1.2rem; }
.kl-spark-2 { top: 30px;  right: -8px; animation-delay: .5s; }
.kl-spark-3 { top: -8px;  right: 24px; font-size: .85rem; animation-delay: 1s; }
@keyframes klTwinkle {
  0%, 100% { opacity: .2; transform: scale(.75); }
  50%      { opacity: 1;  transform: scale(1.2); }
}

#screenLoading .load-logo {
  font-family: var(--f-kongi);
  font-style: normal;
  font-weight: 800;
  font-size: 2.9rem;
  letter-spacing: .04em;
  color: var(--kh-ink);
}
#screenLoading .kl-logo-kr {
  font-family: var(--f-kongi);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .2em;
  color: var(--kh-brown);
  margin-top: .3rem;
}
#screenLoading .by-bublica-text { color: var(--kh-ink-soft); opacity: .7; }
#screenLoading .load-tagline {
  color: var(--kh-ink-soft);
  opacity: .75;
}
#screenLoading .load-bar-wrap {
  width: 150px; height: 4px;
  background: var(--kh-bg-deep);
  border-radius: 999px;
}
#screenLoading .load-bar-fill {
  background: var(--kh-brown);
  border-radius: 999px;
}
@keyframes klFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   공통: 레시피 플로우 화면 배경 + 네비 헤더
═══════════════════════════════════════════════════════════════ */
#screenRecipe { background: var(--kh-bg); }
#screenRecipe .nav-header {
  background: transparent;
  border-bottom: none;
  padding: 1rem 1.2rem .4rem;
}
#screenRecipe .nav-title {
  font-family: var(--f-kongi);
  font-weight: 800;
  font-size: 1.28rem;
  color: var(--kh-ink);
}
#screenRecipe .back-btn {
  border: none;
  background: transparent;
  color: var(--kh-ink);
  font-size: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   2. 레시피 카드 (#screenRecipe .recipe-card)
═══════════════════════════════════════════════════════════════ */
#screenRecipe .recipe-body { background: var(--kh-bg); }
#screenRecipe .recipe-card {
  background: var(--kh-card);
  border: 2px solid var(--kh-line-soft);
  border-radius: var(--kh-r-lg);
  padding: 1.4rem 1.35rem 1.3rem;
  box-shadow: var(--kh-shadow);
}

/* HOT / ICE 토글 */
#screenRecipe .rc-hotice {
  background: var(--kh-bg-deep);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
#screenRecipe .rc-hi-btn {
  font-family: var(--f-kongi);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .06em;
  color: var(--kh-ink-soft);
  border-radius: 999px;
  padding: .4rem 1rem;
}
#screenRecipe .rc-hi-btn.active {
  background: var(--kh-brown);
  color: var(--kh-cream);
}

/* 즐겨찾기 하트 */
#screenRecipe .fav-btn { color: var(--kh-ink-soft); }
#screenRecipe .fav-btn:hover,
#screenRecipe .fav-btn.active { color: #D6604B; }

/* 카드 헤더 (메타 · 시간) */
#screenRecipe .rc-card-head-meta,
#screenRecipe .rc-card-head-time {
  font-family: var(--f-mono);
  color: var(--kh-ink-soft);
  letter-spacing: .2em;
}

/* 원두명 타이틀 */
#screenRecipe .rc-card-title {
  background: linear-gradient(180deg, var(--kh-bg-deep), #EFE0BD);
  border-radius: var(--kh-r-md);
  padding: 1rem 1.1rem;
  border: none;
}
#screenRecipe .rc-card-kr {
  font-family: var(--f-kongi);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.28;
  color: var(--kh-ink);
  letter-spacing: .005em;
}
#screenRecipe .rc-card-en {
  font-family: var(--f-serif-en);
  font-style: italic;
  color: var(--kh-ink-soft);
}
#screenRecipe .rc-card-ice-note { color: var(--washed); }

/* 콩이 한 줄 코칭 팁 (레시피 카드) */
#screenRecipe .rc-kongi-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: .9rem 0 .2rem;
}
#screenRecipe .rc-kongi-tip-img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(70, 40, 26, .18));
  animation: khKongiFloat 3.6s ease-in-out infinite;
}
#screenRecipe .rc-kongi-tip-bubble {
  position: relative;
  flex: 1;
  background: var(--kh-mint);
  border: 1.5px solid var(--kh-mint-deep);
  border-radius: 16px;
  padding: .7rem .9rem;
  font-family: var(--f-kongi);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--kh-brown-2);
  letter-spacing: .01em;
  word-break: keep-all;
}
#screenRecipe .rc-kongi-tip-bubble::before {
  content: "";
  position: absolute;
  left: -9px; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right: 9px solid var(--kh-mint-deep);
}
#screenRecipe .rc-kongi-tip-bubble::after {
  content: "";
  position: absolute;
  left: -6px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right: 7px solid var(--kh-mint);
}

/* 콩이 코칭 (타임라인) */
#screenRecipe .tl-kongi-guide {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: .2rem 0 1rem;
}
#screenRecipe .tl-kongi-img {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(70, 40, 26, .18));
}
#screenRecipe .tl-kongi-bubble {
  position: relative;
  flex: 1;
  background: #6F4226;
  border: 2px solid var(--kh-mint-deep);
  border-radius: 16px;
  padding: .7rem .9rem;
  font-family: var(--f-kongi);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--kh-cream);
  letter-spacing: .01em;
  word-break: keep-all;
}
#screenRecipe .tl-kongi-bubble::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right: 9px solid var(--kh-mint-deep);
}
#screenRecipe .tl-kongi-bubble::after {
  content: "";
  position: absolute;
  left: -6px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right: 7px solid #6F4226;
}

/* 보정 배지 + 산지 노트 */
#screenRecipe .rc-correction-badge {
  background: var(--kh-mint);
  border: 1.5px solid rgba(60, 120, 80, .3);
  border-radius: var(--kh-r-sm);
  color: var(--kh-ink);
  font-family: var(--f-sans);
}
#screenRecipe .rc-correction-badge .rc-cb-off,
#screenRecipe .rc-correction-badge button {
  font-family: var(--f-kongi);
  font-weight: 700;
}
#screenRecipe .rc-origin-note {
  background: #FFFDF4;
  border: 1.5px solid var(--kh-line-soft);
  border-radius: var(--kh-r-sm);
  color: var(--kh-ink-soft);
}

/* 다이얼 (온도 · 원두 · 비율 · 시간 · 분쇄도) */
#screenRecipe .rc-dial { border-top-color: rgba(94, 58, 34, .12); }
#screenRecipe .rc-dial-kr {
  font-family: var(--f-kongi);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--kh-ink);
}
#screenRecipe .rc-dial-en {
  font-family: var(--f-mono);
  color: var(--kh-ink-soft);
  opacity: .7;
}
#screenRecipe .rc-dial-val {
  font-family: var(--f-num, sans-serif);
  font-weight: 700;
  color: var(--kh-ink);
}
#screenRecipe .rc-dial-unit { color: var(--kh-ink-soft); }

/* 분쇄도 크기 태그 + 환산 버튼 */
#screenRecipe .rc-grind-size-tag {
  background: var(--kh-brown);
  color: var(--kh-cream);
  font-family: var(--f-kongi);
  font-weight: 700;
  border-radius: 10px;
  border: none;
}
#screenRecipe .rc-grind-convert-btn {
  background: #FFFDF4;
  border: 1.5px solid var(--kh-line-soft);
  border-radius: 999px;
  color: var(--kh-ink-soft);
  font-family: var(--f-sans);
}
#screenRecipe .rc-grind-convert-btn:hover {
  border-color: var(--kh-brown);
  color: var(--kh-brown);
}

/* 분쇄 안내 문구 */
#screenRecipe .rc-grind-note {
  color: var(--kh-ink-soft);
  opacity: .78;
}

/* 다른 레시피 보기 */
#screenRecipe .rc-variants-label { font-family: var(--f-kongi);
  font-weight: 700; color: var(--kh-ink); }
#screenRecipe .rc-variants-count { color: var(--kh-ink-soft); }
#screenRecipe .rc-var-item {
  background: #FFFDF4;
  border: 1.5px solid var(--kh-line-soft);
  border-radius: var(--kh-r-sm);
}
#screenRecipe .rc-var-item.active {
  background: var(--kh-brown);
  border-color: var(--kh-brown);
}
#screenRecipe .rc-var-name { font-family: var(--f-kongi);
  font-weight: 700; }

/* 추출 시작 CTA */
#screenRecipe .rc-brew-start {
  background: var(--kh-brown);
  color: var(--kh-cream);
  border-radius: 18px;
  font-family: var(--f-kongi);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: .04em;
  box-shadow: 0 10px 20px -10px rgba(94, 58, 34, .5),
              inset 0 1.5px 0 rgba(255, 244, 222, .16);
}
#screenRecipe .rc-brew-start:hover { background: #6A3D20; }

/* 피드백 CTA */
#screenRecipe .recipe-feedback-cta {
  background: #FFFDF4;
  border: 1.5px solid var(--kh-line-soft);
  border-radius: var(--kh-r-md);
  color: var(--kh-ink);
  font-family: var(--f-kongi);
  font-weight: 700;
  box-shadow: var(--kh-shadow);
}
#screenRecipe .recipe-feedback-cta:hover {
  border-color: var(--kh-brown);
  color: var(--kh-brown);
}

/* ═══════════════════════════════════════════════════════════════
   3. 추출 타임라인 (#recipeTimelineWrap)
═══════════════════════════════════════════════════════════════ */
#screenRecipe .recipe-timeline-wrap {
  background: var(--kh-card);
  border: 2px solid var(--kh-line-soft);
  border-radius: var(--kh-r-lg);
  padding: 1.35rem 1.3rem 1.2rem;
  box-shadow: var(--kh-shadow);
}
#screenRecipe .recipe-timeline-wrap.hidden { display: none; }
#screenRecipe .timeline-title {
  font-family: var(--f-kongi);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--kh-ink);
}
#screenRecipe .timeline-total { font-family: var(--f-mono); color: var(--kh-ink-soft); }
#screenRecipe .timeline-total strong { color: var(--kh-brown); }

/* 스텝 노드 (원형) */
#screenRecipe .timeline-steps::before { background: rgba(94, 58, 34, .16); }
#screenRecipe .step-node {
  background: #FFFDF4;
  border: 2px solid rgba(94, 58, 34, .28);
  color: var(--kh-ink-soft);
  font-family: var(--f-kongi);
  font-weight: 700;
}
#screenRecipe .step-node.active {
  background: var(--kh-brown);
  border-color: var(--kh-brown);
  color: var(--kh-cream);
  box-shadow: 0 4px 10px -3px rgba(94, 58, 34, .5);
}
#screenRecipe .step-node.done {
  background: var(--kh-mint);
  border-color: var(--kh-mint-deep);
  color: var(--kh-brown-2);
}
#screenRecipe .step-label { font-family: var(--f-mono); color: var(--kh-ink-soft); }
#screenRecipe .step-col.active .step-label { color: var(--kh-ink); }

/* 스텝 카드 */
#screenRecipe .step-card {
  background: linear-gradient(180deg, #FFFDF4, var(--kh-bg-deep));
  border: 1.5px solid var(--kh-line-soft);
  border-radius: var(--kh-r-md);
}
#screenRecipe .step-card-num { color: var(--kh-ink); font-family: var(--f-num, sans-serif); }
#screenRecipe .step-card-num-g,
#screenRecipe .step-card-num-unit { color: var(--kh-ink-soft); }
#screenRecipe .step-card-name { font-family: var(--f-kongi);
  font-weight: 700; color: var(--kh-ink); }
#screenRecipe .step-card-instr { color: var(--kh-ink-soft); }
#screenRecipe .step-countdown { color: var(--kh-ink-soft); }
#screenRecipe .step-countdown-val { color: var(--kh-brown); font-weight: 700; }
#screenRecipe .step-card-complete .step-card-num { color: var(--kh-green); }

/* 컨트롤 버튼 */
#screenRecipe .pour-start-btn {
  background: var(--kh-brown);
  color: var(--kh-cream);
  border-radius: 16px;
  font-family: var(--f-kongi);
  font-weight: 700;
  letter-spacing: .03em;
}
#screenRecipe .pour-start-btn:hover { background: #6A3D20; }
#screenRecipe .pour-start-btn.running { background: #8A5A38; }
#screenRecipe .pour-start-btn.running:hover { background: #774627; }
#screenRecipe .pour-skip-btn {
  background: #FFFDF4;
  border: 1.5px solid var(--kh-line-soft);
  border-radius: 16px;
  color: var(--kh-ink);
  font-family: var(--f-kongi);
  font-weight: 700;
}
#screenRecipe .pour-skip-btn:hover:not(:disabled) {
  border-color: var(--kh-brown);
  color: var(--kh-brown);
}
#screenRecipe .timeline-back-btn {
  background: transparent;
  border: 1.5px solid var(--kh-line-soft);
  border-radius: 14px;
  color: var(--kh-ink-soft);
  font-family: var(--f-kongi);
  font-weight: 700;
}
#screenRecipe .timeline-back-btn:hover {
  border-color: var(--kh-brown);
  color: var(--kh-brown);
}

/* ═══════════════════════════════════════════════════════════════
   4. 피드백/리뷰 카드 (.review-card)
═══════════════════════════════════════════════════════════════ */
#screenRecipe .review-card {
  background: var(--kh-card);
  border: 2px solid var(--kh-line-soft);
  border-radius: var(--kh-r-lg);
  box-shadow: var(--kh-shadow);
}
#screenRecipe .review-eyebrow {
  font-family: var(--f-mono);
  color: var(--kh-brown);
}
#screenRecipe .review-title {
  font-family: var(--f-kongi);
  font-weight: 800;
  font-size: 1.55rem;
  color: var(--kh-ink);
}
#screenRecipe .review-sub { color: var(--kh-ink); }
#screenRecipe .review-ctx { font-family: var(--f-mono); color: var(--kh-ink-soft); }
#screenRecipe .review-promise {
  background: var(--kh-mint);
  border-left: 4px solid var(--kh-mint-deep);
  border-radius: 12px;
  color: var(--kh-ink);
  font-family: var(--f-sans);
}
#screenRecipe .review-promise strong { color: var(--kh-brown-2); }
#screenRecipe .rstar { color: rgba(94, 58, 34, .22); }
#screenRecipe .rstar.on { color: #E5B54C; }
#screenRecipe .rtag {
  background: var(--kh-bg-deep);
  border: 1.5px solid rgba(94, 58, 34, .28);
  border-radius: 12px;
  font-family: var(--f-kongi);
  font-weight: 700;
  color: var(--kh-ink);
}
#screenRecipe .rtag:hover { border-color: var(--kh-brown); }
#screenRecipe .rtag.selected {
  background: var(--kh-mint);
  border-color: var(--kh-mint-deep);
  color: var(--kh-brown-2);
}
#screenRecipe .review-hint { color: var(--kh-ink-soft); }
#screenRecipe .review-save {
  background: var(--kh-brown);
  color: var(--kh-cream);
  border-radius: 16px;
  font-family: var(--f-kongi);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
  box-shadow: 0 10px 20px -10px rgba(94, 58, 34, .5),
              inset 0 1.5px 0 rgba(255, 244, 222, .16);
}
#screenRecipe .review-save:hover:not(:disabled) { background: #6A3D20; }
#screenRecipe .review-save:disabled {
  background: #C9B79B;
  color: #F3EAD8;
  box-shadow: none;
}
#screenRecipe .review-skip {
  font-family: var(--f-kongi);
  font-weight: 700;
  color: var(--kh-ink-soft);
  letter-spacing: .04em;
  text-transform: none;
  font-size: .9rem;
}
#screenRecipe .review-skip:hover { color: var(--kh-brown); }

/* ═══════════════════════════════════════════════════════════════
   5. 분쇄도 환산표 모달 (#gcvModal)
═══════════════════════════════════════════════════════════════ */
#gcvModal .gcv-modal-backdrop { background: rgba(46, 28, 16, .5); }
#gcvModal .gcv-modal-panel {
  background: var(--kh-bg);
  border-radius: var(--kh-r-lg) var(--kh-r-lg) 0 0;
  border: none;
}
#gcvModal .gcv-title {
  font-family: var(--f-kongi);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--kh-ink);
}
#gcvModal .gcv-sub { color: var(--kh-ink-soft); }
#gcvModal .gcv-modal-close {
  border: 1.5px solid var(--kh-line-soft);
  border-radius: 50%;
  color: var(--kh-ink-soft);
  background: #FFFDF4;
}
#gcvModal .gcv-modal-close:hover {
  border-color: var(--kh-brown);
  color: var(--kh-brown);
  background: var(--kh-bg-deep);
}
#gcvModal .gcv-table th {
  font-family: var(--f-mono);
  color: var(--kh-ink-soft);
  background: var(--kh-bg-deep);
  border-color: rgba(94, 58, 34, .14);
}
#gcvModal .gcv-table td {
  font-family: var(--f-num, sans-serif);
  color: var(--kh-ink);
  border-color: rgba(94, 58, 34, .1);
}
#gcvModal .gcv-table td.gcv-anchor,
#gcvModal .gcv-table th.gcv-anchor {
  background: var(--kh-bg-deep);
  color: var(--kh-brown);
  font-family: var(--f-kongi);
  font-weight: 700;
}
/* 현재 레시피 강조 행 → 브라운 */
#gcvModal .gcv-table tr.gcv-row-active td {
  background: var(--kh-brown);
  color: var(--kh-cream);
}
#gcvModal .gcv-table tr.gcv-row-active td.gcv-anchor {
  background: #5E3A22;
  color: var(--kh-cream);
}
#gcvModal .gcv-foot {
  color: var(--kh-ink-soft);
  background: var(--kh-bg);
  border-top: 1px solid rgba(94, 58, 34, .12);
}

/* ── 좁은 화면 ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  .kl-kongi { width: 124px; }
  #screenLoading .load-logo { font-size: 2.5rem; }
  #screenRecipe .rc-card-kr { font-size: 1.35rem; }
  #screenRecipe .review-title { font-size: 1.4rem; }
}