:root{
  --h: 150;
  --ink:    hsl(var(--h) 20% 13%);
  --paper:  hsl(var(--h) 30% 98%);
  --surface:hsl(var(--h) 45% 95%);
  --line:   hsl(var(--h) 40% 85%);
  --accent: hsl(var(--h) 55% 38%);
  --accent-ink: hsl(0 0% 100%);
  --mute:   hsl(var(--h) 10% 44%);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; }
img,video,svg,table,pre{ max-width:100%; }
body{
  margin:0; word-break:keep-all; overflow-wrap:break-word;
  background:var(--paper); color:var(--ink);
  font-family:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:17px; line-height:1.75;
}
.m-wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:16px; }
@media (min-width:768px){ .m-wrap{ padding-inline:32px; } }
h1,h2,h3{ line-height:1.3; margin:0 0 .5em; }
h1{ font-size:clamp(26px,6.4vw,52px); }
h2{ font-size:clamp(22px,4.2vw,34px); }
h3{ font-size:clamp(18px,2.6vw,22px); }
a{ color:inherit; }
button{ font:inherit; }

/* header */
.m-hdr{
  position:sticky; top:0; z-index:20; height:64px; display:flex; align-items:center;
  background:hsl(var(--h) 45% 30%); color:hsl(0 0% 100%);
}
.m-hdr .m-wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.m-logo{ font-weight:800; font-size:18px; text-decoration:none; color:inherit; letter-spacing:.02em; }
.m-nav{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.m-nav a{ text-decoration:none; font-size:14px; color:hsl(0 0% 82%); }
@media (max-width:420px){
  .m-hdr{ height:56px; }
  .m-nav li:nth-child(n+3){ display:none; }
}

/* hero */
.m-hero{
  position:relative; padding:56px 0 48px; overflow:hidden;
  background:linear-gradient(150deg, hsl(var(--h) 45% 32%), hsl(calc(var(--h) + 15) 42% 38%));
  color:hsl(0 0% 100%);
}
.m-hero-media{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  background:hsl(var(--h) 30% 30%); margin-bottom:28px;
}
.m-hero-media img,.m-hero-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.m-sub{
  margin:0 0 14px; font-size:15px; letter-spacing:.08em; color:hsl(0 0% 100%); font-weight:800;
}
.m-lead{ font-size:17px; color:hsl(0 0% 90%); max-width:64ch; margin:0 0 26px; }
.m-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.m-cta a{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px;
  border-radius:10px; font-weight:700; text-decoration:none; font-size:15px;
}
.m-cta-call{ background:var(--accent); color:var(--accent-ink); }
.m-cta-book{ background:transparent; color:hsl(0 0% 98%); border:1px solid hsl(0 0% 60%); }

/* section shell */
.m-section{ padding:48px 0; }
.m-section:nth-of-type(odd){ background:var(--surface); }
.m-kicker{ color:var(--accent); font-weight:700; font-size:14px; letter-spacing:.06em; margin-bottom:6px; }

/* sketch grid (section 1) */
.m-sketch-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.m-sketch-grid figure{ margin:0; border-radius:12px; overflow:hidden; background:var(--line); aspect-ratio:1/1; }
.m-sketch-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.m-sketch-grid figcaption{ font-size:13px; color:var(--mute); margin-top:6px; }
@media (min-width:640px){ .m-sketch-grid{ grid-template-columns:repeat(4,1fr); } }

/* scenes row (section 2) */
.m-scene-row{ display:grid; grid-template-columns:1fr; gap:14px; }
.m-scene{ display:flex; flex-direction:column; gap:8px; }
.m-scene .m-scene-img{ border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--line); }
.m-scene img{ width:100%; height:100%; object-fit:cover; display:block; }
.m-scene span{ font-size:14px; color:var(--mute); }
@media (min-width:768px){ .m-scene-row{ grid-template-columns:repeat(3,1fr); } }

/* scale zigzag (section 3) */
.m-zigzag{ display:flex; flex-direction:column; gap:28px; }
.m-zigzag-item{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center; }
.m-zigzag-item .m-zz-img{ border-radius:14px; overflow:hidden; aspect-ratio:3/2; background:var(--line); }
.m-zigzag-item img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:768px){
  .m-zigzag-item{ grid-template-columns:1fr 1fr; }
  .m-zigzag-item:nth-child(even) .m-zz-img{ order:2; }
}

/* type grid (section 4) */
.m-track{
  display:grid; grid-template-columns:1fr; gap:16px;
}
.m-card{
  border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink);
  background:hsl(0 0% 100%); border:1px solid var(--line); display:flex; flex-direction:column;
  height:100%;
}
.m-card-img{ aspect-ratio:4/3; background:var(--line); }
.m-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.m-card-body{ padding:16px; display:flex; flex-direction:column; flex:1; }
.m-card-body h3{ margin:0 0 8px; font-size:18px; line-height:1.3; }
.m-card-body p{ margin:0; font-size:14px; line-height:1.5; color:var(--mute); min-height:3em; }
@media (min-width:640px){ .m-track{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .m-track{ grid-template-columns:repeat(3,1fr); } }
.m-carousel-more{ text-align:center; margin-top:24px; }
.m-carousel-more a{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 28px;
  border-radius:10px; text-decoration:none; font-weight:700; font-size:16px;
  background:var(--accent); color:var(--accent-ink);
}

/* profile (section 5) */
.m-profile{ display:grid; grid-template-columns:1fr; gap:24px; }
.m-profile-imgs img{ width:100%; height:auto; display:block; border-radius:12px; background:var(--line); }
.m-profile-lead{ margin:0 0 20px; font-size:18px; font-weight:700; }
.m-profile-points{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:14px; }
.m-profile-points li{ padding:16px; border-radius:12px; background:var(--surface); border-left:3px solid var(--accent); }
.m-profile-points strong{ display:block; margin-bottom:6px; color:var(--accent); font-size:15px; }
.m-profile-points p{ margin:0; color:var(--mute); font-size:15px; }
.m-profile-more{ margin:0; color:var(--mute); font-size:15px; }
.m-profile-more a{ color:var(--accent); font-weight:700; text-decoration:none; }
@media (min-width:768px){ .m-profile{ grid-template-columns:1fr 1.3fr; } .m-profile-points{ grid-template-columns:1fr 1fr; } }

/* style list (section 7) */
.m-style-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.m-style-item{ padding:20px; border-radius:12px; background:hsl(0 0% 100%); border:1px solid var(--line); }
.m-style-item h3{ color:var(--accent); }
@media (min-width:640px){ .m-style-grid{ grid-template-columns:repeat(2,1fr); } }

/* events (section 8) */
.m-events-list{ display:flex; flex-direction:column; gap:10px; padding:0; margin:0; list-style:none; }
.m-events-list li{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px;
  background:hsl(0 0% 100%); border:1px solid var(--line); border-radius:10px; flex-wrap:wrap;
}
.m-events-list a{ font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; }

/* flow timeline (section 9) */
.m-flow-table{ width:100%; border-collapse:collapse; }
.m-flow-table th,.m-flow-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.m-flow-table th{ font-size:14px; color:var(--mute); font-weight:700; }
.m-flow-table td:first-child{ font-weight:800; color:var(--accent); white-space:nowrap; width:64px; }

/* faq (section 10) */
.m-faq-item{ border-bottom:1px solid var(--line); padding:16px 0; }
.m-faq-q{
  font-weight:700; margin:0; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.m-faq-q::-webkit-details-marker{ display:none; }
.m-faq-q::after{
  content:"+"; flex:0 0 auto; font-size:20px; font-weight:400; color:var(--accent);
}
.m-faq-item[open] .m-faq-q::after{ content:"\2212"; }
.m-faq-a{ margin:12px 0 0; color:var(--mute); }

/* bio aside (not used on main; kept for future consistency) */
.m-bio{ padding:32px 16px; text-align:center; }

/* cta band */
.m-ctaband{
  padding:56px 16px; text-align:center; background:hsl(var(--h) 50% 32%); color:hsl(0 0% 100%);
}
.m-ctaband p{ margin:0 0 16px; font-size:19px; font-weight:700; }
.m-ctaband-btns{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.m-ctaband-btns a{
  min-height:48px; display:inline-flex; align-items:center; padding:0 24px; border-radius:10px;
  text-decoration:none; font-weight:700; font-size:18px;
}
.m-ctaband-btns a:first-child{ background:hsl(0 0% 100%); color:var(--accent); }
.m-ctaband-btns a:last-child{ background:transparent; color:hsl(0 0% 100%); border:1.5px solid hsl(0 0% 100%); }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* footer (business info only) */
.ft{ padding:14px 16px; background:hsl(var(--h) 14% 16%); }
.ft-line{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 14px; margin:0;
  font-size:12px; line-height:1.5; color:hsl(0 0% 78%);
}
.ft-line span{ white-space:nowrap; }
.ft-line span:not(:last-child)::after{
  content:"|"; margin-left:14px; color:hsl(0 0% 42%);
}
@media (max-width:420px){
  .ft-line{ font-size:11px; gap:4px 10px; }
  .ft-line span:nth-child(4){ white-space:normal; }
}