@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-700.woff2) format("woff2")}

:root{
  color-scheme:light;
  --paper:#ffffff;
  --panel:#e8f0ec;
  --green:#1d5c4b;
  --deep:#154536;
  --line:#c5d8cf;
  --on-green:#f3f8f5;
  --display:"Barlow Condensed","Pretendard Variable",Pretendard,sans-serif;
  --text:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scrollbar-color:var(--line) var(--paper);
  accent-color:var(--green);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--green);
  font-family:var(--text);
  font-size:1rem;
  font-weight:500;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}
::selection{background:var(--green);color:var(--on-green)}
img,svg{display:block}
h1,h2,h3{margin:0;font-weight:inherit;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{
  color:inherit;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.24em;
  text-decoration-color:var(--line);
  transition:text-decoration-color .2s ease,background-color .2s ease;
}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

/* 공통 활자 */
.display{
  display:block;
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1em;
  line-height:.94;
  letter-spacing:-.005em;
}
h1{font-size:clamp(3rem,7.2vw,6rem);line-height:1}
h2{font-size:clamp(2.5rem,5.6vw,4.75rem);line-height:1}
.kline{
  display:block;
  margin-top:clamp(16px,2vw,24px);
  font-size:clamp(1.1875rem,2vw,1.5rem);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.02em;
}
.copy{margin:20px auto 0;max-width:34em;color:var(--green)}
.label{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:1.375rem;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.note{margin-top:20px;font-size:.8125rem;color:var(--green)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 30px;margin-top:36px;
  border-radius:999px;background:var(--green);color:var(--on-green);
  font-weight:600;text-decoration:none;
}
.btn:hover{background:var(--deep)}
.nocase{text-transform:none}
.nw{white-space:nowrap}
@media (max-width:600px){.br-wide{display:none}}

/* 상단 */
.site-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:14px var(--gutter);
}
.nav-l,.nav-r{
  display:flex;align-items:center;gap:24px;
  font-family:var(--display);font-weight:600;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.01em;
}
.nav-r{justify-content:flex-end}
.site-head a{text-decoration:none}
.site-head .nav-l a:hover,.site-head .nav-r a:not(.lang):hover{text-decoration:underline;text-decoration-color:currentColor}
.home{line-height:0}
.logo{width:76px;height:auto;fill:var(--green)}
.lang{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  border:1.5px solid var(--green);border-radius:999px;
}
.lang:hover{background:var(--green);color:var(--on-green)}
@media (max-width:760px){
  .site-head{grid-template-columns:1fr auto}
  .nav-l{display:none}
  .logo{width:60px}
}

/* 섹션 */
.intro{padding:clamp(48px,8vw,104px) var(--gutter) clamp(56px,8vw,96px);text-align:center}
.section{padding:clamp(80px,12vw,152px) var(--gutter);text-align:center}
.section.flush{padding-top:0}

/* 전면 사진 */
.bleed{margin:0}
.bleed img{width:100%;height:clamp(300px,52vw,760px);object-fit:cover}
.bleed figcaption{padding:14px var(--gutter) 0;font-size:.8125rem;color:var(--green);text-align:center}

/* 세 가지 설계 */
.values{
  list-style:none;margin:0 auto;max-width:1120px;
  padding:clamp(72px,10vw,120px) var(--gutter) 0;
  display:grid;gap:48px;text-align:center;
}
@media (min-width:760px){.values{grid-template-columns:repeat(3,1fr);gap:32px}}
.values svg{width:44px;height:44px;margin:18px auto 0;fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.values p{margin-top:16px;font-size:.9375rem;line-height:1.7;color:var(--green)}

/* 사진 + 패널 짝 */
.pair{display:grid}
@media (min-width:760px){.pair{grid-template-columns:1fr 1fr}}
.pair > *{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden}
.pair img{width:100%;height:100%;object-fit:cover}
.pair-panel{background:var(--panel);display:grid;place-items:center}
.bottle{width:min(38%,240px);height:auto}
figure.pair-panel{grid-template-rows:1fr auto;padding:clamp(24px,4vw,48px) 24px clamp(28px,4vw,48px)}
.pair-panel figcaption{text-align:center}
.pair-panel figcaption .label{font-size:clamp(1.375rem,2.2vw,1.75rem)}
.pair-panel figcaption .sub{display:block;margin-top:6px;font-weight:600}
.pair-panel small{display:block;margin-top:10px;font-size:.75rem;color:var(--green)}
.pair-text{align-content:center;padding:clamp(56px,7vw,96px) clamp(24px,5vw,72px);text-align:center}
@media (max-width:759px){.pair-text{aspect-ratio:auto}}
.pair-text h3{margin-top:36px}
.list{list-style:none;margin:14px auto 0;padding:0;max-width:30em;text-align:left;border-top:1px solid var(--line)}
.list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.6}

/* 경도 눈금 */
.scale{max-width:640px;margin:56px auto 0;text-align:left}
.scale-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:3px}
.c1{grid-column:1}.c2{grid-column:2}.c3{grid-column:3}.c4{grid-column:4}
.mark{grid-row:1;position:relative;padding-bottom:16px;font-size:.8125rem;font-weight:700;line-height:1.45}
.mark small{display:block;font-size:.75rem;font-weight:400;color:var(--green)}
.mark-soft::after{content:"";position:absolute;left:14px;bottom:2px;height:10px;border-left:1.5px solid var(--green)}
.mark-hard{grid-column:3 / 5;text-align:center}
.mark-hard::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;border:1.5px solid var(--green);border-bottom:0}
.seg{grid-row:2;height:14px;transform-origin:left center}
.seg.c1{background:#d4e6de;border-radius:7px 0 0 7px}
.seg.c2{background:#a9cbbd}
.seg.c3{background:#6ea28e}
.seg.c4{background:var(--green);border-radius:0 7px 7px 0}
.band{grid-row:3;padding-top:10px;font-size:.8125rem;font-weight:700;line-height:1.45}
.band small{display:block;font-size:.75rem;font-weight:400;color:var(--green);font-variant-numeric:tabular-nums}
.scale figcaption{margin-top:16px;font-size:.75rem;color:var(--green)}
@supports (animation-timeline:view()){
  .seg{animation:fill linear both;animation-timeline:view()}
  .seg.c1{animation-range:entry 20% cover 30%}
  .seg.c2{animation-range:entry 40% cover 35%}
  .seg.c3{animation-range:entry 60% cover 40%}
  .seg.c4{animation-range:entry 80% cover 45%}
  @keyframes fill{from{transform:scaleX(0)}}
}

/* 표기 */
.claims{
  list-style:none;margin:32px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;
  font-size:.875rem;font-weight:600;
}
.claims li{display:flex;align-items:center;gap:8px}
.claims li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
.rows{max-width:720px;margin:48px auto 0;text-align:left;border-top:1.5px solid var(--green)}
.rows > div{display:grid;gap:2px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){.rows > div{grid-template-columns:11em 1fr}}
.rows dt{font-weight:700}
.rows dd{margin:0;color:var(--green);font-variant-numeric:tabular-nums}
cite{display:block;margin:28px auto 0;max-width:46em;font-style:normal;font-size:.8125rem;line-height:1.65;color:var(--green)}

/* 하단 */
.site-foot{padding:clamp(24px,5vw,56px) var(--gutter) 28px}
.foot-box{
  display:grid;gap:32px;
  padding:clamp(28px,4vw,48px);
  border:1.5px solid var(--green);border-radius:24px;
}
@media (min-width:900px){.foot-box{grid-template-columns:1.5fr 1fr 1fr 2fr;align-items:start}}
.foot-brand .logo{width:min(200px,56%);margin-bottom:18px}
.foot-brand p{font-size:.9375rem;font-weight:600}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:.875rem}
.foot-col .label{font-size:1.25rem;margin-bottom:8px}
.foot-col a{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.3;text-transform:uppercase;text-decoration:none}
.foot-col a[lang="ko"]{font-family:var(--text);font-size:1rem;font-weight:600;line-height:1.625}
.foot-col a:hover{text-decoration:underline}
.foot-col p{color:var(--green);line-height:1.75}
.copyright{margin-top:20px;text-align:center;font-size:.75rem;color:var(--green)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .seg{animation:none}
}