@charset "UTF-8";
/* illen.jp — mobile-first, warm minimal */
:root{
  --paper:#FAF7F3;
  --paper-2:#F1EAE1;
  --paper-3:#E9DFD2;
  --ink:#1B1A17;
  --ink-70:rgba(27,26,23,.7);
  --ink-55:rgba(27,26,23,.55);
  --ink-40:rgba(27,26,23,.4);
  --ink-25:rgba(27,26,23,.25);
  --line:rgba(27,26,23,.12);
  --rose:#C99287;
  --rose-deep:#9C6B5E;
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;line-height:2;
}
img{max-width:100%;display:block}
picture{display:contents}/* 🔴④ picture 래퍼가 flex/grid 레이아웃에 개입하지 않도록 */
a{color:inherit}
br.pc{display:none}
@media(min-width:760px){br.pc{display:block}}

/* ───── header ───── */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  transition:background .4s,box-shadow .4s;
}
header.scrolled{background:rgba(250,247,243,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.wordmark{display:block;text-decoration:none}
.wordmark img{height:20px;width:auto;display:block}
nav{display:flex;align-items:center;gap:clamp(14px,3vw,28px)}
nav a{font-size:11.5px;letter-spacing:.12em;color:var(--ink-55);text-decoration:none;transition:color .3s}
nav a:hover{color:var(--ink)}
nav a.buy{color:var(--paper);background:var(--ink);padding:8px 16px;border-radius:100px;letter-spacing:.1em;transition:background .3s}
nav a.buy:hover{background:var(--rose-deep)}

/* ───── hero ───── */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;
  position:relative;overflow:hidden;
  padding:clamp(104px,17vw,150px) clamp(24px,6vw,72px) 0;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(130% 100% at 75% 30%,#FFFDFA 0%,var(--paper) 45%,var(--paper-2) 100%);
}
.hero-jar{
  position:relative;z-index:1;width:min(72vw,340px);height:auto;margin:40px auto 28px;
  filter:drop-shadow(0 36px 48px rgba(27,26,23,.22));
  opacity:0;transform:translateY(24px);animation:rise 1.2s .5s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-copy{position:relative;z-index:2;padding-top:36px}
.hero .eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.2em;color:var(--ink-55);
  opacity:0;animation:fade 1s .15s ease forwards;
}
.hero .eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rose-deep)}
h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(34px,8.4vw,68px);line-height:1.3;letter-spacing:.01em;
  margin:18px 0 20px;
}
.w{display:inline-block}/* 문절 단위 줄바꿈 통제 유틸 — h1 히어로·h2 조판 공용 (2026-07-10 🔴② fix) */
h1 .line{display:block;overflow:hidden}
h1 .line>span{display:block;opacity:0;transform:translateY(105%);animation:reveal 1s cubic-bezier(.16,1,.3,1) forwards}
h1 .line:nth-child(1)>span{animation-delay:.25s}
h1 .line:nth-child(2)>span{animation-delay:.38s}
h1 em{font-style:normal;color:var(--rose-deep)}
.hero .sub{
  font-size:clamp(13.5px,1.4vw,16px);color:var(--ink-70);line-height:2.1;
  opacity:0;animation:fade 1s .7s ease forwards;
}
.hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px;opacity:0;animation:fade 1s .85s ease forwards}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:100px;background:var(--ink);color:var(--paper);
  font-size:13px;letter-spacing:.08em;text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s;
}
.btn:hover{transform:translateY(-2px);background:var(--rose-deep)}
.btn-text{font-size:12.5px;letter-spacing:.06em;color:var(--ink-55);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s}
.btn-text:hover{color:var(--ink)}
.hero .chips{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line);
  opacity:0;animation:fade 1.1s 1s ease forwards;
}
.chip .t{font-weight:400;font-size:clamp(12.5px,1.4vw,15.5px);letter-spacing:.02em}
.chip .d{margin-top:4px;font-size:10.5px;line-height:1.6;color:var(--ink-55)}/* 🔴③ 동반 상향(장식 캡션은 55) */
@media(max-width:600px){
  .hero .chips{grid-template-columns:1fr;gap:13px}
  .chip{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .chip .t{font-size:13px;white-space:nowrap}
  .chip .d{margin:0;font-size:11px;text-align:right}
}

/* desktop hero: two-column */
@media(min-width:900px){
  .hero{flex-direction:row;align-items:center;justify-content:space-between;gap:5vw;padding-bottom:0}
  .hero-copy{flex:1.1;max-width:640px;padding-top:0}
  .hero-jar{width:min(34vw,460px);margin:0}
}

/* ───── sections ───── */
section{padding:clamp(72px,12vw,140px) clamp(24px,6vw,72px);position:relative}
.inner{max-width:1080px;margin:0 auto}
.narrow{max-width:660px;margin:0 auto}
.label{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-deep);
  margin-bottom:22px;display:flex;align-items:center;gap:12px;
}
.label::after{content:"";flex:0 0 32px;height:1px;background:var(--line)}
h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(25px,4.6vw,44px);line-height:1.5;letter-spacing:.01em;
  margin-bottom:24px;
}
.lead{font-size:clamp(13.5px,1.35vw,16px);color:var(--ink-70);line-height:2.2;max-width:38em}
.note{font-size:11px;line-height:1.9;color:var(--ink-70);margin-top:26px}/* 🔴③ 打消し表示 대비 2.5→6.3:1 (ink-40→70) */

.alt{background:var(--paper-2)}

/* philosophy */
.philosophy{text-align:center}
.philosophy h2{margin-bottom:28px}
.philosophy .lead{margin:0 auto}

/* product */
.product-grid{display:grid;gap:40px;align-items:center}
@media(min-width:860px){.product-grid{grid-template-columns:1fr 1fr;gap:6vw}}
.product-grid figure{border-radius:18px;overflow:hidden;background:#fff}
.steps{display:grid;gap:0;margin-top:36px;border-top:1px solid var(--line)}
.step{display:flex;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.step .n{font-family:var(--serif);font-size:13px;color:var(--rose-deep);flex:0 0 20px}
.step .t{font-weight:400;font-size:14.5px;flex:0 0 8.5em}
.step .d{font-size:12.5px;color:var(--ink-55)}
@media(max-width:520px){.step{flex-wrap:wrap}.step .d{flex-basis:100%;padding-left:38px}}

/* for you */
.foryou-list{display:grid;gap:14px;margin-top:8px}
@media(min-width:760px){.foryou-list{grid-template-columns:1fr 1fr;gap:18px}}
.foryou-list .item{
  padding:22px 24px;border:1px solid var(--line);border-radius:14px;
  font-size:13.5px;line-height:1.9;background:rgba(255,255,255,.5);
}
.foryou-list .item::before{content:"\2014";color:var(--rose);margin-right:10px}

/* how to */
.howto-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0 8px;text-align:center}
.howto-steps .s{padding:26px 10px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid var(--line)}
.howto-steps .s .n{font-family:var(--serif);color:var(--rose-deep);font-size:13px;margin-bottom:8px}
.howto-steps .s .t{font-weight:400;font-size:clamp(12.5px,1.4vw,15px)}

/* testing */
.testing{background:var(--ink);color:var(--paper)}
.testing .label{color:var(--rose)}
.testing .label::after{background:rgba(250,247,243,.2)}
.testing .lead{color:rgba(250,247,243,.75)}
.testing .quote{
  font-family:var(--serif);font-size:clamp(17px,2.4vw,24px);line-height:1.9;
  margin:36px 0 0;padding-left:22px;border-left:2px solid var(--rose);
}
.testing .note{color:rgba(250,247,243,.7)}/* 🔴③ 다크 밴드 주석 3.2→7.6:1 */

/* trust cards */
.trust-cards{display:grid;gap:16px;margin-top:12px}
@media(min-width:820px){.trust-cards{grid-template-columns:repeat(3,1fr);gap:20px}}
.tcard{
  display:block;padding:30px 26px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.65);text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
a.tcard:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(27,26,23,.25)}
.tcard .t{font-family:var(--serif);font-weight:500;font-size:17px;margin-bottom:10px}
.tcard .d{font-size:12.5px;line-height:1.9;color:var(--ink-55)}
.tcard .more{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;color:var(--rose-deep)}

/* voices */
.voices-grid{display:grid;gap:16px;margin-top:12px}
@media(min-width:820px){.voices-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.voice{
  padding:28px 26px;border-radius:16px;background:rgba(255,255,255,.65);border:1px solid var(--line);
  font-size:13px;line-height:2;
}
.voice .stars{color:var(--rose-deep);font-size:11px;letter-spacing:.2em;margin-bottom:10px}

/* lifestyle band */
.band{padding:0;height:clamp(300px,55vw,560px);overflow:hidden;max-width:1440px;margin:0 auto}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 40%}

/* buy */
.buy{text-align:center}
.buy .lead{margin:0 auto}
.buy-card{
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:36px;padding:34px clamp(36px,8vw,72px);border-radius:20px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.buy-card:hover{transform:translateY(-4px)}
.buy-card .store{font-size:11px;letter-spacing:.22em;color:var(--rose)}
.buy-card .t{font-family:var(--serif);font-size:clamp(18px,2.6vw,24px)}
.buy-card .d{font-size:11.5px;color:rgba(250,247,243,.55)}
.buy .later{margin-top:22px;font-size:12px;color:var(--ink-40)}

/* ───── footer ───── */
footer{padding:56px clamp(24px,6vw,72px) 40px;border-top:1px solid var(--line);background:var(--paper-2)}
.foot-grid{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.foot-brand img{height:18px;width:auto;display:block}
.foot-brand small{display:block;margin-top:10px;font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.06em;color:var(--ink-40)}
.foot-links{display:flex;gap:22px;font-size:12px}
.foot-links a{color:var(--ink-55);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-legal{max-width:1080px;margin:34px auto 0;font-size:10.5px;line-height:1.9;color:var(--ink-70)}/* 🔴③ 법적 고지 동반 상향 */

/* ───── subpages ───── */
.page{padding:clamp(130px,20vw,190px) clamp(24px,6vw,72px) clamp(72px,10vw,120px)}
.page h1.page-title{font-size:clamp(30px,5.5vw,52px);line-height:1.4;margin:14px 0 20px}
.ing-list{
  margin-top:34px;padding:30px clamp(22px,4vw,40px);border-radius:16px;
  background:rgba(255,255,255,.65);border:1px solid var(--line);
  font-size:13px;line-height:2.3;letter-spacing:.02em;
}
.kv{margin-top:34px;border-top:1px solid var(--line)}
.kv .row{display:flex;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.kv .row .k{flex:0 0 9em;color:var(--ink-55);font-size:12.5px}
@media(max-width:520px){.kv .row{flex-direction:column;gap:2px}.kv .row .k{flex:0 0 auto}}
.faq-item{border-bottom:1px solid var(--line);padding:26px 4px}
.faq-item .q{font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.8;margin-bottom:10px}
.faq-item .q::before{content:"Q.";color:var(--rose-deep);margin-right:10px;font-family:var(--sans)}
.faq-item .a{font-size:13.5px;color:var(--ink-70);line-height:2.1}

/* ───── v2: wash page ───── */
.product-grid figure img,.lineup-fig img{width:100%;height:auto}
.wash-hero{padding-top:clamp(120px,18vw,180px)}
.wash-hero h1{font-size:clamp(30px,5.8vw,54px);line-height:1.4;margin:14px 0 20px}
.pick-grid{display:grid;gap:13px;margin-top:30px}
@media(min-width:600px){.pick-grid{grid-template-columns:1fr 1fr;gap:16px}}
.pick{padding:22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.6)}
.pick .p-name{font-size:10.5px;letter-spacing:.18em;color:var(--rose-deep);margin-bottom:8px}
.pick .p-day{font-family:var(--serif);font-weight:500;font-size:clamp(14.5px,1.8vw,17px);line-height:1.9}
.buy-card.soon{background:transparent;border:1px dashed var(--ink-25);color:var(--ink);cursor:default}
.buy-card.soon .store{color:var(--rose-deep)}
.buy-card.soon .d{color:var(--ink-40)}
.wash-hero .howto-steps .s .t,.howto-steps .s .t{line-height:1.8}

/* ───── v2: index lineup ───── */
.lineup-fig{margin:36px 0 28px;border-radius:18px;overflow:hidden;background:#fff}
.lineup-grid{display:grid;gap:16px}
@media(min-width:820px){.lineup-grid{grid-template-columns:1fr 1fr;gap:20px}}
.lcard{display:block;padding:30px 26px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.65);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
a.lcard:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(27,26,23,.25)}
.lcard .act{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.6vw,26px);margin-bottom:6px}
.lcard .who{font-size:10.5px;letter-spacing:.16em;color:var(--rose-deep);margin-bottom:12px}
.lcard .d{font-size:13px;line-height:2;color:var(--ink-70)}
.lcard .more{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.14em;color:var(--rose-deep)}
.buy-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:stretch;margin-top:36px}
.buy-row .buy-card{margin-top:0}

/* ───── v2: ingredients 3제품 ───── */
.ing-section{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.ing-section:first-of-type{margin-top:40px;padding-top:0;border-top:0}
.ing-section h2{font-size:clamp(20px,3vw,28px)}
.ing-section .p-cat{font-size:11.5px;letter-spacing:.1em;color:var(--ink-40);margin:-16px 0 4px}

/* reveal on scroll — html.js 게이팅: JS 미동작 시 콘텐츠 상시 표시 (2026-07-10 🔴① fix) */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
html.js .reveal.in{opacity:1;transform:none}

@keyframes reveal{to{opacity:1;transform:translateY(0)}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.js .reveal{opacity:1;transform:none}
  .hero-jar,.hero .eyebrow,.hero .sub,.hero .cta-row,.hero .chips{opacity:1;transform:none}
  h1 .line>span{opacity:1;transform:none}
}