@charset "utf-8";
/* =========================================================================
   I M fine - ESG Site
   Design tokens are lifted from the corporate site (im-fine.co.kr):
   background #6e6d72 (--color-background-dark-gray) and the type stack
   "TWKLausanne" (Latin) + "ABCFavorit" (Hangul).
   ========================================================================= */


/* ---------- Tokens -------------------------------------------------- */
:root{
  --bg:#6e6d72;
  --fg:#cbcacd;        /* 제목·본문 공통 톤 */
  --fg-strong:#f4f4f5; /* 선택·호버·포커스 등 '상태'에만 */

  --line:rgba(255,255,255,.46);
  --line-soft:rgba(255,255,255,.24);
  --line-strong:#f4f4f5; /* 섹션 헤드 밑줄·선택된 탭 — 시안 실측 #ededee */

  --font:"TWKLausanne","ABCFavorit",ui-sans-serif,system-ui,-apple-system,sans-serif;

  --gutter:clamp(20px,2.43vw,35px);

  /* fluid type, anchored to the 1440px comp */
  --fs-nav:clamp(12.5px,1.04vw,15px);
  --fs-label:clamp(17px,1.53vw,22px);
  --fs-hero-en:clamp(38px,4.3vw,62px);
  --fs-hero-kr:clamp(25px,3.13vw,45px);
  --fs-sec:clamp(23px,2.22vw,32px);
  --fs-sec-kr:clamp(17px,1.53vw,22px);
  --fs-eyebrow:clamp(15.5px,1.25vw,18px);
  --fs-lead:clamp(16.5px,1.39vw,20px);
  --fs-body:clamp(14.5px,1.11vw,16px);
  --fs-meta:clamp(13px,.97vw,14px);

  --sec-pad:clamp(72px,9.7vw,140px);
  --head-gap:clamp(48px,8.6vw,124px);
}

/* ---------- Reset --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}

/* ---------- Layout -------------------------------------------------- */
.wrap{padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Text column (1012px) + mark column (393px), as measured on the comps */
.band{
  display:grid;
  grid-template-columns:minmax(0,1012fr) minmax(0,393fr);
  gap:clamp(24px,3vw,48px);
  align-items:center;
}
.band__main{min-width:0}
.band--top{align-items:start}

/* ---------- Header -------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--bg);
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-block:clamp(18px,2.3vw,33px) clamp(10px,1.2vw,16px);
}
.site-header__label{
  font-size:var(--fs-label);font-weight:300;letter-spacing:.005em;
  color:var(--fg);line-height:1.1;white-space:nowrap;
}
.gnb{display:flex;gap:clamp(12px,1.7vw,24px);flex-wrap:wrap;justify-content:flex-end}
.gnb a{
  font-size:var(--fs-nav);color:var(--fg);line-height:1.4;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s;
}
.gnb a:hover{color:var(--fg-strong)}
.gnb a[aria-current="page"]{color:var(--fg-strong);font-weight:400;border-bottom-color:var(--fg-strong)}

/* ---------- Hero ---------------------------------------------------- */
.hero{padding-top:clamp(96px,16vw,236px);padding-bottom:clamp(48px,8vw,110px)}
.hero__en,.hero__kr{display:block}
.hero__en{
  font-size:var(--fs-hero-en);font-weight:300;line-height:1.26;
  letter-spacing:-.01em;color:var(--fg);
}
.hero__kr{
  margin-top:clamp(14px,1.8vw,26px);
  font-size:var(--fs-hero-kr);font-weight:400;line-height:1.41;
  letter-spacing:-.015em;color:var(--fg);
}
.hero__cue{
  display:inline-block;margin-top:clamp(48px,9.6vw,139px);
  font-size:var(--fs-label);font-weight:300;color:var(--fg);
}
.hero__cue:hover{color:var(--fg-strong)}

/* ---------- Section ------------------------------------------------- */
.section{padding-block:var(--sec-pad)}
.section__head{
  display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
  font-size:var(--fs-sec);font-weight:300;line-height:1.1;
  color:var(--fg);margin-bottom:var(--head-gap);
}
.section__head .kr{font-size:var(--fs-sec-kr);font-weight:500;color:var(--fg)}
.section__head--tight{margin-bottom:clamp(28px,3.3vw,48px)}
.section__head--ruled{
  margin-bottom:0;padding-bottom:clamp(10px,1.1vw,16px);
  border-bottom:1px solid var(--line-strong);
  justify-content:space-between;
}
.section__head--ruled .note{
  font-size:var(--fs-meta);font-weight:400;color:var(--fg);
  margin-left:auto;align-self:flex-end;
}

.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:500;color:var(--fg);
  line-height:1.6;margin-bottom:clamp(20px,2.2vw,32px);
}

.lead{font-size:var(--fs-lead);line-height:1.8;color:var(--fg)}
.lead + .lead{margin-top:1.4em}
.body{font-size:var(--fs-body);line-height:1.8;color:var(--fg)}
.muted{color:var(--fg)}
.meta{font-size:var(--fs-meta);color:var(--fg)}

.stack{display:flex;flex-direction:column;gap:clamp(16px,1.6vw,24px)}
.stack--sm{gap:.1em}

/* utilities */
.mt-sm{margin-top:1.6em}
.mt-md{margin-top:1.8em}
.mb-md{margin-bottom:clamp(28px,3.3vw,48px)}
.field--full .field__ctrl{grid-column:1/-1}

/* ---------- Marks (brand graphics extracted from the comps) ----------
   The PNGs are pre-coloured (#cbcacd) with an alpha channel, so they
   composite correctly over the page background as plain backgrounds. */
.mark{
  justify-self:center;
  width:clamp(88px,13.5vw,195px);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.mark--asterisk{aspect-ratio:1/1;background-image:url("../img/mark-asterisk.png")}
.mark--arrow{aspect-ratio:190/336;width:clamp(44px,6.6vw,95px);background-image:url("../img/mark-arrow.png")}
.mark--loop{aspect-ratio:355/175;background-image:url("../img/mark-loop.png")}
.mark--bracket{aspect-ratio:366/292;width:clamp(84px,12.7vw,183px);background-image:url("../img/mark-bracket.png")}

/* ---------- Links --------------------------------------------------- */
.link{
  display:inline-block;font-size:var(--fs-body);color:var(--fg);
  border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .2s;
}
.link:hover{border-bottom-color:var(--fg-strong)}
.link-row{display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,32px);margin-top:clamp(14px,1.5vw,22px)}

/* ---------- Pillars (ESG overview) ---------------------------------- */
.pillars{display:flex;flex-direction:column;gap:clamp(56px,7vw,100px)}
.pillar__en{font-size:clamp(24px,2.22vw,32px);font-weight:300;line-height:1.2;color:var(--fg)}
.pillar__kr{margin-top:.5em;font-size:var(--fs-lead);font-weight:400;color:var(--fg)}
.pillar__list{margin-top:clamp(14px,1.5vw,22px);display:flex;flex-direction:column;gap:.15em}
.pillar__list li{font-size:var(--fs-body);color:var(--fg)}

/* ---------- Charter / step grids ------------------------------------ */
.grid-2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4.5vw,65px);row-gap:clamp(34px,4.2vw,60px);
}
.item__title{font-size:var(--fs-eyebrow);font-weight:500;color:var(--fg);margin-bottom:.35em}
.item__step{font-size:var(--fs-body);font-weight:400;color:var(--fg);margin-bottom:.35em}
.item__body{font-size:var(--fs-body);color:var(--fg);line-height:1.8}

.numbered{display:flex;flex-direction:column;gap:clamp(26px,3.1vw,44px)}
.numbered__num{font-size:var(--fs-meta);color:var(--fg);line-height:1.4;margin-bottom:.2em}

/* ---------- Roadmap table ------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.roadmap{width:100%;min-width:860px;border-collapse:collapse;text-align:left}
.roadmap th,.roadmap td{
  padding:clamp(16px,1.5vw,22px) clamp(12px,1.4vw,20px) clamp(16px,1.5vw,22px) 0;
  vertical-align:top;border-bottom:1px solid var(--line-soft);
}
.roadmap thead th{
  font-weight:300;color:var(--fg);font-size:clamp(17px,1.53vw,22px);line-height:1.3;
  border-bottom:1px solid var(--line);padding-bottom:clamp(10px,1.1vw,16px);
}
.roadmap thead th:first-child{font-size:var(--fs-body);font-weight:400}
.roadmap tbody th{font-weight:400;color:var(--fg);font-size:var(--fs-body);width:16%}
.roadmap tbody td{color:var(--fg);font-size:var(--fs-body);width:28%}
.roadmap .sub{display:block;color:var(--fg)}

/* ---------- Channel cards ------------------------------------------- */
.channels{display:flex;flex-direction:column;gap:clamp(44px,5.6vw,80px)}
.channel__key{font-size:var(--fs-body);color:var(--fg)}
.channel__name{margin-top:.2em;font-size:clamp(19px,1.67vw,24px);font-weight:500;color:var(--fg);line-height:1.4}
.deflist{margin-top:clamp(14px,1.4vw,20px);display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:.9em;row-gap:.25em}
.deflist dt{font-size:var(--fs-body);color:var(--fg);white-space:nowrap}
.deflist dd{font-size:var(--fs-body);color:var(--fg)}
.contact-list{display:grid;grid-template-columns:clamp(96px,10vw,150px) minmax(0,1fr);row-gap:.4em;column-gap:1em}
.contact-list dt{font-size:var(--fs-body);color:var(--fg)}
.contact-list dd{font-size:var(--fs-body);color:var(--fg)}

/* ---------- Form ---------------------------------------------------- */
.form-hero{padding-top:clamp(80px,12vw,176px);padding-bottom:clamp(32px,4vw,58px)}
.form-hero__inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.form-hero__en,.form-hero__kr{display:block}
.form-hero__en{font-size:clamp(34px,3.9vw,56px);font-weight:300;line-height:1.2;color:var(--fg)}
.form-hero__kr{margin-top:.2em;font-size:clamp(23px,2.5vw,36px);font-weight:500;color:var(--fg);line-height:1.3}

.tabs{border-top:1px solid var(--line-soft);padding-top:clamp(16px,1.8vw,26px)}
.tabs__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.tab{
  background:none;border:0;padding:0 0 clamp(8px,.9vw,13px);text-align:left;cursor:pointer;
  border-bottom:1px solid transparent;color:var(--fg);
}
.tab__key{display:block;font-size:var(--fs-body);line-height:1.5}
.tab__name{display:block;font-size:clamp(14.5px,1.18vw,17px);font-weight:500;line-height:1.5}
.tab[aria-selected="true"]{color:var(--fg-strong);border-bottom-color:var(--fg-strong)}
.tab:hover{color:var(--fg-strong)}
.tabs__meta{margin-top:clamp(20px,2.4vw,34px)}

.form-section{padding-top:clamp(48px,6vw,86px)}
.field{
  display:grid;grid-template-columns:clamp(100px,15vw,220px) minmax(0,1fr);
  gap:clamp(8px,1.4vw,20px);
  padding-block:clamp(16px,1.9vw,27px);
  border-bottom:1px solid var(--line-soft); /* 시안 실측 #8f8f92 — 입력창 테두리보다 옅다 */
}
.field--last{border-bottom:0}
.field__label{font-size:var(--fs-body);color:var(--fg);line-height:1.9}
.field__label .req{font-size:var(--fs-meta);color:var(--fg);margin-left:.4em}
.field__ctrl{min-width:0}
.hint{margin-top:.7em;font-size:var(--fs-meta);color:var(--fg)}

.input,.textarea{
  width:100%;background:transparent;border:1px solid var(--line);border-radius:0;
  padding:clamp(9px,.9vw,13px) clamp(10px,1vw,14px);
  font-size:var(--fs-body);line-height:1.7;color:var(--fg);
}
.input::placeholder,.textarea::placeholder{color:rgba(203,202,205,.6)}
.input:focus,.textarea:focus{outline:none;border-color:var(--fg-strong)}
.input--sm{max-width:clamp(220px,25vw,350px)}
.textarea{min-height:clamp(180px,16vw,232px);resize:vertical}

.choices{display:flex;flex-wrap:wrap;gap:clamp(8px,.9vw,13px)}
.choice{
  position:relative;
  display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  border:1px solid var(--line);padding:clamp(7px,.75vw,11px) clamp(12px,1.25vw,18px);
  font-size:var(--fs-body);color:var(--fg);transition:border-color .2s,color .2s;
}
.choice:hover{color:var(--fg-strong)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__dot{
  width:.72em;height:.72em;border-radius:50%;flex:none;
  border:1px solid var(--line-strong);background:transparent;transition:background .15s;
}
.choice:has(input:checked){border-color:var(--fg-strong);color:var(--fg-strong)}
.choice:has(input:checked) .choice__dot{background:var(--fg-strong)}
.choice:has(input:focus-visible){outline:2px solid var(--fg-strong);outline-offset:2px}
.choices--plain{justify-content:center;gap:clamp(24px,3vw,44px)}
.choices--plain .choice{border:0;padding:0}

.file-row{display:flex;align-items:center;gap:.8em;flex-wrap:wrap;font-size:var(--fs-body)}
.file-btn{
  border:1px solid var(--line);background:var(--fg-strong);color:#2f2f33;
  padding:clamp(5px,.55vw,8px) clamp(10px,1vw,14px);cursor:pointer;
  font-size:var(--fs-meta);font-weight:500;
}
.file-name{color:var(--fg)}

.captcha{
  display:flex;align-items:center;justify-content:center;
  width:clamp(180px,20vw,290px);height:clamp(54px,5.2vw,74px);
  border:1px dashed var(--line);font-size:var(--fs-meta);color:var(--fg);
}

.privacy-box{
  border:1px solid var(--line-soft);
  padding:clamp(20px,2.4vw,34px) clamp(18px,2.2vw,32px);
  margin-top:clamp(24px,2.8vw,40px);
}
.privacy-box ol{margin-top:1.1em;display:flex;flex-direction:column;gap:.15em;counter-reset:p}
.privacy-box li{font-size:var(--fs-body);color:var(--fg);counter-increment:p}
.privacy-box li::before{content:counter(p) ". "}
.agree{display:flex;align-items:center;gap:.8em;margin-top:clamp(20px,2.2vw,32px);cursor:pointer;font-size:var(--fs-body)}
.agree input{width:1.05em;height:1.05em;accent-color:var(--fg-strong);flex:none}

.actions{display:flex;justify-content:center;gap:clamp(10px,1.1vw,16px);margin-top:clamp(44px,5.6vw,80px)}
.btn{
  min-width:clamp(96px,8.6vw,124px);
  padding:clamp(10px,1vw,15px) clamp(18px,1.9vw,27px);
  border:1px solid var(--line-strong);background:transparent;color:var(--fg);
  font-size:var(--fs-body);font-weight:500;cursor:pointer;transition:background .2s,color .2s;
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn--primary{background:var(--fg-strong);color:#2f2f33}
.btn--primary:hover{background:#fff}
.form-status{margin-top:1.4em;text-align:center;font-size:var(--fs-body);color:var(--fg)}
.is-hidden{display:none !important}

/* ---------- Footer -------------------------------------------------- */
.site-footer{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:clamp(48px,6vw,86px) clamp(28px,3.2vw,46px);
}
.to-top{font-size:var(--fs-sec);font-weight:300;color:var(--fg);line-height:1}
.to-top:hover{color:var(--fg-strong)}
.copyright{font-size:var(--fs-meta);color:var(--fg)}

/* ---------- Responsive ---------------------------------------------- */
@media (max-width:1024px){
  .roadmap{min-width:720px}
}
@media (max-width:860px){
  .band{grid-template-columns:minmax(0,1fr)}
  .band__mark{display:none}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .tabs__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(14px,2vw,22px)}
}
@media (max-width:680px){
  /* 세로로 쌓이면 .gnb 가 shrink-to-fit 이 되어 줄바꿈 없이 넘쳤다. 폭을 채워 wrap 되게 한다. */
  .site-header{flex-direction:column;align-items:stretch;gap:10px}
  .gnb{justify-content:flex-start;width:100%;row-gap:6px}
  .field{grid-template-columns:minmax(0,1fr);gap:.4em}
  .contact-list{grid-template-columns:minmax(0,1fr);row-gap:0}
  .contact-list dd{margin-bottom:.6em}
  .deflist{grid-template-columns:minmax(0,1fr);row-gap:0}
  .deflist dd{margin-bottom:.5em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}