:root{color-scheme:light;--bg:#eef6f8;--surface:rgba(255,255,255,.84);--surface-strong:#fff;--text:#0a1321;--muted:#5d6b7f;--muted-2:#8390a3;--line:rgba(105,123,146,.24);--line-strong:rgba(105,123,146,.34);--primary:#215cff;--primary-soft:rgba(33,92,255,.10);--danger:#d92d20;--danger-soft:rgba(239,68,68,.10);--warn:#b76b00;--warn-soft:rgba(245,158,11,.15);--good:#057a55;--good-soft:rgba(16,185,129,.12);--violet:#6d28d9;--violet-soft:rgba(124,58,237,.11);--shadow:0 20px 54px rgba(15,23,42,.10);--shadow-soft:0 12px 28px rgba(15,23,42,.07);--r-2xl:34px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;background:radial-gradient(circle at 12% 0%,rgba(33,92,255,.14),transparent 27rem),radial-gradient(circle at 92% 10%,rgba(245,158,11,.12),transparent 30rem),radial-gradient(circle at 45% 100%,rgba(14,165,233,.10),transparent 34rem),linear-gradient(180deg,#f7fbfd 0%,var(--bg) 48%,#f8fbfc 100%)}a{color:inherit;text-decoration:none}button,textarea{font:inherit}.site-shell{width:min(1060px,calc(100% - 40px));margin:0 auto}.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(18px);background:rgba(239,247,249,.78);border-bottom:1px solid var(--line)}.nav-inner{width:min(1060px,calc(100% - 40px));min-height:72px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.04em;white-space:nowrap}.brand-icon{width:42px;height:42px;border-radius:15px;display:block;object-fit:cover;box-shadow:0 12px 26px rgba(34,92,255,.14);border:1px solid var(--line);background:#fff}.brand-name{font-size:18px}.nav-links{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;font-weight:780}.nav-links a{padding:10px 12px;border-radius:999px;white-space:nowrap}.nav-links a:hover,.nav-links a[aria-current=page]{background:rgba(255,255,255,.76);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}.hero,.page-hero{padding:54px 0 28px}.hero.compact{padding-bottom:18px}.badge{width:fit-content;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:850}h1{margin:18px 0 14px;font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:-.075em}.page-title{font-size:clamp(40px,6vw,60px)}h2{margin:0 0 10px;font-size:clamp(27px,4vw,40px);line-height:1.06;letter-spacing:-.055em}h3{margin:0 0 7px;font-size:20px;letter-spacing:-.035em}p{margin:0;color:var(--muted);line-height:1.68;font-weight:560}.lead{max-width:760px;font-size:clamp(17px,2vw,20px);line-height:1.58}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface-strong);color:var(--text);font-weight:880;box-shadow:var(--shadow-soft);cursor:pointer}.button.primary{border-color:rgba(34,92,255,.24);background:#0b1320;color:#fff}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--shadow);overflow:hidden}.panel{padding:24px}.card-link{display:block;height:100%;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.card-link:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 24px 62px rgba(15,23,42,.12)}.section{padding:26px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.info-card{padding:22px;min-height:172px}.info-card.large{min-height:220px}.kicker{margin-bottom:10px;color:var(--primary);font-size:13px;font-weight:900;letter-spacing:-.02em}.big-icon{width:46px;height:46px;border-radius:17px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:950;margin-bottom:12px}.big-icon.danger{background:var(--danger-soft);color:var(--danger)}.big-icon.warn{background:var(--warn-soft);color:var(--warn)}.big-icon.good{background:var(--good-soft);color:var(--good)}.big-icon.violet{background:var(--violet-soft);color:var(--violet)}.notice{padding:16px 18px;border-radius:20px;background:var(--warn-soft);border:1px solid rgba(245,158,11,.22)}.notice.blue{background:var(--primary-soft);border-color:rgba(33,92,255,.18)}.policy-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}.policy-nav{position:sticky;top:94px;display:grid;gap:8px}.policy-nav a{padding:12px 13px;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid var(--line);color:var(--muted);font-weight:780}.policy-stack{display:grid;gap:14px}.policy-block{padding:22px}.check-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.check-list li{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid var(--line);color:var(--muted);line-height:1.55;font-weight:600}.check-list li:before{content:"";width:8px;height:8px;flex:0 0 auto;margin-top:8px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 5px var(--primary-soft)}.report-box{display:grid;gap:14px;padding:22px}.form-preview{width:100%;min-height:230px;resize:vertical;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.78);color:var(--text);padding:17px;line-height:1.55;outline:0}.inline-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.inline-list span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:800}.footer{margin-top:34px;padding:26px 0 42px;color:var(--muted);border-top:1px solid var(--line);font-size:13px}.footer-grid{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer a{text-decoration:underline;text-underline-offset:3px}@media(max-width:920px){.grid-4,.grid-3,.grid-2,.policy-layout{grid-template-columns:1fr}.nav-inner{align-items:flex-start;flex-direction:column;padding:14px 0}.nav-links{width:100%;overflow-x:auto;padding-bottom:3px}.hero,.page-hero{padding-top:34px}.policy-nav{position:static}}@media(max-width:540px){.site-shell,.nav-inner{width:min(100% - 28px,1060px)}h1,.page-title{font-size:39px}.actions{flex-direction:column}.button{width:100%}.card{border-radius:26px}}


.hero-title-one-line,
.page-title-one-line {
  white-space: nowrap;
  font-size: clamp(42px, 6.4vw, 88px);
  letter-spacing: -0.075em;
}
.page-title-one-line { font-size: clamp(40px, 5.4vw, 74px); }
.support-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.inquiry-list { display: grid; gap: 14px; }
.inquiry-card { padding: 22px; }
.inquiry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.inquiry-title { margin: 0; font-size: 22px; letter-spacing: -0.04em; }
.inquiry-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted-2); font-size: 13px; font-weight: 760; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,0.78); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 880; }
.tag.open { color: var(--primary); background: var(--primary-soft); }
.tag.answered { color: var(--good); background: var(--good-soft); }
.tag.report { color: var(--danger); background: var(--danger-soft); }
.inquiry-body { white-space: pre-wrap; margin-top: 14px; }
.reply-box { margin-top: 16px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,0.72); border: 1px solid var(--line); }
.reply-box strong { display: block; margin-bottom: 6px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.form-grid { display: grid; gap: 14px; }
.field { display: grid; gap: 8px; }
.field label { color: var(--text); font-weight: 850; letter-spacing: -0.02em; }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,0.78); color: var(--text); padding: 14px 15px; outline: none; font: inherit; }
.textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(33, 92, 255, 0.45); box-shadow: 0 0 0 4px rgba(33, 92, 255, 0.08); }
.empty-state { padding: 24px; text-align: center; }
.status-line { margin-top: 10px; font-size: 14px; color: var(--muted); font-weight: 700; }
@media (max-width: 920px) {
  .support-layout { grid-template-columns: 1fr; }
  .hero-title-one-line, .page-title-one-line { white-space: normal; font-size: 39px; }
}

/* v23_31 support board refresh */
.page-title-one-line {
  white-space: nowrap;
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: 1.02;
}
.hero-title-one-line {
  white-space: nowrap;
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1.02;
}
.support-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.support-board-wrap {
  padding: 24px;
}
.support-side-stack {
  display: grid;
  gap: 16px;
  align-self: start;
}
.side-guide {
  padding: 24px;
}
.muted-panel {
  background: rgba(255,255,255,0.72);
}
.check-list.compact li {
  padding: 14px 14px 14px 16px;
  font-size: 14px;
}
.board-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.board-summary {
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}
.board-list {
  display: grid;
  gap: 0;
  border-radius: 26px;
  background: rgba(255,255,255,0.58);
  border: 1px solid var(--line);
  overflow: hidden;
}
.inquiry-row {
  padding: 22px 22px 20px;
  background: rgba(255,255,255,0.7);
}
.inquiry-row + .inquiry-row {
  border-top: 1px solid var(--line);
}
.inquiry-row-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.inquiry-main {
  min-width: 0;
  flex: 1 1 auto;
}
.inquiry-side {
  flex: 0 0 auto;
}
.inquiry-date {
  color: var(--muted-2);
}
.inquiry-title {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.05em;
}
.inquiry-body {
  margin-top: 13px;
  color: var(--muted);
  line-height: 1.72;
  white-space: pre-wrap;
}
.inquiry-reply {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(33,92,255,0.07);
  border: 1px solid rgba(33,92,255,0.16);
}
.reply-arrow {
  color: var(--primary);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
}
.reply-label {
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.inquiry-reply p {
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
}
.button.subtle {
  min-height: 42px;
  padding: 0 14px;
  box-shadow: none;
  background: rgba(255,255,255,0.88);
}
.board-empty {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 36px 24px;
}
.pagination-shell {
  margin-top: 18px;
}
.pagination-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.82);
  color: var(--text);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.page-btn.active {
  background: #0b1320;
  color: #fff;
  border-color: rgba(11,19,32,0.86);
}
.page-btn:disabled {
  opacity: .45;
  cursor: default;
}
.support-form-card {
  padding: 26px;
}
.support-password-field {
  max-width: 360px;
}

@media (max-width: 920px) {
  .support-board-layout {
    grid-template-columns: 1fr;
  }
  .page-title-one-line,
  .hero-title-one-line {
    white-space: normal;
    font-size: clamp(36px, 10vw, 56px);
  }
}

@media (max-width: 640px) {
  .board-head,
  .inquiry-row-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .board-summary {
    text-align: left;
  }
  .inquiry-title {
    font-size: 23px;
  }
  .support-board-wrap,
  .side-guide,
  .support-form-card {
    padding: 20px;
  }
}


/* v23_32: keep pagination visible even when there is only one page */
.pagination-info {
  margin-top: 10px;
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.pagination-bar .page-btn:disabled {
  opacity: .5;
}

/* v23_37: support form errors, compact list density, and alignment polish */
.support-board-wrap {
  padding: 20px;
}
.support-board-layout {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
}
.side-guide {
  padding: 20px;
}
.board-head {
  margin-bottom: 12px;
}
.board-head h2 {
  font-size: clamp(25px, 3.2vw, 34px);
}
.board-summary {
  font-size: 13px;
  line-height: 1.35;
}
.board-list {
  border-radius: 22px;
}
.inquiry-row {
  padding: 17px 18px 16px;
}
.inquiry-row-top {
  gap: 12px;
}
.inquiry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  line-height: 1;
}
.inquiry-meta .tag {
  min-height: 26px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 12px;
}
.inquiry-date {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.inquiry-title {
  margin-top: 8px;
  font-size: 23px;
  line-height: 1.16;
}
.inquiry-body {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.58;
}
.inquiry-reply {
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
}
.reply-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 20px;
  padding-top: 1px;
  line-height: 1;
}
.reply-content {
  min-width: 0;
}
.reply-label {
  display: flex;
  align-items: center;
  height: 20px;
  margin: 0 0 3px;
  line-height: 1;
  font-size: 12px;
}
.inquiry-reply p {
  font-size: 14.5px;
  line-height: 1.55;
}
.button.subtle {
  min-height: 38px;
  padding: 0 13px;
  font-size: 14px;
}
.pagination-shell {
  margin-top: 14px;
}
.page-btn {
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 14px;
}
.pagination-info {
  margin-top: 8px;
}
.check-list.compact {
  gap: 8px;
}
.check-list.compact li {
  padding: 11px 12px;
  font-size: 13.5px;
  line-height: 1.48;
}
.status-line {
  white-space: pre-line;
  min-height: 20px;
}
.status-line[data-tone="error"] {
  color: var(--danger);
}
.status-line[data-tone="success"] {
  color: var(--good);
}
.support-form-card {
  padding: 22px;
}
.field {
  gap: 7px;
}
.input, .select, .textarea {
  padding: 13px 14px;
  border-radius: 16px;
}
.textarea {
  min-height: 150px;
}

@media (max-width: 920px) {
  .support-board-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .inquiry-meta {
    gap: 6px;
  }
  .inquiry-date {
    flex-basis: 100%;
  }
  .inquiry-row {
    padding: 16px;
  }
  .inquiry-title {
    font-size: 21px;
  }
}


/* v23_38: support body length counter and page-size polish */
.textarea-wrap {
  position: relative;
}
.textarea-wrap .textarea {
  padding-bottom: 42px;
}
.char-counter {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
}
.char-counter[data-over="true"] {
  color: var(--danger);
  border-color: rgba(217,45,32,0.25);
  background: rgba(239,68,68,0.08);
}
.pagination-info::after {
  content: " · 5개씩 보기";
}