/* @font-face:start — scripts/build-fonts.py 가 만듭니다. 손으로 고치지 마세요 */
@font-face {
  font-family: "Pretendard KR";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Pretendard-ui.woff2") format("woff2");
  unicode-range: U+0020-007E,U+00A0-00FF,U+2000-206F,U+20A0-20BF,U+2190-21FF,U+25A0-25FF,U+3000-303F,U+3130-318F,U+FF01-FF60,U+AC00-AC01,U+AC04,U+AC08,U+AC10-AC12,U+AC14,U+AC19,U+AC1C,U+AC70,U+AC74,U+AC78,U+AC80,U+AC83,U+AC8C,U+ACA0,U+ACB0,U+ACBC,U+ACC4,U+ACE0,U+ACF3,U+ACFC-ACFD,U+AD00,U+AD04,U+AD11,U+AD1C,U+AD6C,U+AD70,U+AD75,U+ADF8,U+ADFC,U+AE00,U+AE08,U+AE30,U+AE38,U+AE4C,U+AE5C,U+AEBC,U+AFD4,U+B04C,U+B05D,U+B098,U+B0A8,U+B0B4,U+B0B8,U+B0BC,U+B0C5,U+B108,U+B113,U+B118,U+B123,U+B192-B193,U+B204,U+B208,U+B20C,U+B290,U+B294,U+B298,U+B2A5,U+B2C8,U+B2E4,U+B2E8,U+B2EC,U+B2F4-B2F5,U+B2F9,U+B300,U+B354,U+B370,U+B3C4,U+B3D9,U+B418,U+B429,U+B450,U+B465,U+B4A4,U+B4DC,U+B4E4,U+B4ED,U+B4F1,U+B514,U+B530,U+B54C,U+B5A4,U+B77C-B77D,U+B78C,U+B798,U+B79C,U+B7A8,U+B7EC,U+B824-B825,U+B85C-B85D,U+B860,U+B864,U+B958,U+B974,U+B978,U+B97C,U+B984-B985,U+B9AC-B9AD,U+B9B0,U+B9B4,U+B9BC-B9BD,U+B9C1,U+B9C8,U+B9CC,U+B9DE,U+BA54,U+BA74,U+BA85,U+BAA8,U+BABB,U+BB34,U+BB36,U+BB38,U+BB3C,U+BC00,U+BC0F,U+BC14-BC15,U+BC18,U+BC1B-BC1C,U+BC30,U+BC84,U+BC88,U+BCC0,U+BCF4,U+BCF8,U+BCFC,U+BD05,U+BD07,U+BD10,U+BD59,U+BD80,U+BD88,U+BD99,U+BE0C,U+BE44,U+BE60-BE61,U+BE68,U+BE7C,U+BE80,U+C0AC,U+C0B0,U+C0B4,U+C0C1,U+C0C9,U+C0DD,U+C11C,U+C11E,U+C120,U+C12D,U+C138,U+C154,U+C18C,U+C190,U+C1A1,U+C1C4,U+C218,U+C21C,U+C2A4,U+C2B5,U+C2DC,U+C2E0,U+C2E4,U+C2F6,U+C4F0,U+C528,U+C52C,U+C544,U+C548-C54A,U+C54C,U+C558-C559,U+C57C,U+C598,U+C5B4,U+C5C5-C5C6,U+C5C9,U+C5D0,U+C5EC-C5ED,U+C5F0,U+C605,U+C608,U+C624,U+C628,U+C62C,U+C634,U+C640,U+C678,U+C694,U+C6A9,U+C6B0,U+C6B4,U+C6C0-C6C1,U+C6CC,U+C728,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774-C775,U+C778,U+C77C,U+C785,U+C788,U+C790-C791,U+C798,U+C7A0-C7A1,U+C7A5,U+C800-C801,U+C804,U+C808,U+C811,U+C815,U+C81C,U+C838,U+C84C,U+C870,U+C885,U+C88C,U+C8FC,U+C900,U+C904,U+C90D,U+C911,U+C988-C989,U+C99D,U+C9C0-C9C1,U+C9C4,U+C9D1,U+CABD,U+CC28,U+CC2C,U+CC2E,U+CC44,U+CC98,U+CCA8,U+CCB4,U+CCD0,U+CD08,U+CD5C,U+CD9C,U+CDA4,U+CDB0,U+CE58,U+CE60,U+CE74,U+CE78,U+CE90,U+CF1C,U+D06C,U+D070,U+D07C,U+D0A4,U+D0C0,U+D0D5,U+D0DD,U+D0ED,U+D130,U+D14C,U+D2B8,U+D2BC,U+D2C0,U+D30C,U+D31F,U+D338,U+D398,U+D39C,U+D3C9,U+D3ED,U+D3FC,U+D45C,U+D478,U+D504,U+D558,U+D55C,U+D560,U+D568-D569,U+D56D,U+D574,U+D5C8,U+D5E4,U+D600,U+D611,U+D615,U+D638,U+D648,U+D64D,U+D654-D655,U+D68C,U+D6C4,U+D6E8,U+D734,U+D76C,U+D788;
}
@font-face {
  font-family: "Pretendard KR";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Pretendard-rest.woff2") format("woff2");
  unicode-range: U+AC02-AC03,U+AC05-AC07,U+AC09-AC0F,U+AC13,U+AC15-AC18,U+AC1A-AC1B,U+AC1D-AC6F,U+AC71-AC73,U+AC75-AC77,U+AC79-AC7F,U+AC81-AC82,U+AC84-AC8B,U+AC8D-AC9F,U+ACA1-ACAF,U+ACB1-ACBB,U+ACBD-ACC3,U+ACC5-ACDF,U+ACE1-ACF2,U+ACF4-ACFB,U+ACFE-ACFF,U+AD01-AD03,U+AD05-AD10,U+AD12-AD1B,U+AD1D-AD6B,U+AD6D-AD6F,U+AD71-AD74,U+AD76-ADF7,U+ADF9-ADFB,U+ADFD-ADFF,U+AE01-AE07,U+AE09-AE2F,U+AE31-AE37,U+AE39-AE4B,U+AE4D-AE5B,U+AE5D-AEBB,U+AEBD-AFD3,U+AFD5-B04B,U+B04D-B05C,U+B05E-B097,U+B099-B0A7,U+B0A9-B0B3,U+B0B5-B0B7,U+B0B9-B0BB,U+B0BD-B0C4,U+B0C6-B107,U+B109-B112,U+B114-B117,U+B119-B122,U+B124-B191,U+B194-B203,U+B205-B207,U+B209-B20B,U+B20D-B28F,U+B291-B293,U+B295-B297,U+B299-B2A4,U+B2A6-B2C7,U+B2C9-B2E3,U+B2E5-B2E7,U+B2E9-B2EB,U+B2ED-B2F3,U+B2F6-B2F8,U+B2FA-B2FF,U+B301-B353,U+B355-B36F,U+B371-B3C3,U+B3C5-B3D8,U+B3DA-B417,U+B419-B428,U+B42A-B44F,U+B451-B464,U+B466-B4A3,U+B4A5-B4DB,U+B4DD-B4E3,U+B4E5-B4EC,U+B4EE-B4F0,U+B4F2-B513,U+B515-B52F,U+B531-B54B,U+B54D-B5A3,U+B5A5-B77B,U+B77E-B78B,U+B78D-B797,U+B799-B79B,U+B79D-B7A7,U+B7A9-B7EB,U+B7ED-B823,U+B826-B85B,U+B85E-B85F,U+B861-B863,U+B865-B957,U+B959-B973,U+B975-B977,U+B979-B97B,U+B97D-B983,U+B986-B9AB,U+B9AE-B9AF,U+B9B1-B9B3,U+B9B5-B9BB,U+B9BE-B9C0,U+B9C2-B9C7,U+B9C9-B9CB,U+B9CD-B9DD,U+B9DF-BA53,U+BA55-BA73,U+BA75-BA84,U+BA86-BAA7,U+BAA9-BABA,U+BABC-BB33,U+BB35,U+BB37,U+BB39-BB3B,U+BB3D-BBFF,U+BC01-BC0E,U+BC10-BC13,U+BC16-BC17,U+BC19-BC1A,U+BC1D-BC2F,U+BC31-BC83,U+BC85-BC87,U+BC89-BCBF,U+BCC1-BCF3,U+BCF5-BCF7,U+BCF9-BCFB,U+BCFD-BD04,U+BD06,U+BD08-BD0F,U+BD11-BD58,U+BD5A-BD7F,U+BD81-BD87,U+BD89-BD98,U+BD9A-BE0B,U+BE0D-BE43,U+BE45-BE5F,U+BE62-BE67,U+BE69-BE7B,U+BE7D-BE7F,U+BE81-C0AB,U+C0AD-C0AF,U+C0B1-C0B3,U+C0B5-C0C0,U+C0C2-C0C8,U+C0CA-C0DC,U+C0DE-C11B,U+C11D,U+C11F,U+C121-C12C,U+C12E-C137,U+C139-C153,U+C155-C18B,U+C18D-C18F,U+C191-C1A0,U+C1A2-C1C3,U+C1C5-C217,U+C219-C21B,U+C21D-C2A3,U+C2A5-C2B4,U+C2B6-C2DB,U+C2DD-C2DF,U+C2E1-C2E3,U+C2E5-C2F5,U+C2F7-C4EF,U+C4F1-C527,U+C529-C52B,U+C52D-C543,U+C545-C547,U+C54B,U+C54D-C557,U+C55A-C57B,U+C57D-C597,U+C599-C5B3,U+C5B5-C5C4,U+C5C7-C5C8,U+C5CA-C5CF,U+C5D1-C5EB,U+C5EE-C5EF,U+C5F1-C604,U+C606-C607,U+C609-C623,U+C625-C627,U+C629-C62B,U+C62D-C633,U+C635-C63F,U+C641-C677,U+C679-C693,U+C695-C6A8,U+C6AA-C6AF,U+C6B1-C6B3,U+C6B5-C6BF,U+C6C2-C6CB,U+C6CD-C727,U+C729-C73B,U+C73D-C73F,U+C741-C743,U+C745-C74B,U+C74D-C750,U+C752-C757,U+C759-C773,U+C776-C777,U+C779-C77B,U+C77D-C784,U+C786-C787,U+C789-C78F,U+C792-C797,U+C799-C79F,U+C7A2-C7A4,U+C7A6-C7FF,U+C802-C803,U+C805-C807,U+C809-C810,U+C812-C814,U+C816-C81B,U+C81D-C837,U+C839-C84B,U+C84D-C86F,U+C871-C884,U+C886-C88B,U+C88D-C8FB,U+C8FD-C8FF,U+C901-C903,U+C905-C90C,U+C90E-C910,U+C912-C987,U+C98A-C99C,U+C99E-C9BF,U+C9C2-C9C3,U+C9C5-C9D0,U+C9D2-CABC,U+CABE-CC27,U+CC29-CC2B,U+CC2D,U+CC2F-CC43,U+CC45-CC97,U+CC99-CCA7,U+CCA9-CCB3,U+CCB5-CCCF,U+CCD1-CD07,U+CD09-CD5B,U+CD5D-CD9B,U+CD9D-CDA3,U+CDA5-CDAF,U+CDB1-CE57,U+CE59-CE5F,U+CE61-CE73,U+CE75-CE77,U+CE79-CE8F,U+CE91-CF1B,U+CF1D-D06B,U+D06D-D06F,U+D071-D07B,U+D07D-D0A3,U+D0A5-D0BF,U+D0C1-D0D4,U+D0D6-D0DC,U+D0DE-D0EC,U+D0EE-D12F,U+D131-D14B,U+D14D-D2B7,U+D2B9-D2BB,U+D2BD-D2BF,U+D2C1-D30B,U+D30D-D31E,U+D320-D337,U+D339-D397,U+D399-D39B,U+D39D-D3C8,U+D3CA-D3EC,U+D3EE-D3FB,U+D3FD-D45B,U+D45D-D477,U+D479-D503,U+D505-D557,U+D559-D55B,U+D55D-D55F,U+D561-D567,U+D56A-D56C,U+D56E-D573,U+D575-D5C7,U+D5C9-D5E3,U+D5E5-D5FF,U+D601-D610,U+D612-D614,U+D616-D637,U+D639-D647,U+D649-D64C,U+D64E-D653,U+D656-D68B,U+D68D-D6C3,U+D6C5-D6E7,U+D6E9-D733,U+D735-D76B,U+D76D-D787,U+D789-D7A3;
}
/* @font-face:end */

/* ─────────────────────────────────────────────
   본론쓰 landing
   캐릭터 라인아트에서 가져온 것:
   굵은 갈색 외곽선 · 크림 바탕 · 둥근 모서리 · 번지지 않는 그림자
   ───────────────────────────────────────────── */

:root {
  --ink:        #3A2A21;   /* 캐릭터 외곽선 */
  --ink-2:      #6B564A;
  --ink-3:      #9A8579;

  --cream:      #FBF7F1;   /* 바탕 */
  --paper:      #FFFDF9;   /* 카드 */
  --paper-2:    #F6EFE4;   /* 후디 크림 */

  --brown:      #8B5E3C;   /* 반바지 */
  --brown-dk:   #6E4830;
  --tan:        #B07D54;   /* 신발 */
  --tan-lt:     #E4D3BE;
  --hl:         #EFD3A8;   /* 형광펜 */

  --line:       2.5px solid var(--ink);
  --line-thin:  2px solid var(--ink);
  --hard:       5px 5px 0 var(--ink);
  --hard-sm:    3px 3px 0 var(--ink);

  --r:          20px;
  --r-sm:       12px;

  /* 카드 한 장의 폭. 헤더·푸터·본문이 전부 이 폭에 맞춰 가운데로 섭니다. */
  --col:        720px;

  --bad:        #B2402F;
  --good:       #4E7A46;

  --font: "Pretendard KR", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:      #F0E4D6;
    --ink-2:    #C5B3A4;
    --ink-3:    #8E7D70;
    --cream:    #221B17;
    --paper:    #2D2420;
    --paper-2:  #382D26;
    --brown:    #D9A273;
    --brown-dk: #E8B98E;
    --tan:      #C08F62;
    --tan-lt:   #4A3B31;
    --hl:       #7A5B36;
    --bad:      #E8836F;
    --good:     #93C186;
  }
}
:root[data-theme="dark"] {
  --ink:      #F0E4D6;
  --ink-2:    #C5B3A4;
  --ink-3:    #8E7D70;
  --cream:    #221B17;
  --paper:    #2D2420;
  --paper-2:  #382D26;
  --brown:    #D9A273;
  --brown-dk: #E8B98E;
  --tan:      #C08F62;
  --tan-lt:   #4A3B31;
  --hl:       #7A5B36;
  --bad:      #E8836F;
  --good:     #93C186;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* 페이지 전체 스크롤바
   - PC: 제안 보내기 버튼과 같은 갈색으로 보이게
   - 모바일: 아예 감춤 (스크롤은 그대로 됩니다)
   글 입력칸 안쪽 스크롤바(.f__t)는 폭과 무관하게 항상 갈색입니다. */
@media (max-width: 880px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; display: none; }
}
@media (min-width: 881px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--brown) var(--paper-2);
  }
  html::-webkit-scrollbar { width: 13px; }
  html::-webkit-scrollbar-track { background: var(--paper-2); }
  html::-webkit-scrollbar-thumb {
    background: var(--brown);
    border: 3px solid var(--paper-2);
    background-clip: padding-box;
    border-radius: 999px;
  }
  html::-webkit-scrollbar-thumb:hover { background: var(--brown-dk); background-clip: padding-box; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* 종이결 — 아주 옅게 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .32;
  background-image:
    radial-gradient(circle at 18% 22%, var(--tan-lt) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 64%, var(--tan-lt) 0 1px, transparent 1.4px);
  background-size: 34px 34px, 47px 47px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--col) + 40px);
  margin: 0 auto;
  padding-inline: 20px;
  position: relative;
  z-index: 1;
}

/* 큰 모니터에서 전체화면으로 보면 한 단계 더 넓어집니다 */
@media (min-width: 1400px) {
  :root { --col: 820px; }
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px; top: 12px;
  z-index: 50;
  background: var(--paper);
  border: var(--line);
  border-radius: var(--r-sm);
  padding: 8px 14px;
}

/* ── 헤더 ───────────────────────────────── */
.top {
  border-bottom: var(--line-thin);
  background: var(--cream);
}
.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark {
  width: 30px; height: 25px;
  display: block;
  color: var(--ink);
  transform: rotate(-3deg);
}
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.top__ig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.top__ig:hover { background: var(--paper-2); color: var(--ink); }
.arr { width: 13px; height: 13px; }

/* 화면 폭과 관계없이 본문은 가운데 한 줄기로 */
.hero, .tabs, .cols, .reply { max-width: var(--col); margin-inline: auto; }

/* ── 히어로 ─────────────────────────────── */
.hero {
  padding: 46px 0 30px;
}
.hero__h {
  margin: 0 0 12px;
  font-size: clamp(28px, 5.4vw, 42px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.035em;
}
.hero__p {
  margin: 0;
  font-size: clamp(15px, 2.2vw, 17px);
  color: var(--ink-2);
  max-width: 44ch;
}

/* ── 탭 ─────────────────────────────────── */
/* PC·모바일 모두 한 번에 한 칸만 보여줍니다.
   #biz 에는 hidden 이 박혀 있어서 JS 가 붙기 전에도 깜빡이지 않습니다. */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin-bottom: 18px;
  border: var(--line-thin);
  border-radius: 999px;
  background: var(--paper-2);
}
.tabs__b {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.tabs__b.is-on { background: var(--ink); color: var(--cream); }
.tabs__b:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }

.cols { padding-bottom: 8px; }

/* ── 카드 ───────────────────────────────── */
.card {
  background: var(--paper);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--hard);
  padding: 26px 24px 24px;
}
.card[hidden] { display: none; }

.card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.card__h {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.tag {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px 4px;
  border: var(--line-thin);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  white-space: nowrap;
  transform: rotate(1.5deg);
}
.tag--alt {
  background: transparent;
  color: var(--ink-2);
  transform: rotate(-1.5deg);
}

.note {
  border-left: 3px solid var(--tan);
  padding: 2px 0 2px 14px;
  margin: 0 0 22px;
}
.note p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-2);
}
.note p:last-child { margin-bottom: 0; }

/* ── 폼 ─────────────────────────────────── */
.form { display: block; }
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.f { margin-bottom: 16px; }
.f2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.f__lrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.f__l {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.opt {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-3);
}
.count {
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.count.is-near { color: var(--bad); }

.f__i {
  width: 100%;
  font: inherit;
  font-size: 15px;
  /* 줄높이를 고정값으로 박아야 괄호·이모지 등 다른 글리프가 섞여도 글자가 안 내려앉음 */
  line-height: 1.5;
  /* "case" = 괄호·따옴표를 대문자 높이에 맞춰 올려주는 OpenType 기능 */
  font-feature-settings: "case" 1;
  color: var(--ink);
  background: var(--cream);
  border: var(--line-thin);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  transition: box-shadow .12s, border-color .12s, background .12s;
}
.f__i::placeholder { color: var(--ink-3); }
.f__i:hover { background: var(--paper); }
.f__i:focus {
  outline: none;
  background: var(--paper);
  box-shadow: var(--hard-sm);
}
input.f__i {
  height: 48px;
  padding-block: 0;
  line-height: 44px;   /* 테두리 뺀 안쪽 높이와 동일 → 입력 중에도 항상 정중앙 */
}
.f__t {
  resize: none;              /* 오른쪽 아래 늘리기 손잡이 제거 */
  overflow-y: auto;
  min-height: 128px;
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: var(--brown) transparent;
}
.f__t::-webkit-scrollbar { width: 12px; }
.f__t::-webkit-scrollbar-track { background: transparent; }
.f__t::-webkit-scrollbar-thumb {
  background: var(--brown);          /* 제안 보내기 버튼과 같은 갈색 */
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.f__t::-webkit-scrollbar-thumb:hover { background: var(--brown-dk); background-clip: padding-box; }
.f__i[aria-invalid="true"] {
  border-color: var(--bad);
}
.f__err {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--bad);
  font-weight: 600;
  display: none;
}
.f__err.is-on { display: block; }

/* ── 사진 첨부 ──────────────────────────── */
.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 88px;
  padding: 14px;
  text-align: center;
  border: 2px dashed var(--tan);
  border-radius: var(--r-sm);
  background: var(--cream);
  transition: background .12s, border-color .12s;
}
.drop__in {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop__t { font-size: 14px; font-weight: 700; }
.drop__s { font-size: 12px; color: var(--ink-3); }
.drop:hover, .drop.is-over { background: var(--paper-2); border-color: var(--brown); }
.drop.is-over { border-style: solid; }
.drop:focus-within { box-shadow: var(--hard-sm); border-style: solid; border-color: var(--ink); }
.drop.is-bad { border-color: var(--bad); }

.files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.files:empty { margin: 0; }
.files li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 11px;
  font-size: 13px;
  background: var(--cream);
  border: var(--line-thin);
  border-radius: 10px;
}
.files__n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files__s { flex: 0 0 auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.files__x {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  padding: 0;
  font: inherit; font-size: 16px; line-height: 1;
  color: var(--ink);
  background: transparent;
  border: var(--line-thin);
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.files__x:hover { background: var(--ink); color: var(--cream); }
.files__x:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }

/* 체크박스 — 체크 마크는 SVG 마스크라 어떤 배율에서도 정중앙 */
.chk {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 4px 0 20px;
  user-select: none;
}
.chk input {
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chk__box {
  flex: 0 0 auto;
  position: relative;
  width: 22px; height: 22px;
  border: var(--line-thin);
  border-radius: 7px;
  background: var(--cream);
  transition: background .12s, border-color .12s;
}
.chk__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.2' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.2' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  opacity: 0;
  transform: scale(.55);
  transition: opacity .12s, transform .12s;
}
.chk input:checked + .chk__box { background: var(--ink); border-color: var(--ink); }
.chk input:checked + .chk__box::after { opacity: 1; transform: scale(1); }
.chk input:focus-visible + .chk__box { box-shadow: var(--hard-sm); }
.chk__t { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.chk.is-bad .chk__box { border-color: var(--bad); }

/* 버튼 */
.btn {
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cream);
  background: var(--ink);
  border: var(--line);
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  box-shadow: var(--hard-sm);
  transition: transform .1s, box-shadow .1s, opacity .15s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--tan); outline-offset: 3px; }
.btn--biz { background: var(--brown); border-color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: var(--hard-sm); }

.fine {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.fine--mid { text-align: center; }
.status {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;   /* 전송 결과 안내는 가운데로 */
  min-height: 0;
}
.status.is-ok  { color: var(--good); }
.status.is-bad { color: var(--bad); }

/* ── 3일 안내 ───────────────────────────── */
.reply {
  margin: 40px auto 56px;
}
.reply__in {
  border: var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: var(--hard);
  padding: 24px 26px;
  text-align: center;
}
.reply__h {
  margin: 0 0 7px;
  font-size: clamp(18px, 3.2vw, 22px);
  font-weight: 700;
  letter-spacing: -.025em;
}
.reply__h b {
  font-weight: 800;
  background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%);
  padding: 0 2px;
}
.reply__p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 52ch;
  margin-inline: auto;
}

/* ── 푸터 ───────────────────────────────── */
.foot {
  border-top: var(--line-thin);
  padding: 18px 0 30px;
}
.foot__in {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.foot__b { font-weight: 800; color: var(--ink); }
.foot__d { color: var(--ink-3); }
.foot__in a { color: var(--ink-2); text-decoration: none; }
.foot__in a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__c { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }

/* ── 반응형 ─────────────────────────────── */
@media (max-width: 880px) {
  .hero { padding: 32px 0 22px; }
  .tabs__b { font-size: 14.5px; padding: 9px 12px; }
  .card { padding: 22px 18px 20px; box-shadow: var(--hard-sm); }
  .reply { margin: 32px auto 44px; }
  .reply__in { padding: 20px 18px; box-shadow: var(--hard-sm); }
}

@media (max-width: 420px) {
  .f2 { grid-template-columns: 1fr; gap: 0; }
  .wrap { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover, .btn:active { transform: none; }
}

/* 인쇄 시 사연 내용이 남지 않도록 */
@media print {
  .form, .tabs, .top__ig { display: none !important; }
}