/* 고객문의 게시판.
   목록·글 페이지는 워커가 만들어 내므로 여기 클래스 이름은 worker/render.js 와 짝이다.
   글쓰기·비밀글 화면은 정적 파일이라 이 파일을 직접 읽는다. */
:root{
  --o1:#FF9B36; --o2:#FE705D; --grad:linear-gradient(135deg,#FF9B36,#FE705D);
  --ink:#241A15; --body:#3B2C24; --muted:#6E5C53; --faint:#8A776C; --dim:#A08E83;
  --bg:#FFFCF8; --surface:#fff; --tint:#FFF2E8; --tint2:#FFF7F1;
  --line:#F1E3D7; --line2:#F5EAE0; --brand:#C2551F; --red:#C0392B;
  --serif:'Nanum Myeongjo',serif;
  --sans:'Gothic A1',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body,h1,h2,h3,p,span,b,a,button,label{word-break:keep-all;overflow-wrap:anywhere}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:800;letter-spacing:-.025em}
a{color:var(--brand);text-decoration:none}
button,input,textarea{font-family:inherit;font-size:16px}
.hidden{display:none !important}
.in{max-width:820px;margin:0 auto;padding:0 20px}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.11em;color:var(--brand)}

/* 위아래 */
.qtop{position:sticky;top:0;z-index:40;height:58px;display:flex;align-items:center;
  background:rgba(255,252,248,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.qtop .in{display:flex;align-items:center;justify-content:space-between;width:100%}
.qtop .brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:800;font-size:15px}
.qtop .back{font-size:13.5px;font-weight:600;color:var(--muted)}
.qfoot{margin-top:60px;padding:34px 0;background:var(--ink)}
.qfoot .in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.qfoot span{font-size:14px;font-weight:800;color:#fff}
.qfoot .biz{flex-basis:100%;order:3;font-size:12.5px;line-height:1.8;color:#8B7B72;
  font-weight:400;word-break:keep-all}
.qfoot .biz span{font-size:12.5px;font-weight:400;color:#8B7B72;white-space:nowrap}
.qfoot nav{display:flex;gap:12px 18px;flex-wrap:wrap}
.qfoot nav a{font-size:13.5px;font-weight:600;color:#C9B9AE;white-space:nowrap}

/* 머리 */
.qhead{padding:44px 0 26px}
.qhead h1{margin-top:12px;font-size:clamp(25px,4vw,34px);line-height:1.4}
.qhead p{margin-top:14px;font-size:15px;line-height:1.85;color:var(--muted)}

/* 목록 */
.qbody{padding-bottom:20px}
.qtools{display:flex;gap:9px;align-items:center;margin-bottom:12px}
.qsearch{position:relative;flex:1}
.qsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%)}
.qsearch input{width:100%;height:48px;padding:0 14px 0 40px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);color:var(--ink)}
.qsearch input:focus{outline:2px solid var(--o1);outline-offset:-1px;border-color:transparent}
.qwrite{flex:none;display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;
  background:var(--grad);color:#fff;font-weight:800;font-size:15px;box-shadow:0 10px 22px rgba(254,112,93,.28)}
.qwrite:hover{color:#fff}
.qcount{font-size:13px;color:var(--dim);font-weight:600;margin-bottom:10px}

.qlist{border-top:1px solid var(--line)}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 4px;border-bottom:1px solid var(--line2);color:var(--ink)}
.qrow:hover{background:var(--tint2)}
.qt{font-size:15.5px;font-weight:600;line-height:1.5;display:flex;align-items:center;gap:7px;min-width:0}
.qt .lk{flex:none;color:var(--dim)}
.qm{flex:none;display:flex;align-items:center;gap:12px}
.qw{font-size:12.5px;color:var(--faint);font-weight:600}
.qd{font-size:12.5px;color:var(--dim)}
.qa{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;
  background:#EFEAE6;color:#6E5C53;white-space:nowrap}
.qa.on{background:#E6F5EC;color:#1F7A46}
.qnone{text-align:center;padding:52px 16px}
.qnone b{display:block;font-size:16px;font-weight:800}
.qnone p{margin-top:9px;font-size:14px;color:var(--faint)}
.qpager{display:flex;justify-content:center;gap:6px;margin-top:22px;flex-wrap:wrap}
.qpager button{min-width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);font-weight:700;cursor:pointer;color:var(--ink)}
.qpager button.on{background:var(--grad);color:#fff;border:0}
.qpager button[disabled]{opacity:.4;pointer-events:none}

/* 글 한 편 */
.qwrap{max-width:820px;margin:0 auto;padding:0 20px}
.qpost{padding:40px 0 0}
.qphead{padding-bottom:20px;border-bottom:1px solid var(--line)}
.qphead h1{margin-top:12px;font-size:clamp(22px,3.4vw,29px);line-height:1.45}
.qpmeta{margin-top:16px;display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  font-size:13px;color:var(--dim)}
.qpbody{padding-top:22px}
.qpbody p{margin-top:15px;font-size:15.5px;line-height:1.95;color:var(--body)}
.qpbody p:first-child{margin-top:0}
.qpbody b{font-weight:700;color:var(--ink)}
.qans{margin-top:32px;padding:26px 24px;border-radius:18px;background:var(--tint2);
  border:1px solid var(--line)}
.qahead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qahead b{font-size:14.5px;font-weight:800}
.qahead span{font-size:12.5px;color:var(--dim);margin-left:auto}
.qwait{margin-top:30px;padding:22px;text-align:center;border:1px dashed var(--line);
  border-radius:16px;font-size:14px;color:var(--faint)}
.qmore{margin-top:26px;text-align:center}
.qmore a{font-size:14.5px;font-weight:700}

/* 마지막 권유 */
.qcta{margin-top:50px;padding:40px 0;background:linear-gradient(120deg,var(--o1),var(--o2));color:#fff}
.qcta.in-post{margin-top:36px;border-radius:20px;padding:32px 26px}
.qcta h2{font-size:clamp(20px,3vw,26px);line-height:1.5}
.qcta p{margin-top:12px;font-size:14.5px;line-height:1.75;opacity:.95}
.qcta a{display:inline-block;margin-top:20px;padding:14px 30px;border-radius:999px;
  background:#fff;color:#D4593F;font-weight:800;font-size:15px}

/* 글쓰기 · 비밀글 열기 */
.qform{max-width:640px;margin:0 auto;padding:34px 20px 20px}
.qform h1{font-size:26px;line-height:1.42}
.qform .lead{margin-top:14px;font-size:15px;line-height:1.8;color:var(--muted)}
.qcard{margin-top:24px;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:22px 20px}
.qf{margin-bottom:20px}
.qf:last-child{margin-bottom:0}
.qf label{display:block;font-size:14px;font-weight:700;margin-bottom:9px}
.qf .req{color:var(--brand);font-size:12px;margin-left:5px}
.qf input[type=text],.qf input[type=password],.qf textarea{width:100%;padding:13px 14px;
  border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);
  line-height:1.75;min-height:48px}
.qf textarea{min-height:200px;resize:vertical}
.qf input:focus,.qf textarea:focus{outline:2px solid var(--o1);outline-offset:-1px;border-color:transparent}
.qf .note{margin-top:8px;font-size:12.5px;line-height:1.65;color:var(--faint)}
.qcheck{display:flex;gap:11px;align-items:flex-start;padding:15px;border-radius:14px;
  background:var(--tint2);border:1px solid var(--line2);margin-bottom:14px}
.qcheck input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:#FE705D}
.qcheck .t{font-size:13.5px;line-height:1.75;color:var(--body)}
.qcheck .t b{font-weight:800}
.qgo{width:100%;min-height:54px;margin-top:6px;border:0;border-radius:999px;background:var(--grad);
  color:#fff;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 12px 26px rgba(254,112,93,.3)}
.qgo[disabled]{opacity:.5;pointer-events:none;box-shadow:none}
.qerr{margin-top:14px;padding:13px 15px;border-radius:13px;background:#FCEDEA;
  border:1px solid #F3D6D0;color:var(--red);font-size:13.5px;font-weight:600}
.qdone{text-align:center;padding:56px 10px}
.qdone .mk{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center}
.qdone h2{font-size:22px;line-height:1.45}
.qdone p{margin-top:13px;font-size:15px;line-height:1.85;color:var(--muted)}
.qdone .btn{display:inline-block;margin-top:24px;padding:14px 26px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:14.5px}

@media (max-width:600px){
  .qrow{flex-direction:column;align-items:flex-start;gap:8px;padding:15px 2px}
  .qm{gap:10px}
  .qhead{padding:34px 0 20px}
  .qtools{flex-wrap:wrap}
  .qwrite{width:100%;justify-content:center}
}