@charset "utf-8";
/* 활용 가이드 — 가운데 제목 + 넓은 사진, 사진·글 교차 두 장, 잉크 바탕 온도 카드, 보관 노트. 색은 --hn-* 토큰. */
.hn-usage em { font-style: normal; color: var(--hn-caramel); word-break: keep-all; }
.hn-usage img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ---------- 도입: 가운데 정렬 제목·설명 ---------- */
.hn-usage .ug-intro { padding: 120px var(--ab-gutter) 128px; text-align: center; }
.hn-usage .ug-intro-head { max-width: 880px; margin: 0 auto; }
.hn-usage .ug-title { margin-top: 8px; font-family: var(--hn-serif); font-size: clamp(40px, 4.2vw, 60px); line-height: 1.2; font-weight: 600; letter-spacing: -.05em; color: var(--hn-ink); }
.hn-usage .ug-intro-desc { margin-top: 32px; font-size: 18px; line-height: 1.8; color: var(--hn-ink-700); }

/* ---------- 쓰임 사전: 왼쪽 큰 요리 이름, 오른쪽 둥근 사진 카드 ---------- */
.hn-usage .ug-dict { background: var(--hn-paper); }
.hn-usage .ug-dict-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(56px, 7vw, 120px); align-items: start; max-width: 1440px; margin: 0 auto; }
.hn-usage .ug-dict-head .ab-h2 { margin-top: 8px; }
.hn-usage .ug-dict-items { margin-top: 56px; border-top: 1px solid var(--hn-ink); }
.hn-usage .ug-dict-items li { border-bottom: 1px solid var(--hn-ink-200); }
.hn-usage .ug-dict-btn { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; width: 100%; padding: 22px 0; font: inherit; text-align: left; color: var(--hn-ink-300); background: none; border: 0; cursor: pointer; transition: color .4s var(--hn-ease), padding .4s var(--hn-ease); }
.hn-usage .ug-dict-no { font: italic 500 18px/1 "Lora", serif; color: inherit; }
.hn-usage .ug-dict-name { font-family: var(--hn-serif); font-size: clamp(30px, 3vw, 44px); line-height: 1.2; font-weight: 600; letter-spacing: -.045em; }
.hn-usage .ug-dict-temp { font: italic 500 17px/1 "Lora", serif; }
.hn-usage .ug-dict-btn:hover, .hn-usage .ug-dict-btn:focus-visible { color: var(--hn-ink-700); outline: 0; }
.hn-usage .ug-dict-btn.is-on { padding-left: 12px; color: var(--hn-ink); }
.hn-usage .ug-dict-btn.is-on .ug-dict-no, .hn-usage .ug-dict-btn.is-on .ug-dict-temp { color: var(--hn-caramel); }
.hn-usage .ug-dict-card { overflow: hidden; position: sticky; top: calc(var(--hn-hd-h, 88px) + 32px); }
.hn-usage .ug-dict-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hn-ink-100); }
/* 사진 아래쪽을 어둡게 깔고 그 위에 설명을 얹는다 */
.hn-usage .ug-dict-photo::after { content: ""; position: absolute; inset: 45% 0 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(57, 42, 31, .82)); pointer-events: none; }
.hn-usage .ug-dict-photo img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--hn-ease), transform 1.2s var(--hn-ease); }
.hn-usage .ug-dict-photo img.is-on { opacity: 1; transform: none; }
.hn-usage .ug-dict-card figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 36px 36px; }
.hn-usage .ug-dict-cap { position: absolute; left: 36px; right: 36px; bottom: 36px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--hn-ease), transform .5s var(--hn-ease); pointer-events: none; }
.hn-usage .ug-dict-cap.is-on { position: relative; left: auto; right: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; }
.hn-usage .ug-dict-cap b { font-family: var(--hn-serif); font-size: 24px; color: var(--hn-paper); font-weight: 600; letter-spacing: -.035em; }
.hn-usage .ug-dict-cap p { margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--hn-linen); }
.hn-usage .ug-link { display: inline-flex; align-items: center; gap: 32px; min-height: 48px; margin-top: 28px; border-bottom: 1px solid currentColor; font-weight: 600; }
.hn-usage .ug-link span { transition: transform .4s var(--hn-ease); }
.hn-usage .ug-link:hover span { transform: translateX(6px); }
/* ---------- 온도: 잉크 바탕, 여섯 장의 온도 카드 ---------- */
.hn-usage .ug-temperature { background: var(--hn-ink); color: var(--hn-paper); }
.hn-usage .ug-temp-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; max-width: 1440px; margin: 0 auto; }
.hn-usage .ug-temperature .ab-h2 { margin-top: 8px; color: var(--hn-paper); }
.hn-usage .ug-temperature em { color: var(--hn-amber); }
.hn-usage .ug-temperature .ab-deco { color: var(--hn-amber); }
.hn-usage .ug-temp-heading > p { justify-self: end; max-width: 30em; font-size: 17px; line-height: 1.8; color: var(--hn-ink-100); }
.hn-usage .ug-temp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1440px; margin: 72px auto 0; border-top: 1px solid rgba(246, 242, 236, .24); }
.hn-usage .ug-temp-cards li { padding: 36px 40px 40px 0; border-bottom: 1px solid rgba(246, 242, 236, .24); }
.hn-usage .ug-temp-cards li:not(:nth-child(3n+1)) { padding-left: 40px; border-left: 1px solid rgba(246, 242, 236, .24); }
.hn-usage .ug-temp-cards li:nth-child(3n) { padding-right: 0; } /* 오른쪽 끝 칸은 표 끝선에 맞춘다 */
.hn-usage .ug-temp-name { font-size: 17px; font-weight: 600; color: var(--hn-paper); }
.hn-usage .ug-temp-value { display: block; margin-top: 14px; font: italic 500 clamp(40px, 3.6vw, 52px)/1 "Lora", serif; letter-spacing: -.01em; color: var(--hn-amber); }
.hn-usage .ug-temp-value i { margin: 0 .08em; font-style: normal; color: rgba(179, 151, 127, .6); }
.hn-usage .ug-temp-value small { margin-left: 4px; font-size: .45em; font-style: normal; color: var(--hn-ink-100); }
.hn-usage .ug-temp-scale { position: relative; display: block; height: 4px; margin-top: 28px; border-radius: 2px; background: #5b4e44; }
.hn-usage .ug-temp-scale > span { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--hn-amber); transform-origin: left; }
.hn-usage .ug-temp-axis { display: flex; justify-content: space-between; margin-top: 10px; font: italic 13px/1 "Lora", serif; color: var(--hn-ink-300); }
.hn-usage .ug-temp-more { display: flex; justify-content: flex-end; max-width: 1440px; margin: 40px auto 0; }
.hn-usage .ug-temp-more .ug-link { margin-top: 0; }
.fl-reveal-on .hn-usage .ug-temp-cards[data-fl-reveal]:not(.is-in) { opacity: 1; transform: none; }
.fl-reveal-on .hn-usage .ug-temp-cards li { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--hn-ease) calc(var(--d) * .1s), transform .8s var(--hn-ease) calc(var(--d) * .1s); }
.fl-reveal-on .hn-usage .ug-temp-cards.is-in li { opacity: 1; transform: none; }
.fl-reveal-on .hn-usage .ug-temp-scale > span { transform: scaleX(0); transition: transform 1.1s var(--hn-ease) calc(.4s + var(--d) * .1s); }
.fl-reveal-on .hn-usage .ug-temp-cards.is-in .ug-temp-scale > span { transform: none; }
.hn-usage .ug-storage { display: grid; grid-template-columns: 4fr 7fr; gap: 96px; background: var(--hn-paper); align-items: start; }
.hn-usage .ug-storage .ab-h2 { margin-top: 20px; }
.hn-usage .ug-tips { border-top: 1px solid var(--hn-ink); }
.hn-usage .ug-tips li { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--hn-ink-200); }
.hn-usage .ug-tips li > span { font: italic 24px/1.4 "Lora", serif; color: var(--hn-caramel); }
.hn-usage .ug-tips h4 { font-size: 22px; }
.hn-usage .ug-tips p { margin-top: 12px; line-height: 1.85; color: var(--hn-ink-700); }
.hn-usage .ug-spread { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; gap: 96px; }
.hn-usage .ug-spread figure { aspect-ratio: 1; }
.hn-usage .ug-spread .ab-h2 { margin-top: 20px; }
.hn-usage .ug-spread p:not(.ab-deco) { margin-top: 28px; max-width: 32em; font-size: 17px; line-height: 1.85; }
@media (max-width: 1024px) {
 .hn-usage .ug-intro { padding-top: 96px; padding-bottom: 104px; }
 .hn-usage .ug-dict-in { grid-template-columns: 1fr; gap: 40px; }
 .hn-usage .ug-dict-list { display: contents; }
 .hn-usage .ug-dict-head { order: -2; }
 .hn-usage .ug-dict-card { position: relative; top: 0; order: -1; max-width: 520px; }
 .hn-usage .ug-dict-items { margin-top: 0; }
 .hn-usage .ug-temp-heading { grid-template-columns: 1fr; gap: 24px; }
 .hn-usage .ug-temp-heading > p { justify-self: start; }
 .hn-usage .ug-temp-cards { grid-template-columns: 1fr 1fr; }
 .hn-usage .ug-temp-cards li, .hn-usage .ug-temp-cards li:not(:nth-child(3n+1)) { padding: 32px 32px 36px 0; border-left: 0; }
 .hn-usage .ug-temp-cards li:nth-child(even) { padding-right: 0; padding-left: 32px; border-left: 1px solid rgba(246, 242, 236, .24); }
      .hn-usage .ug-spread { gap: 40px; }
}
@media (max-width: 767px) {
 .hn-usage .ug-intro { padding-top: 72px; padding-bottom: 80px; }
 .hn-usage .ug-dict-btn { grid-template-columns: 40px 1fr auto; padding: 18px 0; }
 .hn-usage .ug-dict-name { font-size: 24px; }
 .hn-usage .ug-dict-temp { font-size: 14px; }
 .hn-usage .ug-dict-card figcaption { padding: 0 20px 22px; }
 .hn-usage .ug-dict-cap { left: 20px; right: 20px; bottom: 22px; }
 .hn-usage .ug-dict-cap b { font-size: 20px; }
 .hn-usage .ug-dict-cap p { font-size: 14px; }
 .hn-usage .ug-title { font-size: 34px; }
 .hn-usage .ug-intro-desc { font-size: 15px; }
 .hn-usage .ug-temp-cards { grid-template-columns: 1fr; margin-top: 48px; }
 .hn-usage .ug-temp-cards li, .hn-usage .ug-temp-cards li:nth-child(n) { padding: 28px 0; border-left: 0; }
 .hn-usage .ug-temp-value { font-size: 40px; }
       .hn-usage .ug-tips li { grid-template-columns: 32px 1fr; gap: 16px; }
 .hn-usage .ug-tips h4 { font-size: 20px; }
 .hn-usage .ug-spread { grid-template-columns: 1fr; gap: 40px; }
 .hn-usage .ug-spread figure { width: min(100%, 400px); }
 .hn-usage .ug-spread p:not(.ab-deco) { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
 .hn-usage *, .hn-usage *::before, .hn-usage *::after { animation: none !important; transition: none !important; }
 }