:root {
  font-family: system-ui, -apple-system, "Malgun Gothic", sans-serif;
  color: #173e31;
  background: #f4efe4;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #e97642; outline-offset: 3px;
}
.shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.header, .footer { display:flex; justify-content:space-between; align-items:center; gap:18px; padding-block:20px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:850; text-decoration:none; white-space:nowrap; }
.brand span { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#184936; color:#e5eeaa; font-size:25px; }
nav { display:flex; flex-wrap:wrap; gap:18px; font-size:.87rem; }
.skip { position:fixed; top:8px; left:8px; background:white; padding:10px; transform:translateY(-200%); z-index:3; }
.skip:focus { transform:none; }
.hero { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:30px; border-radius:25px; padding:clamp(28px,5vw,62px); background:#e4e9c6; overflow:hidden; }
.eyebrow { font-size:.72rem; letter-spacing:.14em; font-weight:850; color:#597a42; margin:0; }
h1 { font-size:clamp(2.6rem,6.7vw,5.25rem); line-height:1.05; letter-spacing:-.075em; margin:18px 0; }
h1 em { color:#48734b; font-style:normal; }
.lead { color:#435c46; line-height:1.7; margin-bottom:25px; }
.hero-link { display:inline-flex; gap:35px; align-items:center; padding:12px 17px; background:#174b36; color:white; border-radius:9px; font-weight:800; text-decoration:none; }
.art { min-height:230px; position:relative; }
.tag { position:absolute; width:170px; height:205px; border-radius:15px; padding:18px; box-shadow:0 17px 38px #274b3527; display:flex; flex-direction:column; }
.tag span { font-size:.65rem; font-weight:900; letter-spacing:.12em; }
.tag b { margin-top:25px; font-size:2rem; letter-spacing:-.05em; }.tag small { margin-top:5px; font-size:.9rem; }
.tag-back { background:#f9bb81; right:36%; transform:rotate(-12deg); }.tag-front { background:#fffdf4; right:9%; top:10px; transform:rotate(10deg); }
.barcode { margin-top:auto; height:32px; background:repeating-linear-gradient(90deg,#183e31 0 2px,transparent 2px 5px,#183e31 5px 6px,transparent 6px 8px); }
.spark { position:absolute; right:0; top:0; font-size:3rem; color:#ef8546; }
.ribbon { display:flex; flex-wrap:wrap; gap:10px; padding:18px 0; }
.ribbon span,.live { border-radius:999px; padding:6px 12px; background:#e5ead5; font-size:.76rem; font-weight:750; }
.compare,.results { border-radius:20px; padding:clamp(18px,3vw,30px); }
.compare { background:#fffdf8; border:1px solid #dddaca; }
.section-heading,.result-head { display:flex; align-items:start; justify-content:space-between; gap:15px; }
h2 { font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.055em; margin:7px 0 10px; }.section-heading p:last-child { color:#67766b; line-height:1.5; }
.secondary,.quiet,.remove { border:1px solid #b5c6ab; border-radius:9px; padding:9px 12px; background:white; color:#255540; font-weight:750; }
.quiet,.remove { border:0; background:transparent; text-decoration:underline; }.remove { font-size:.8rem; }
.products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:15px; }
.product { border:1px solid #e1e2d5; background:#fafaf2; border-radius:14px; padding:16px; min-width:0; }
.card-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e5e6d9; padding-bottom:8px; margin-bottom:10px; }.card-head b { font-size:.86rem; letter-spacing:.04em; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.field { display:block; min-width:0; }.wide { grid-column:1/-1; }
.field span { display:block; color:#526a59; font-weight:700; font-size:.77rem; margin:6px 0; }
.field input,.field select { width:100%; min-width:0; border:1px solid #ccd4c6; border-radius:8px; background:white; color:#173e31; padding:10px 8px; }
.field-hint { font-size:.73rem; color:#66786a; margin:10px 0 0; }.form-bottom { display:flex; justify-content:space-between; gap:8px; margin-top:16px; }
.results { margin-top:15px; background:#183f31; color:#fffdf5; }.light { color:#bdd8aa; }.live { background:#395f4d; color:#d9eaba; }
.result-group { border-top:1px solid #ffffff35; margin-top:16px; padding-top:2px; }.result-group h3 { font-size:1rem; }.ranking { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.rank { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:11px 13px; background:#ffffff10; border-radius:10px; }.rank strong { overflow-wrap:anywhere; }.rank small { grid-column:1/-1; color:#c9d8c9; }
.rank-badge { display:inline-block; color:#d3e5b8; font-size:.72rem; border:1px solid #8aa98c; padding:3px 7px; border-radius:5px; margin-right:9px; }.best { background:#e2eda6; border-color:#e2eda6; color:#1c5138; }.unit-price { font-size:1.18rem; white-space:nowrap; }
.errors { border:1px solid #f3bd9c; background:#fff0e6; color:#693016; padding:12px 14px; border-radius:10px; }.errors ul { padding-left:19px; margin:6px 0 0; }.result-note { color:#cfdbcf; font-size:.8rem; line-height:1.5; }
.education { display:grid; grid-template-columns:1fr 1fr; gap:35px; margin-block:55px; }.education p,.education li,.faq p,.article p,.article li { line-height:1.75; color:#506558; }.education ol { list-style:none; counter-reset:steps; padding:0; margin:0; }.education li { border-bottom:1px solid #d4d8c9; padding:13px 0; }.education li b { display:block; color:#183f31; margin-bottom:3px; }
.faq { max-width:850px; margin:0 auto 60px; }.faq details { border-bottom:1px solid #cdd5c5; padding:15px 0; }.faq summary { cursor:pointer; font-weight:750; }.faq p { margin-bottom:3px; }
.article { background:#fffdf8; max-width:850px; margin:20px auto 40px; border:1px solid #dddaca; border-radius:20px; padding:clamp(20px,5vw,50px); }.article h1 { font-size:clamp(2rem,5vw,3.5rem); }.article h2 { margin-top:30px; font-size:1.35rem; }
.footer { border-top:1px solid #ccd5c4; color:#5d7260; font-size:.85rem; }.footer small { font-size:.8rem; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:800px) { .products { grid-template-columns:repeat(2,minmax(0,1fr)); }.hero { grid-template-columns:1fr .55fr; }.tag { width:130px; height:170px; }.tag-back { right:40%; }.tag b { font-size:1.5rem; } }
@media (max-width:560px) { .shell { width:calc(100% - 24px); }.header { align-items:flex-start; }.header nav { justify-content:flex-end; gap:9px; font-size:.75rem; }.hero { grid-template-columns:1fr; padding:28px 22px; }.hero h1 { font-size:clamp(2.5rem,10.5vw,3.8rem); }.art { display:none; }.products,.education { grid-template-columns:1fr; }.education { gap:10px; margin-block:40px; }.section-heading { flex-wrap:wrap; }.rank { grid-template-columns:minmax(0,1fr) auto; }.footer { align-items:start; } }