/* ============================================================
   Atelier Lo-Fi — Common Stylesheet
   Point colors from favicon flower: coral #FC6D5D / yellow #FFD22F
   ============================================================ */
:root{
  --coral:  #FC6D5D;
  --yellow: #FFD22F;
  --ink:    #131F3A;
  --gray:   #8B909B;
  --gray-l: #C6C9D0;
  --line:   #EDEDEA;
  --bg:     #fdfcfa;
  --sans:   "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --serif:  var(--sans); /* 영문도 일본어와 동일한 웹폰트 사용 */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--coral); color:#fff; }

/* ---------------- Header / Navigation ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 48px;
  background:rgba(253,252,250,.88); /* --bg #fdfcfa 와 동일 톤 */
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled{
  padding:14px 48px;
  box-shadow:0 1px 0 var(--line);
}
.site-logo img{ height:20px; width:auto; }
.site-logo{ display:flex; align-items:center; gap:8px; }
.site-logo .logo-flower{
  height:16px; width:16px;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.site-logo:hover .logo-flower{ transform:rotate(180deg) scale(1.15); }

.site-nav ul{ display:flex; gap:34px; }
.site-nav a{
  position:relative;
  font-size:12.5px; font-weight:500;
  letter-spacing:.18em;
  color:var(--ink);
  padding:6px 0;
  transition:color .25s;
}
.site-nav a::before{
  content:"";
  position:absolute; left:50%; top:-9px;
  width:11px; height:11px;
  transform:translateX(-50%) scale(0) rotate(-90deg);
  background:url("../img/favicon.png") center/contain no-repeat;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.site-nav a:hover{ color:var(--coral); }
.site-nav a:hover::before,
.site-nav a.active::before{ transform:translateX(-50%) scale(1) rotate(0deg); }
.site-nav a.active{ color:var(--coral); }

.nav-toggle{ display:none; }

/* ---------------- Page hero (sub pages) ---------------- */
.page-hero{
  padding:190px 48px 70px;
  max-width:1200px; margin:0 auto;
}
.page-hero .en{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(46px, 7vw, 84px);
  line-height:1.05;
  letter-spacing:.01em;
  display:flex; align-items:flex-start; gap:10px;
}
.page-hero .en .petal{
  width:clamp(18px,2.4vw,28px); height:auto;
  margin-top:10px;
  animation:petal-sway 4s ease-in-out infinite;
}
.page-hero .jp{
  margin-top:18px;
  font-size:15px; font-weight:500;
  color:var(--gray);
  letter-spacing:.14em;
}
@keyframes petal-sway{
  0%,100%{ transform:rotate(-8deg); }
  50%{ transform:rotate(14deg) translateY(-4px); }
}

/* ---------------- Common sections ---------------- */
.container{ max-width:1200px; margin:0 auto; padding:0 48px; }
.section{ padding:60px 0; }

.sec-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(24px,3vw,34px);
  margin-bottom:34px;
}
.sec-label::before{
  content:"";
  width:16px; height:16px; flex:none;
  background:url("../img/favicon.png") center/contain no-repeat;
}
.sec-label small{
  font-family:var(--sans); font-weight:500;
  font-size:12px; color:var(--gray); letter-spacing:.16em;
  margin-left:6px; transform:translateY(4px);
}

/* ---------------- Reveal animation ---------------- */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }

/* ---------------- Footer ---------------- */
.site-footer{
  padding:56px 24px 44px;
  text-align:center;
  background:var(--bg);
}
.site-footer .footer-flower{
  width:18px; margin:0 auto 18px;
  animation:petal-sway 5s ease-in-out infinite;
}
.site-footer p{
  font-size:12px;
  color:var(--gray-l);
  letter-spacing:.08em;
}

/* ---------------- Buttons / misc ---------------- */
.flower-divider{
  display:flex; align-items:center; gap:14px;
  margin:70px auto; max-width:1200px; padding:0 48px;
}
.flower-divider::before,
.flower-divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.flower-divider img{ width:16px; opacity:.85; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px){
  .site-header{ padding:16px 20px; flex-wrap:wrap; }
  .site-header.scrolled{ padding:12px 20px; }
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    width:34px; height:30px; position:relative;
  }
  .nav-toggle span{
    position:absolute; left:6px; right:6px; height:2px;
    background:var(--ink); transition:.3s;
  }
  .nav-toggle span:nth-child(1){ top:9px; }
  .nav-toggle span:nth-child(2){ top:16px; }
  .nav-toggle span:nth-child(3){ top:23px; }
  .nav-toggle.open span:nth-child(1){ top:16px; transform:rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ top:16px; transform:rotate(-45deg); }

  .site-nav{
    display:none; width:100%; padding:18px 4px 8px;
  }
  .site-nav.open{ display:block; }
  .site-nav ul{ flex-direction:column; gap:14px; }
  .site-nav a::before{ display:none; }

  .page-hero{ padding:130px 24px 50px; }
  .container{ padding:0 24px; }
  .flower-divider{ padding:0 24px; margin:48px auto; }
}