/* ============================================================
   korsink.com — Editorial Typography
   tokens → base → layout → components → responsive
   ============================================================ */

/* ---- tokens ---- */
:root{
  --paper:#F7F1E7;
  --paper-2:#F0E7D8;
  --ink:#1F1B18;
  --ink-soft:#4A433D;
  --accent:#B44E2D;
  --accent-deep:#8F3C21;
  --sand:#D9C7A7;
  --hair:#D8C8AE;
  --max:1340px;
  --measure:66ch;
  --serif:"Noto Serif KR","Cormorant Garamond",Georgia,serif;
  --latin:"Cormorant Garamond","Noto Serif KR",Georgia,serif;
  --gut:16px;
}

/* ---- base ---- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  font-size:19px;
  line-height:1.4;
  letter-spacing:.005em;
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow-x:clip;                 /* full-bleed 밴드가 가로 스크롤을 만들지 않도록 */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;}

h1,h2,h3,h4{
  font-family:var(--serif);
  letter-spacing:-0.04em;
  line-height:1.12;
  font-weight:600;
  margin:0 0 .4em;
}
h1{font-size:clamp(2.5rem,7vw,4rem);font-weight:700;}
h2{font-size:clamp(1.6rem,3.6vw,2.25rem);}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem);}
p{margin:0 0 1.15rem;max-width:var(--measure);}
.lead{
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.5;
  color:var(--ink);
  max-width:60ch;
}

/* latin display accents (numbers, labels) */
.latin{font-family:var(--latin);}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,5vw,56px);}
.wrap--narrow{max-width:960px;}

.rule{border:0;border-top:1px solid var(--hair);margin:0;}
.kicker{
  font-family:var(--latin);
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1rem;
  font-weight:600;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100;}
.skip:focus{left:8px;top:8px;}

/* ---- buttons ---- */
.btn{
  display:inline-block;
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.02em;
  padding:.85em 1.6em;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  border-radius:0;
  transition:background .3s ease,color .3s ease;
}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none;}
.btn--accent{border-color:var(--accent);background:var(--accent);color:#fff;}
.btn--accent:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;}
.btn--ghost-light{border-color:var(--paper);color:var(--paper);}
.btn--ghost-light:hover{background:var(--paper);color:var(--ink);}

/* ---- header / nav ---- */
.site-head{border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:40;background:rgba(247,241,231,.94);backdrop-filter:saturate(120%) blur(6px);}
.site-head__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px;}
.brand{display:flex;flex-direction:column;line-height:1;color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand__mark{font-family:var(--serif);font-weight:700;font-size:1.5rem;letter-spacing:-0.03em;}
.brand__sub{font-family:var(--latin);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:.25rem;}
.site-nav{display:flex;align-items:center;gap:1.6rem;}
.site-nav a{color:var(--ink);font-size:1rem;letter-spacing:-0.01em;padding:.25rem 0;border-bottom:1px solid transparent;}
.site-nav a:hover{color:var(--accent);text-decoration:none;border-bottom-color:var(--accent);}
.site-nav a[aria-current=page]{color:var(--accent);border-bottom-color:var(--accent);}
.site-nav__cta{color:var(--accent)!important;font-weight:600;}
.nav-toggle{display:none;font-family:var(--latin);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;background:transparent;border:1px solid var(--ink);color:var(--ink);padding:.5rem .9rem;cursor:pointer;}

/* ---- generic section ---- */
.section{padding:clamp(3rem,7vw,6rem) 0;}
.section + .section{border-top:1px solid var(--hair);}
.section__head{margin-bottom:2.4rem;}
.section__head p{color:var(--ink-soft);}

/* two-column editorial split */
.split{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3.5rem);}
@media(min-width:860px){
  .split{grid-template-columns:5fr 7fr;align-items:start;}
  .split--text-right{grid-template-columns:7fr 5fr;}
}

/* ---- full-bleed band (edge to edge) ---- */
.band{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:clamp(3rem,7vw,6rem) 0;
  background:var(--paper-2);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.band--dark{background:var(--ink);color:var(--paper);border-color:#2b2520;}
.band--dark .kicker{color:var(--sand);}
.band--dark h2{color:var(--paper);}
.band--dark p{color:var(--sand);}
.band__inner{max-width:1500px;margin:0 auto;padding:0 clamp(16px,5vw,56px);}

/* ---- hero ---- */
.hero{padding:clamp(2.6rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem);}
.hero__kicker{margin-bottom:1.4rem;}
.hero h1{max-width:14ch;margin-bottom:1.2rem;}
.hero__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-family:var(--latin);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--ink-soft);margin-top:1.8rem;}
.hero__meta span{display:inline-flex;align-items:center;gap:.5rem;}
.hero__meta span::before{content:"";width:6px;height:6px;background:var(--accent);display:inline-block;}
.hero__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
@media(min-width:960px){.hero__grid{grid-template-columns:11fr 10fr;}}
.hero__ba{margin:0;}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;}

/* one-line value proposition */
.valueprop{text-align:center;}
.valueprop p{font-family:var(--serif);font-size:clamp(1.4rem,3.4vw,2.2rem);line-height:1.35;font-weight:500;letter-spacing:-0.03em;color:var(--ink);max-width:24ch;margin:0 auto;}
.valueprop .accent{color:var(--accent);}

/* ---- before / after block ---- */
.ba{margin:0;}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1.5vw,1rem);}
.ba__cell{position:relative;background:var(--paper-2);border:1px solid var(--hair);overflow:hidden;}
.ba__cell img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.ba__tag{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--latin);font-weight:600;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--ink);
  padding:.35rem .8rem;
}
.ba__tag--after{background:var(--accent);}
.ba__cap{margin-top:.9rem;font-size:.98rem;color:var(--ink-soft);letter-spacing:-0.01em;max-width:var(--measure);}

/* feature before/after (larger, single) */
.feature-ba{margin-top:2rem;}

/* gallery rhythm: alternating widths (subpages) */
.ba-list{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,6vw,4.5rem);}
@media(min-width:900px){
  .ba-list{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem);}
  .ba-list .ba:nth-child(7n+1){grid-column:1 / -1;}
  .ba-list .ba:nth-child(7n+1) .ba__cell img{aspect-ratio:4/3;}
}

/* ---- wide editorial gallery (home) ---- */
.gallery{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.6rem);}
@media(min-width:720px){.gallery{grid-template-columns:1fr 1fr;}}
@media(min-width:1180px){.gallery{grid-template-columns:repeat(3,1fr);}}
.g-item{margin:0;}
.g-item--wide{grid-column:1 / -1;}
@media(min-width:720px){
  .g-item--wide .ba__cell img{aspect-ratio:4/3;}
}

/* ---- index cards (links to subpages) ---- */
.index-list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);}
.index-item{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:baseline;padding:1.6rem 0;border-bottom:1px solid var(--hair);transition:padding-left .3s ease;}
.index-item:hover{padding-left:.6rem;}
.index-item__no{font-family:var(--latin);font-size:1.1rem;color:var(--accent);letter-spacing:.08em;}
.index-item__title{margin:0;}
.index-item__title a{color:var(--ink);}
.index-item__title a:hover{color:var(--accent);text-decoration:none;}
.index-item__desc{margin:.4rem 0 0;color:var(--ink-soft);font-size:1rem;}
.index-item__go{font-family:var(--latin);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--accent);white-space:nowrap;}

/* ---- process steps ---- */
.steps{display:grid;grid-template-columns:1fr;gap:0;counter-reset:step;border-top:1px solid var(--hair);}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr);column-gap:clamp(2rem,5vw,4rem);}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(4,1fr);}}
.step{padding:1.8rem 0;border-bottom:1px solid var(--hair);}
.step__no{font-family:var(--latin);font-size:2.4rem;line-height:1;color:var(--sand);display:block;margin-bottom:.8rem;}
.step h3{margin-bottom:.4rem;}
.step p{font-size:1rem;color:var(--ink-soft);margin:0;}

/* ---- trust / why row ---- */
.trust{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);}
@media(min-width:620px){.trust{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.trust{grid-template-columns:repeat(4,1fr);}}
.trust__cell{background:var(--paper);padding:1.8rem 1.6rem;}
.trust__cell h3{color:var(--ink);margin-bottom:.5rem;}
.trust__cell p{font-size:.98rem;color:var(--ink-soft);margin:0;}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--hair);}
.faq__item{border-bottom:1px solid var(--hair);}
.faq__q{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.3rem);font-weight:600;letter-spacing:-0.03em;
  color:var(--ink);padding:1.5rem 2.5rem 1.5rem 0;position:relative;line-height:1.3;}
.faq__q::after{content:"+";position:absolute;right:.2rem;top:1.4rem;font-family:var(--latin);font-size:1.6rem;color:var(--accent);transition:transform .3s ease;}
.faq__item.open .faq__q::after{content:"−";}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;opacity:0;}
.faq__item.open .faq__a{max-height:600px;opacity:1;}
.faq__a p{padding:0 0 1.5rem;margin:0;color:var(--ink-soft);}
.faq__a p:first-child{padding-top:0;}

/* ---- contact cards ---- */
.cards{display:grid;grid-template-columns:1fr;gap:1.2rem;}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr;}}
.card{border:1px solid var(--hair);background:var(--paper-2);padding:clamp(1.6rem,3vw,2.4rem);}
.card__kicker{font-family:var(--latin);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;color:var(--accent);margin:0 0 .8rem;font-weight:600;}
.card__big{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:700;letter-spacing:-0.03em;margin:0 0 .6rem;}
.card__big a{color:var(--ink);}
.card p{margin:.2rem 0;color:var(--ink-soft);font-size:1rem;}

/* definition / info table */
.deflist{border-top:1px solid var(--hair);margin:0;}
.deflist div{display:grid;grid-template-columns:1fr;gap:.2rem;padding:1.1rem 0;border-bottom:1px solid var(--hair);}
@media(min-width:620px){.deflist div{grid-template-columns:200px 1fr;gap:1.5rem;}}
.deflist dt{font-weight:600;color:var(--ink);margin:0;}
.deflist dd{margin:0;color:var(--ink-soft);}

/* scope grid */
.scope-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);}
@media(min-width:640px){.scope-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.scope-grid{grid-template-columns:repeat(3,1fr);}}
.scope-cell{background:var(--paper);padding:1.6rem;}
.scope-cell h3{color:var(--ink);margin-bottom:.5rem;}
.scope-cell p{font-size:.98rem;color:var(--ink-soft);margin:0;}

/* prose helper */
.prose p{max-width:var(--measure);}
.prose h2{margin-top:2.4rem;}
.prose h3{margin-top:1.8rem;}
.prose ul{max-width:var(--measure);padding-left:1.2rem;margin:0 0 1.2rem;color:var(--ink-soft);}
.prose li{margin:.4rem 0;}
.answer{font-size:1.08rem;color:var(--ink);}

/* ---- dark closing CTA ---- */
.cta-dark{background:var(--ink);color:var(--paper);padding:0;}
.cta-dark .wrap{padding-top:clamp(1.6rem,3vw,2.6rem);padding-bottom:clamp(1.6rem,3vw,2.6rem);}
.cta-dark .kicker{color:var(--sand);}
.cta-dark h2{color:var(--paper);max-width:18ch;}
.cta-dark p{color:var(--sand);}
.cta-dark__tel{font-family:var(--latin);font-size:clamp(2rem,6vw,3.2rem);font-weight:600;letter-spacing:.02em;margin:1rem 0 1.6rem;}
.cta-dark__tel a{color:var(--paper);}
.cta-dark__tel a:hover{color:#fff;text-decoration:none;}

/* page intro header */
.page-head{padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--hair);}
.page-head h1{max-width:18ch;}
.page-head .lead{margin-top:1rem;}

/* breadcrumb */
.crumb{font-family:var(--latin);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--ink-soft);margin-bottom:1rem;}
.crumb a{color:var(--ink-soft);}
.crumb a:hover{color:var(--accent);}

/* ---- reveal (fade in) ---- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;}
.reveal.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---- responsive nav ---- */
@media(max-width:820px){
  .nav-toggle{display:inline-block;}
  .site-nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--hair);padding:0 var(--gut);max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .site-nav.open{max-height:460px;padding-top:.5rem;padding-bottom:1rem;}
  .site-nav a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--hair);}
  .site-nav a:last-child{border-bottom:0;}
}

@media(max-width:560px){
  body{font-size:18px;}
  .ba__pair{gap:.4rem;}
  .ba__tag{font-size:.72rem;padding:.28rem .6rem;}
  .index-item{grid-template-columns:auto 1fr;}
  .index-item__go{display:none;}
}

/* ── footer (editorial dark) ───────────── */
.site-foot{background:var(--ink);color:var(--paper);padding:clamp(1.6rem,3vw,2.4rem) 0 1.4rem;margin-top:0;}
.site-foot__grid{display:grid;grid-template-columns:1.5fr 1.3fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);}
.site-foot__col p{margin:0 0 .5rem;max-width:none;color:rgba(247,241,231,.80);font-size:.94rem;line-height:1.75;letter-spacing:-.005em;}
.site-foot__brand{font-family:var(--serif);font-size:1.5rem;color:var(--paper)!important;margin-bottom:1rem!important;letter-spacing:-.01em;}
.site-foot a{color:rgba(247,241,231,.82);text-decoration:none;transition:color .25s ease;}
.site-foot a:hover{color:var(--accent);}
.site-foot__h{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)!important;font-weight:700;margin:1.5rem 0 .55rem!important;}
.site-foot__col>.site-foot__h:first-child{margin-top:0!important;}
.site-foot__tel{font-family:var(--serif);font-size:1.95rem;line-height:1.1;margin:.15rem 0 .45rem!important;}
.site-foot__tel a{color:var(--paper)!important;}
.site-foot__tel a:hover{color:var(--accent)!important;}
.site-foot__hours{font-size:.86rem!important;color:rgba(247,241,231,.6)!important;}
.site-foot__note{font-size:.84rem!important;color:rgba(247,241,231,.5)!important;margin-top:.6rem!important;}
.site-foot__copy{margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid rgba(247,241,231,.14);font-size:.82rem;color:rgba(247,241,231,.5);max-width:none;}
@media(max-width:760px){.site-foot__grid{grid-template-columns:1fr;gap:1.7rem;}.site-foot__tel{font-size:1.75rem;}}

/* ── before/after carousel ───────────── */
.ba-carousel{position:relative;}
.ba-carousel__track{display:flex;gap:clamp(1rem,2.5vw,1.8rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:.3rem .2rem 1rem;scrollbar-width:none;}
.ba-carousel__track::-webkit-scrollbar{display:none;}
.ba-carousel .g-item{flex:0 0 auto;width:min(680px,82vw);scroll-snap-align:center;margin:0;opacity:1;transform:none;}
.ba-carousel__btn{position:absolute;top:38%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:1.6rem/1 var(--serif);cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 14px rgba(31,27,24,.12);transition:background .2s ease,color .2s ease;}
.ba-carousel__btn:hover{background:var(--ink);color:var(--paper);}
.ba-carousel__btn--prev{left:-10px;}
.ba-carousel__btn--next{right:-10px;}
@media(max-width:760px){.ba-carousel .g-item{width:86vw;}.ba-carousel__btn{width:40px;height:40px;top:40%;}.ba-carousel__btn--prev{left:2px;}.ba-carousel__btn--next{right:2px;}}