:root { color-scheme: light; --ink:#29231d; --muted:#746b61; --cream:#f7f0e5; --paper:#fffdf8; --orange:#b94f2d; --orange-dark:#8f351c; --line:#ded0bd; --green:#3f674e; font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(90deg,#6b43230a 1px,transparent 1px),linear-gradient(#6b432308 1px,transparent 1px),radial-gradient(circle at 10% 0%,#efd7b4 0,transparent 34rem),#f7f0e5; background-size:32px 32px,32px 32px,auto; }
button,select,textarea { font:inherit; }
button { cursor:pointer; }
h1,h2,h3,h4,button,.catalog-copy strong,.recipe-card h3 { word-break:keep-all; overflow-wrap:normal; }
.shell { width:min(1180px,calc(100% - 28px)); margin:0 auto; padding:28px 0 80px; }
.site-brand { display:flex; align-items:baseline; gap:14px; width:max-content; max-width:100%; color:var(--ink); text-decoration:none; }
.site-brand strong { color:var(--orange-dark); font:900 1.32rem Georgia,"Noto Serif KR",serif; letter-spacing:.035em; white-space:nowrap; }
.site-brand span { color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.035em; word-break:keep-all; }
.hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); align-items:center; gap:42px; padding:32px 10px 44px; }
.hero h1 { margin:8px 0 18px; font-family:Georgia,"Noto Serif KR",serif; font-size:clamp(2rem,5vw,3.8rem); line-height:1.08; letter-spacing:-.055em; word-break:keep-all; overflow-wrap:normal; }
.hero p:not(.eyebrow) { max-width:580px; color:var(--muted); font-size:1.06rem; }
.hero-tools { position:relative; display:grid; justify-items:end; gap:14px; }
.language-switch { display:flex; padding:4px; border:1px solid var(--line); border-radius:999px; background:#fffaf3cc; }
.language { min-width:54px; padding:8px 12px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-size:.78rem; font-weight:900; letter-spacing:.06em; }
.language.active { background:var(--ink); color:white; box-shadow:0 5px 14px #27221d30; }
.eyebrow { margin:0; color:var(--orange-dark); font-size:.78rem; font-weight:900; letter-spacing:.18em; }
.hero-photo { width:100%; margin:0; overflow:hidden; border:10px solid #fffaf0; border-radius:40% 8% 38% 10%; box-shadow:0 30px 70px #59351d35; transform:rotate(1deg); }
.hero-photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.card { padding:28px; border:1px solid #ffffffcc; border-radius:28px; background:rgba(255,253,248,.94); box-shadow:0 18px 55px #6d3a1720; backdrop-filter:blur(12px); }
.input-card { max-width:760px; margin:0 auto; }
.section-head,.section-head>div,.result-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-head h2,.result-intro h2 { margin:0; }
.step,.rank { width:38px; height:38px; display:inline-grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--ink); color:white; font-weight:900; }
label { display:block; color:var(--muted); font-size:.88rem; font-weight:700; }
textarea,select { width:100%; margin-top:7px; border:1px solid var(--line); border-radius:14px; background:#fffdfa; color:var(--ink); outline:none; }
textarea { resize:vertical; min-height:104px; padding:15px; margin-top:10px; font-size:1.05rem; }
textarea:focus,select:focus { border-color:var(--orange); box-shadow:0 0 0 3px #e9682f20; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.fields select,.priority-row select { padding:12px; }
.primary,.choose { width:100%; padding:15px 18px; border:0; border-radius:15px; color:#fff; background:var(--orange); font-weight:900; box-shadow:0 10px 22px #e9682f35; }
.catalog-button { width:100%; margin-top:11px; padding:14px 18px; border:1px solid var(--ink); border-radius:15px; background:transparent; color:var(--ink); font-weight:900; }
.primary:hover,.choose:hover { background:var(--orange-dark); }
.primary:disabled { opacity:.58; cursor:wait; }
.ghost,.close,.cuisine-chip { border:1px solid var(--line); border-radius:12px; background:#fffaf3; color:var(--ink); padding:10px 13px; font-weight:800; }
.full { width:100%; margin-top:10px; }
.error { min-height:1.3em; margin:10px 0 0; color:#a12a20; font-weight:700; }
.results { margin-top:36px; scroll-margin-top:20px; }
.result-intro { justify-content:flex-start; max-width:760px; margin:0 auto 16px; }
.result-intro p { margin:5px 0 0; color:var(--muted); }
.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.recipe-card { position:relative; min-height:420px; display:flex; flex-direction:column; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--paper); box-shadow:0 16px 38px #6d3a1720; transition:transform .2s ease,box-shadow .2s ease; }
.recipe-card:hover { transform:translateY(-4px); box-shadow:0 22px 50px #6d3a1730; }
.recipe-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; }
.recipe-card-body { position:relative; display:flex; flex:1; flex-direction:column; padding:22px; }
.recipe-card .rank { position:absolute; top:-21px; right:18px; border:4px solid var(--paper); background:var(--orange); }
.cuisine { margin:0 42px 20px 0; color:var(--green); font-size:.8rem; font-weight:900; }
.recipe-card h3 { margin:0 0 10px; font-family:Georgia,"Noto Serif KR",serif; font-size:1.55rem; }
.recipe-card>p:not(.cuisine) { color:var(--muted); line-height:1.55; }
.meta { display:grid; gap:6px; margin:auto 0 18px; color:#5e554d; font-size:.84rem; }
.choose { padding:12px; box-shadow:none; }
.more-actions { display:flex; justify-content:center; gap:10px; margin-top:16px; }
.recipe-page { width:100%; margin-top:22px; }
.selected { position:relative; width:100%; margin:0; padding:0; overflow:hidden; border-color:#dfd0bb; background:#fffdf8; box-shadow:0 24px 70px #6d3a1730; }
.recipe-back-button { position:static; display:inline-flex; width:auto; margin:14px; padding:11px 16px; border:1px solid var(--line); border-radius:10px; background:#fffaf3; color:var(--ink); text-align:left; font-weight:900; box-shadow:0 5px 14px #6d3a1718; }
.recipe-back-button:hover { background:#f4eadb; color:var(--orange-dark); }
body.recipe-page-open .hero,body.recipe-page-open .input-card,body.recipe-page-open #results,body.recipe-page-open .footer { display:none; }
.recipe-cover { display:grid; grid-template-columns:minmax(340px,1.1fr) minmax(300px,.9fr); align-items:stretch; background:#28231e; color:white; }
.recipe-cover>img { width:100%; height:100%; min-height:380px; object-fit:cover; }
.recipe-cover-copy { display:flex; flex-direction:column; justify-content:center; padding:42px; }
.recipe-cover-copy h2 { margin:8px 0 14px; font-family:Georgia,"Noto Serif KR",serif; font-size:clamp(2.3rem,5vw,4.4rem); line-height:1; }
.recipe-cover-copy>p:not(.eyebrow) { color:#eadfce; line-height:1.65; }
.serving-badge { align-self:flex-start; margin-top:12px; padding:9px 13px; border:1px solid #ffffff55; border-radius:999px; font-weight:900; }
.availability { margin:0; padding:18px 34px; border-bottom:1px solid var(--line); background:#f4eadb; color:#62442e; font-weight:800; }
.cookbook-grid { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:46px; padding:42px; }
.cookbook-grid h3 { margin:0 0 20px; font-family:Georgia,"Noto Serif KR",serif; font-size:1.8rem; }
.ingredient-measures { margin:0 0 28px; padding:0; list-style:none; border-top:2px solid var(--ink); }
.ingredient-measures li { display:flex; justify-content:space-between; gap:16px; padding:11px 2px; border-bottom:1px solid var(--line); }
.ingredient-measures strong { white-space:nowrap; color:var(--orange-dark); }
.directions ol { margin:0 0 24px; padding:0; list-style:none; counter-reset:cookstep; }
.directions ol[start="4"] { counter-reset:cookstep 3; }
.directions li { position:relative; min-height:52px; padding:0 0 24px 58px; line-height:1.72; counter-increment:cookstep; }
.directions li::before { content:counter(cookstep); position:absolute; left:0; top:0; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--orange); color:white; font-family:Georgia,serif; font-weight:900; }
.step-photo { margin:8px 0 30px; overflow:hidden; border-radius:20px; background:#eee2d2; }
.step-photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.step-photo figcaption { padding:11px 14px; color:var(--muted); font-size:.82rem; font-weight:800; text-align:center; }
.selected .primary { max-width:240px; margin-top:8px; background:var(--green); }
.hidden { display:none; }
dialog { width:min(540px,calc(100% - 24px)); max-height:90vh; padding:0; border:0; border-radius:26px; background:transparent; }
dialog::backdrop { background:#24160eb3; backdrop-filter:blur(4px); }
.settings-card { padding:24px; border-radius:26px; background:#fffaf3; }
.settings-card>p { color:var(--muted); line-height:1.55; }
.close { width:40px; height:40px; padding:0; font-size:1.5rem; }
.priority-list { display:grid; gap:8px; margin:18px 0; }
.priority-row { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:10px; padding:5px 8px; border-radius:13px; background:white; }
.priority-row strong { color:var(--orange-dark); }
.priority-row select { margin:0; }
.cuisine-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }
.cuisine-chip { text-align:left; padding:14px; }
.catalog-heading { margin:0 0 22px; text-align:center; }
.catalog-heading h2 { margin:7px 0 8px; font-family:Georgia,"Noto Serif KR",serif; font-size:clamp(2rem,5vw,3.8rem); }
.catalog-heading>p:last-child { color:var(--muted); }
.catalog-controls { display:grid; grid-template-columns:1fr minmax(180px,.32fr); gap:12px; margin:0 auto 32px; }
.catalog-controls input,.catalog-controls select { margin:0; padding:14px 16px; }
.catalog-country { margin:0 0 40px; }
.country-heading { display:flex; align-items:end; justify-content:space-between; margin:0 0 14px; padding:0 4px 10px; border-bottom:2px solid var(--ink); }
.country-heading h3 { margin:0; font:700 1.7rem Georgia,"Noto Serif KR",serif; }
.country-heading span { color:var(--muted); font-size:.82rem; font-weight:900; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.catalog-entry { position:relative; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--paper); color:var(--ink); text-align:left; box-shadow:0 12px 30px #6d3a1718; }
.catalog-entry img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.catalog-number { position:absolute; top:12px; left:12px; z-index:1; padding:7px 9px; border-radius:9px; background:#28231ed9; color:white; font:900 .8rem Georgia,serif; }
.catalog-copy { display:grid; gap:7px; padding:17px; }
.catalog-copy small { color:var(--green); font-weight:900; }
.catalog-copy strong { font:700 1.35rem Georgia,"Noto Serif KR",serif; }
.catalog-copy em { color:var(--orange-dark); font-size:.82rem; font-style:normal; font-weight:900; }
.footer { display:flex; justify-content:center; gap:10px; margin-top:44px; color:var(--muted); font-size:.82rem; }
.footer a,.legal a { color:var(--orange-dark); }
.legal { width:min(760px,calc(100% - 32px)); margin:42px auto; padding:36px; border-radius:24px; background:#fffdf8; box-shadow:0 18px 55px #6d3a1720; line-height:1.75; }
.legal h1,.legal h2 { font-family:Georgia,"Noto Serif KR",serif; }
@media (max-width:760px) { .shell{width:min(100% - 20px,640px);padding-top:12px}.hero{grid-template-columns:1fr;padding:24px 6px 28px;gap:20px}.hero-tools{gap:10px}.hero-photo{border-width:6px;border-radius:26% 6% 24% 8%}.language{min-width:44px;padding:7px 8px}.recipe-grid,.catalog-grid{grid-template-columns:1fr}.catalog-controls{grid-template-columns:1fr}.recipe-card{min-height:0}.section-head{align-items:flex-start}.more-actions{flex-direction:column}.more-actions button{width:100%}.recipe-page{margin-top:12px}.selected{border-radius:20px}.recipe-back-button{margin:11px;padding:10px 13px}.recipe-cover{grid-template-columns:1fr}.recipe-cover>img{min-height:0;aspect-ratio:4/3}.recipe-cover-copy{padding:28px}.cookbook-grid{grid-template-columns:1fr;padding:28px 22px;gap:30px}.availability{padding:16px 22px}.directions li{padding-left:50px}.fields{grid-template-columns:1fr 1fr} }
@media (max-width:480px) { .shell{width:calc(100% - 16px)}.hero{padding:18px 4px 22px}.hero h1{font-size:clamp(1.85rem,10.5vw,2.65rem);line-height:1.12;letter-spacing:-.065em}.hero p:not(.eyebrow){font-size:.96rem;line-height:1.55}.card{padding:20px 16px;border-radius:22px}.section-head,.section-head>div,.result-intro{min-width:0}.section-head h2,.result-intro h2{font-size:1.25rem;line-height:1.3}.primary,.secondary,.ghost{padding-left:14px;padding-right:14px}.catalog-card{grid-template-columns:104px minmax(0,1fr)}.catalog-copy{min-width:0;padding:13px 12px}.catalog-copy strong{font-size:.98rem;line-height:1.3}.recipe-card h3{font-size:1.18rem;line-height:1.32}.recipe-cover-copy{padding:22px 17px}.recipe-cover-copy h2{font-size:1.75rem;line-height:1.2}.cookbook-grid{padding:24px 16px}.ingredient-measures li{gap:8px}.ingredient-measures strong{white-space:normal;text-align:right}.directions li{padding-left:46px}.fields{grid-template-columns:1fr}.language-switch{max-width:100%} }
@media (max-width:360px) { .hero h1{font-size:1.8rem}.hero-photo{border-width:4px}.card{padding:18px 13px}.catalog-card{grid-template-columns:88px minmax(0,1fr)}.catalog-copy{padding:11px 10px}.catalog-copy strong{font-size:.9rem}.recipe-cover-copy h2{font-size:1.55rem}.cookbook-grid{padding:20px 13px}.step,.rank{width:34px;height:34px}.section-head{gap:8px} }
@media (max-width:480px) { .site-brand{display:grid;gap:2px}.site-brand strong{font-size:1.18rem}.site-brand span{font-size:.7rem} }