/* ═══ 디자인 토큰 ═══ */
:root {
  --peach: #F29C68;
  --peach-md: #FDE4CF;
  --peach-dk: #F29C68;
  --light: #F2F2F2;
  --dark: #0D0D0D;
  --hdr-bg: #FEF4EA;
  --nav-bg: #FEF4EA;
  --surface-warm: #FFF7F0;
  --border: #FDE4CF;
  --card-bg: #fff;
  --proof: #c0392b;
  --font-title: 'Noto Serif KR', 'Playfair Display', serif;
}

/* ═══ 레이아웃 핵심 ═══ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  overflow: hidden;
}
body {
  background: #FFF6EE;
  font-family: 'Noto Sans KR', sans-serif;
}
/* 헤더 — 상단 고정 */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 200;
  background: #F29C68;
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 2.5vw, 48px);
  gap: 0;
}
/* 네비 — 사용 안 함 (hdr-nav로 통합) */
.nav { display:none; }
.nav-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: none;
  color: #999;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  transition: color .15s;
  white-space: nowrap;
}
.nav-btn:hover { color: #555; }
.nav-btn.on  { color: #0D0D0D; font-weight: 700; border-bottom-color: #0D0D0D; }


/* 페이지 영역 — 헤더 아래 전체 */
.page-section {
  display: none;
  position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  background: #FFF6EE;
  z-index: 10;
}
.page-section.active { display: block; }

/* 에디터 */
#page-editor {
  display: none;
  position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  flex-direction: row;
  gap: 12px;
  padding: 12px clamp(20px, 2.5vw, 48px);
  overflow: hidden;
  align-items: stretch;
  background: #FFF6EE;
}
#page-editor.show { display: flex; }

/* 에디터 컬럼 — 균등 분할 */
.col-l {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.col-r {
  display: none;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  padding-top: 8px;
}
.col-r.visible {
  display: flex;
}
/* 탭바 */
.tabs {
  flex: 0 0 auto;
  display: flex;
  background: #faf8f6;
  border-radius: 10px 10px 0 0;
  border: 1px solid #f0ebe7;
  border-bottom: none;
  overflow: hidden;
}
.tab {
  flex: 1;
  padding: 9px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  background: #faf8f6;
  color: #bbb;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.tab.on { background: #fff; color: var(--dark); border-bottom-color: #F29C68; }
.tab:disabled { opacity: .4; cursor: not-allowed; }
/* 에디터 박스 */
.ed-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0 0 10px 10px;
  border: 1px solid #f0ebe7;
  border-top: none;
  overflow: hidden;
}
/* 에디터 탭바 */
.ed-tabs{
  flex:0 0 auto;display:flex;
  background:#fff;border-bottom:1px solid #f0ebe7;
  padding:0;gap:0;
  border-radius:10px 10px 0 0;overflow:hidden;
  max-width:100%;width:100%;
}
.ed-tab{
  flex:1;text-align:center;
  padding:11px 8px;font-size:14px;font-weight:600;
  color:#dbb89e;background:transparent;border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:all .15s;
}
.ed-tab:hover{color:#c9956e;}
.ed-tab.on{color:#F29C68;font-weight:700;border-bottom-color:#F29C68;background:#fff;}
/* 입력 방법 선택 호버 */
#writeChoiceOverlay > div:hover{background:#FFF8F2!important;}
/* 어휘연습 카드 */
.vocab-card:hover{border-color:#F29C68;background:#FFF8F2!important;}
/* 파일 드롭존 */
#fileDropZone.drag-over{border-color:#F29C68;background:#FFF8F2;box-shadow:0 0 20px rgba(242,156,104,0.15);}
/* 에디터 탭 패널 */
.ed-tab-panel{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden;}
.ed-tab-panel.active{display:flex;}
/* 미리보기 패널 */
.pv-panel{display:none;flex:1;min-height:0;overflow-y:auto;padding:16px;background:#fff;border-radius:0 0 10px 10px;border:1px solid #f0ebe7;border-top:none;}
.pv-panel.active{display:block;}
.pv-pre{white-space:pre-wrap;word-break:break-all;font-size:15px;line-height:2;font-family:var(--font-body);margin:0;}
/* 가이드라인 바 */
.gl-bar {
  flex: 0 0 auto;
  padding: 0 14px;
  height: 40px;
  background: #faf8f6;
  border-bottom: 1px solid #f0ebe7;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gl-bar select {
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid #ede4dc;
  border-radius: 8px;
  background: #fafaf8;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #555;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23bbb'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.gl-bar select:focus { border-color: #F29C68; }
/* 가이드라인 태그 */
.gl-tag{
  display:inline-block;padding:3px 9px;
  border-radius:10px;font-size:11px;font-weight:600;
  font-family:'Noto Sans KR',sans-serif;
}
.gl-tag.off{
  background:#FDE4CF;color:#a07050;
}
.gl-tag.on{
  background:#F29C68;
  color:#fff;font-weight:700;
}
.gl-pill-btn {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #ede4dc;
  border-radius: 8px;
  background: #fafaf8;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.gl-pill-btn:hover { background: #FFF2E6; border-color: #F29C68; color: #c0714a; }
.gl-pill-btn.accent {
  border-color: #F29C68;
  color: #c0714a;
  font-weight: 700;
  background: #fff8f5;
}
.gl-pill-btn.accent:hover { background: #F29C68; color: #fff; }
.gl-divider { width: 1px; height: 18px; background: #ede4dc; margin: 0 2px; flex-shrink: 0; }
.gl-status {
  height: 22px;
  padding: 0 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.gl-status.off { background: #f5f5f5; color: #bbb; }
.gl-status.on  { background: #fff0eb; color: #d4714a; }
/* 입력 패널 */
#pi {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* textarea */
#ta, .ed-ta {
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 20px 24px;
  font-family: 'Noto Serif KR', Georgia, serif;
  font-size: 17px;
  line-height: 2;
  color: #2d2d2d;
  border: none;
  outline: none;
  resize: none;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}
#ta::placeholder {
  color: #d4b8a8;
  font-style: normal;
  font-size: 17px;
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 2.4;
  white-space: pre-line;
}
/* 하단 상태바 */
.ed-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  height: 38px;
  font-size: 12px;
  color: #c8bdb5;
  font-weight: 500;
  background: #fff;
  border-top: 1px solid #f0e8e0;
}
.ed-foot span {
  padding: 0 12px;
  border-right: 1px solid #f0e8e0;
}
.ed-foot span:first-child { padding-left: 0; }
.ed-foot span:last-of-type { border-right: none; }
/* 파일업로드 버튼 (하단바) */
.ed-foot-upload {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b08060;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-family: 'Noto Sans KR', sans-serif;
}
.ed-foot-upload:hover { background: #FFF2E6; color: #c0714a; }
.ed-foot-upload svg { flex-shrink: 0; stroke: currentColor; }
.ed-foot-divider { width: 1px; height: 16px; background: #e8e0db; margin: 0 6px; flex-shrink: 0; }
/* 드래그&드롭 오버레이 */
.ta-dragover { background: #FFF2E6 !important; outline: 2px dashed #F29C68 !important; outline-offset: -4px; }
.drag { background: #FFF2E6 !important; border-color: #F29C68 !important; }
/* ── 헤더 ── */
.hdr-logo{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;flex-shrink:0;
}
.hdr-nav{
  display:flex;align-items:center;gap:4px;
  margin-left:clamp(16px, 2vw, 36px);
  height:100%;
}
.hdr-nav .nav-btn{
  padding:0 clamp(10px, 1.2vw, 22px);
  height:100%;
  font-size:clamp(12px, 0.9vw, 15px);
  font-weight:500;
  background:none;
  color:rgba(255,255,255,0.5);
  border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
  font-family:var(--font-title);
  transition:color .15s;
  white-space:nowrap;
  display:flex;align-items:center;
}
.hdr-nav .nav-btn:hover{ color:rgba(255,255,255,0.8); }
.hdr-nav .nav-btn.on{ color:#fff; font-weight:700; border-bottom-color:#fff; }

/* 헤더 우측 */
.hdr-right{
  display:flex;align-items:center;gap:clamp(6px, 0.8vw, 14px);
  margin-left:auto;flex-shrink:0;
}

/* 이용권 뱃지 — 헤더 내 */
.ticket-badge{
  padding:5px 14px;
  border-radius:50px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;
  transition:all .15s;
  border:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.2);
  color:#fff;
  white-space:nowrap;
}
.ticket-badge.active{
  background:#fff;
  border-color:transparent;
  color:#F29C68;
  font-weight:700;
}
.ticket-badge:hover{ transform:translateY(-1px); }

/* 로그인 버튼 */
.login-btn{
  padding:6px 18px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  font-family:'Noto Sans KR',sans-serif;
  background:#fff;
  color:#0D0D0D;
  border:none;
  cursor:pointer;
  letter-spacing:.2px;
  transition:all .15s;
  white-space:nowrap;
}
.login-btn:hover{
  background:rgba(255,255,255,0.85);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.login-btn:active{ transform:translateY(0);box-shadow:none; }
.login-btn span{ position:relative;z-index:1; }


/* 후원 버튼 */
.donate-btn{
  padding:5px 14px;font-size:12px;font-weight:700;
  background:#fff;
  color:#F29C68;border:none;border-radius:20px;
  cursor:pointer;font-family:inherit;
  transition:all .15s;white-space:nowrap;
}
.donate-btn:hover{filter:brightness(0.95);transform:scale(1.03);}

/* 후원 모달 */
.donate-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.5);
  justify-content:center;align-items:center;
}
.donate-overlay.show{display:flex;}
.donate-modal{
  background:#fff;border-radius:20px;padding:36px 32px;
  max-width:420px;width:90%;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  position:relative;
}
.donate-close{
  position:absolute;top:14px;right:16px;
  background:none;border:none;font-size:20px;
  cursor:pointer;color:#ccc;
}
.donate-close:hover{color:#888;}
.donate-amount{
  padding:10px 16px;font-size:13px;font-weight:600;
  background:#fff;border:1.5px solid #e8e0db;border-radius:10px;
  cursor:pointer;font-family:inherit;color:#888;transition:all .15s;
}
.donate-amount:hover{border-color:#F29C68;color:#666;}
.donate-amount.on{background:#F29C68;color:#fff;border-color:transparent;}

.fb-type-btn{
  padding:8px 14px;font-size:12px;font-weight:600;
  background:#fff;border:1.5px solid #e8e0db;border-radius:10px;
  cursor:pointer;font-family:inherit;color:#888;transition:all .15s;
}
.fb-type-btn:hover{border-color:#F29C68;color:#666;}
.fb-type-btn.on{background:#F29C68;color:#fff;border-color:transparent;}

.hdr-icon{
  width:28px;height:28px;border-radius:8px;
  background:rgba(255,255,255,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#fff;
  font-family:var(--font-title);
}
.hdr-title{font-size:17px;font-weight:800;letter-spacing:-.3px;color:#FFFFFF;}
/* 진행률 바 — 에디터 탭 내부 (inline style 보완) */
#pw-bar{transition:width .4s;}
/* 헤더 버튼들 */
.hdr-btn{
  padding:6px 14px;border-radius:7px;font-size:12px;font-weight:700;
  background:#FEF4EA;color:#d4845a;border:1px solid #FDE4CF;
  letter-spacing:.2px;
}
.hdr-btn:hover{background:#FDE4CF;color:#a05a30;}
.hdr-btn-primary{
  padding:7px 18px;border-radius:7px;font-size:13px;font-weight:800;
  background:#F29C68;
  color:#fff;border:none;
  box-shadow:0 4px 16px rgba(242,182,160,.3);
  letter-spacing:.2px;
}
.hdr-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(232,149,109,.45);
}
.hdr-btn-primary.ld{opacity:.7;pointer-events:none;}
.hdr-btn-primary .spin{
  display:inline-block;width:12px;height:12px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;margin-right:6px;
}

/* ── 서브 내비 ── */





/* 페이지 전환 */


/* ── 탭 ── */




.tab .bdg{
  position:absolute;top:6px;right:6px;
  background:var(--peach-dk);color:#fff;
  border-radius:10px;padding:1px 6px;font-size:9px;font-weight:800;
}

/* ── 에디터 박스 ── */


/* 가이드라인 바 */

.gl-label{font-size:13px;font-weight:700;color:#aaa;letter-spacing:.5px;}

/* textarea */






/* ── 오른쪽 패널 ── */
.crd{
  font-size:13px;
  background:var(--card-bg);
  border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;
}
.crd-dk{
  background:linear-gradient(135deg,#F29C68,#FDE4CF);color:#fff;
  border-radius:12px;
}

/* ── 결과 카드 ── */
#sc{padding:16px;}
.sc-title{font-size:11px;font-weight:800;color:var(--peach-md);letter-spacing:.8px;margin-bottom:10px;}
.sc-stat{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;
}
.sc-stat-item{
  flex:1;min-width:60px;
  background:linear-gradient(135deg,#fff9f7,#fef0eb);
  border:1px solid #FDE4CF;border-radius:10px;
  padding:10px 8px;text-align:center;
}
.sc-stat-num{
  font-family:var(--font-title);
  font-size:22px;font-weight:700;color:var(--peach-dk);
}
.sc-stat-lbl{font-size:10px;color:#aaa;margin-top:2px;}

/* 제안 필터 */
#sf{
  display:flex;gap:6px;flex-wrap:wrap;padding:12px 14px;
  border-bottom:1px solid var(--border);background:#fafaf8;
}
.sf-btn{
  padding:5px 11px;border-radius:20px;font-size:11px;font-weight:700;
  background:#f0ede8;color:#aaa;border:1.5px solid transparent;transition:all .15s;
}
.sf-btn.on{background:var(--peach-dk);color:#fff;border-color:var(--peach-dk);}

/* 제안 목록 */
#sl{padding:10px;}

/* ── 진행률 ── */
#dp{padding:10px 14px;}
.dp-bar-bg{height:6px;background:#f0ede8;border-radius:3px;overflow:hidden;margin-bottom:6px;}
.dp-bar{height:100%;background:linear-gradient(90deg,var(--peach-dk),var(--peach));border-radius:3px;transition:width .5s;}

/* ── 체크 카운트 ── */
#sw{padding:10px 14px;background:#fafaf8;border-radius:8px;font-size:12px;color:#aaa;}

/* ── 로딩 ── */
#lc{
  padding:32px;text-align:center;
  background:var(--card-bg);border:1.5px solid var(--border);border-radius:12px;
}
.lc-spin{
  width:40px;height:40px;border:3px solid #f5ede8;border-top-color:var(--peach-dk);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px;
}

/* ── 에러 ── */
#ec{
  padding:14px 16px;background:#fff5f5;
  border:1.5px solid #fcc;border-radius:10px;
  font-size:12px;color:var(--proof);
}

/* ── 토스트 ── */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:#F29C68;color:#fff;
  padding:12px 22px;border-radius:30px;
  font-size:13px;font-weight:600;
  z-index:9999;pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  animation:toastIn .3s ease, toastOut .3s ease 2.7s forwards;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(12px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(8px);}}

/* ── 모달 ── */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:500;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.modal-box{
  background:#fff;border-radius:20px;padding:32px;
  max-width:480px;width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}

/* ── 서비스소개 카드 ── */
.about-card{
  background:#fff;border:1px solid #f0ebe7;border-radius:16px;
  padding:28px;margin-bottom:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}

/* ── 유틸 ── */
.hidden{display:none!important;}
.spin{display:inline-block;width:14px;height:14px;
  border:2px solid rgba(0,0,0,.1);border-top-color:var(--peach-dk);
  border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ── 비교분석 Split-View ── */
#pd { transition: none; }
#pd.hidden { display: none !important; }
.diff-split-pane {
  font-size:14px;line-height:2.1;white-space:pre-wrap;
  word-break:keep-all;font-family:'Noto Serif KR',Georgia,serif;color:#333;
}
.diff-tag-del {
  background:#ffeaea;color:#c0392b;
  text-decoration:line-through;border-radius:3px;
  padding:0 2px;font-weight:600;
}
.diff-tag-ins {
  background:#eafaf1;color:#1e8449;
  border-radius:3px;padding:0 2px;
  font-weight:600;border-bottom:2px solid #27ae60;
}

/* ── 반응형 ── */

/* 대형 모니터 (1400px+) */
@media(min-width:1400px){
  .hdr{ padding:0 48px; }
  .hdr-nav{ gap:6px; }
  .hdr-nav .nav-btn{ padding:0 22px;font-size:14.5px; }
  #page-editor{ padding:12px 48px;gap:16px; }
  .col-l,.col-r,.ed-tabs{ max-width:100%; }
  #ta{ font-size:17px; }
  .ed-tab{ font-size:14.5px; }
  .ed-foot{ font-size:12.5px; }
  .run-btn{ font-size:15.5px;height:50px; }
  .pv-pre{ font-size:16px; }
  .page-inner{ padding:56px 48px; }
  .page-header h2{ font-size:32px; }
  .page-header p{ font-size:15px; }
  .card{ padding:28px; }
  .card-title{ font-size:17px; }
  .price-grid{ gap:18px; }
  .quiz-card{ padding:36px;min-height:280px; }
  .quiz-option{ padding:16px 20px;font-size:15px; }
  .voucher-hero{ padding:36px; }
  .voucher-hero .count{ font-size:56px; }
}
/* 초대형 모니터 (1800px+) */
@media(min-width:1800px){
  .hdr{ padding:0 64px; }
  .hdr-nav .nav-btn{ padding:0 28px;font-size:15px; }
  #page-editor{ padding:14px 64px;gap:20px; }
  #ta{ font-size:18px; }
  .ed-tab{ font-size:15px;padding:12px 10px; }
  .ed-foot{ font-size:13px; }
  .gl-bar{ height:42px; }
  .gl-bar select,.gl-pill-btn{ font-size:14px;height:32px; }
  .run-btn{ font-size:16px;height:52px; }
  .pv-pre{ font-size:17px; }
  .page-inner{ padding:64px 64px; }
  .page-header h2{ font-size:36px; }
  .card{ padding:32px; }
  .quiz-card{ padding:40px; }
}

/* 중형 모니터 (1100~1399px) — 기본 */

/* 소형 모니터 (900~1099px) */
@media(max-width:1100px){
  .hdr-nav .nav-btn{ padding:0 10px;font-size:12px; }
  .col-l,.col-r,.ed-tabs{ max-width:100%; }
}

/* 태블릿 (768~899px) */
@media(max-width:900px){
  .hdr{ height:52px;padding:0 14px; }
  .hdr-nav{ margin-left:16px;gap:0; }
  .hdr-nav .nav-btn{ padding:0 8px;font-size:11px; }
  .ticket-badge{ font-size:10px;padding:4px 10px; }
  .login-btn{ padding:5px 12px;font-size:11px; }
  .page-section{ top:52px; }
  #page-editor{ top:52px;flex-direction:column;gap:8px;padding:8px 10px; }
  .col-l{ flex:1;max-width:100%; }
  .col-r{ width:100%!important;max-width:100%;max-height:none;flex-shrink:0; }
  .ed-tabs{ max-width:100%; }
  .ed-tab{ padding:8px 10px;font-size:11px; }
  /* 서비스소개 2열→1열 */
  .page-section [style*="grid-template-columns:repeat(2"]{
    grid-template-columns:1fr!important;
  }
}

/* 햄버거 버튼 — 데스크탑에서 숨김 */
.hamburger-btn{ display:none; }

/* 스마트폰 (max-width:640px) */
@media(max-width:640px){

  /* ═══ 햄버거 메뉴 ═══ */
  .hamburger-btn{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:4px;width:36px;height:36px;padding:0;
    background:none;border:none;cursor:pointer;
    order:3;margin-left:8px;flex-shrink:0;
  }
  .hamburger-btn span{
    display:block;width:18px;height:2px;
    background:#fff;border-radius:1px;
    transition:transform .2s,opacity .2s;
  }
  .hamburger-btn.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .hamburger-btn.active span:nth-child(2){ opacity:0; }
  .hamburger-btn.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* ═══ 헤더 — 1줄 + 드롭다운 ═══ */
  .hdr{
    height:56px;flex-wrap:wrap;padding:0 12px;gap:0;
  }
  .hdr-logo{ order:1; }
  .hdr-right{ order:2;margin-left:auto; }
  .hdr-nav{
    order:4;width:100%;margin-left:0;margin-top:0;
    display:none;flex-direction:column;gap:0;
    border-top:1px solid rgba(255,255,255,0.2);
    padding:0;background:#F29C68;overflow:hidden;
  }
  .hdr-nav.mobile-open{ display:flex; }
  .hdr-nav .nav-btn{
    padding:14px 16px;font-size:14px;flex-shrink:0;
    text-align:left;width:100%;justify-content:flex-start;
    height:auto;border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .hdr-nav .nav-btn:last-child{ border-bottom:none; }

  /* ═══ 페이지 영역 ═══ */
  .page-section{ top:56px; }
  #page-editor{ top:56px;flex-direction:column;gap:6px;padding:6px 8px; }

  /* ═══ 에디터 탭바 ═══ */
  .ed-tabs{
    max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    border-radius:8px 8px 0 0;
  }
  .ed-tabs::-webkit-scrollbar{ display:none; }
  .ed-tab{ padding:10px 14px;font-size:12px;flex-shrink:0;min-height:40px; }

  /* ═══ 에디터 — 세로 스택 ═══ */
  .col-l{ min-height:40vh;max-width:100%; }
  .col-r{
    width:100%!important;max-width:100%;
    max-height:none;flex-shrink:0;
    border-top:1px solid #f0e8e0;
  }
  .ed-box{ border-radius:0 0 8px 8px; }

  /* ═══ 가이드라인 바 ═══ */
  .gl-bar{
    height:38px;padding:0 10px;gap:4px;
    overflow-x:auto;flex-wrap:nowrap;
  }
  .gl-bar select{ max-width:100px;font-size:11px; }
  .gl-bar label{ font-size:11px; }
  .gl-bar .gl-tag{ font-size:10px;padding:4px 10px;min-height:28px;display:inline-flex;align-items:center; }

  /* ═══ textarea ═══ */
  #ta{ font-size:14px;line-height:1.8;padding:12px; }
  #ta::placeholder{ font-size:14px; }

  /* ═══ 하단 상태바 ═══ */
  .ed-foot{ height:30px;padding:0 10px;font-size:10px; }
  .ed-foot span{ padding:0 6px; }

  /* ═══ 검수 버튼 ═══ */
  .run-btn{ font-size:14px;padding:14px; }

  /* ═══ 결과 패널 ═══ */
  .pv-panel{ padding:12px;border-radius:0 0 8px 8px; }
  .pv-pre{ font-size:13px; }
  .sg-list{ max-height:35vh; }

  /* ═══ 그리드 → 1열 변환 ═══ */
  [style*="grid-template-columns:repeat(3"]{ grid-template-columns:1fr!important; }
  [style*="grid-template-columns:repeat(2"]{ grid-template-columns:1fr!important; }
  [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr!important; }
  .price-grid{ grid-template-columns:1fr!important; }
  [style*="gap:20px"]{ gap:12px!important; }

  /* ═══ 히어로 & 큰 패딩 축소 ═══ */
  [style*="padding:72px"]{ padding:36px 16px!important; }
  [style*="padding:48px"]{ padding:24px 14px!important; }
  [style*="padding:32px"]{ padding:20px 16px!important; }
  [style*="padding:28px 32px"]{ padding:18px 14px!important; }
  .page-section [style*="padding:28px"]{ padding:18px 14px!important; }
  #fileDropZone{ padding:24px 16px!important; }
  .page-section [style*="margin-bottom:48px"]{ margin-bottom:24px!important; }
  .page-section [style*="margin-bottom:40px"]{ margin-bottom:20px!important; }

  /* ═══ 폰트 크기 축소 ═══ */
  [style*="font-size:32px"]{ font-size:22px!important; }
  [style*="font-size:36px"]{ font-size:26px!important; }
  .page-section [style*="font-size:22px"][style*="font-weight:700"]{ font-size:18px!important; }
  .page-section [style*="font-size:28px"]{ font-size:20px!important; }
  #cf-score{ font-size:36px!important; }
  #welcomeScreen h1{ font-size:22px!important; }
  #welcomeScreen{ padding:16px!important; }

  /* ═══ 모달 모바일 대응 ═══ */
  .donate-modal{ max-width:100%!important;width:92%!important;padding:24px 18px!important;border-radius:14px!important; }
  .modal-box{ max-width:100%!important;width:92%!important;padding:20px 16px!important;border-radius:14px!important; }
  .donate-overlay{ padding:12px!important; }
  .modal-overlay{ padding:12px!important; }

  /* ═══ 스테이지 네비 ═══ */
  .stage-nav-wrap{ flex-wrap:wrap;gap:6px; }
  .stage-nav-wrap button{ font-size:11px;padding:6px 12px; }

  /* ═══ 피드백 카드 ═══ */
  #feedbackCard{ font-size:13px; }

  /* ═══ 터치 타겟 확대 ═══ */
  .ticket-badge{ font-size:10px;padding:4px 10px; }
  .login-btn{ padding:8px 14px;font-size:12px;border-radius:6px; }
  .donate-btn{ font-size:12px;padding:8px 14px;min-height:36px; }
  .para-cat{ padding:10px 16px!important;font-size:13px!important; }
  .cat-filter button{ padding:8px 14px!important;font-size:13px!important; }

  /* ═══ 페이지 공통 ═══ */
  .page-inner{ padding:24px 14px; }
  .page-header h2{ font-size:22px; }
  .about-card{ padding:20px; }
  .card{ padding:18px; }
  .voucher-hero{ padding:20px; }
  .voucher-hero .count{ font-size:40px; }
  .voucher-input{ min-width:0; }

  /* ═══ 커뮤니티 & 기타 ═══ */
  .comm-write-bar{ padding:12px 14px!important; }
  .biz-footer-unified{ padding:18px 14px!important;font-size:11px!important;line-height:1.8!important;border-radius:12px!important; }
  .toast{ max-width:90vw!important;font-size:12px!important;padding:10px 18px!important; }
}

/* 초소형 스마트폰 (max-width:380px) */
@media(max-width:380px){
  .hdr-logo .hdr-title{ font-size:14px; }
  .hdr-nav .nav-btn{ padding:12px 14px;font-size:13px; }
  .login-btn{ padding:4px 10px;font-size:10px; }
  .ticket-badge{ padding:3px 8px;font-size:9px; }
  #ta{ font-size:13px;padding:10px; }
  .ed-tab{ font-size:11px;padding:8px 10px; }
  .page-inner{ padding:16px 10px; }
  .donate-modal,.modal-box{ width:96%!important;padding:18px 12px!important; }
}

/* ── 패러프레이징 ── */
.para-cat{
  padding:8px 16px;font-size:13px;font-weight:600;
  background:#fff;border:1px solid #e8e0db;border-radius:20px;
  cursor:pointer;font-family:inherit;color:#999;transition:all .15s;
}
.para-cat:hover{color:#666;border-color:#F29C68;}
.para-cat.on{background:#F29C68;color:#fff;border-color:transparent;}
.para-score-item{flex:1;text-align:center;}
.para-score-label{font-size:11px;color:#aaa;margin-bottom:6px;}
.para-score-bar{height:6px;background:#f0ebe7;border-radius:3px;overflow:hidden;}
.para-score-fill{height:100%;background:#F29C68;border-radius:3px;transition:width .6s ease;}
.para-score-num{font-family:var(--font-title);font-size:18px;font-weight:700;color:#F29C68;margin-top:4px;}

/* ── 이용권·퀴즈·커뮤니티 공통 페이지 스타일 ── */
.page-inner{
  max-width:100%;margin:0;padding:48px clamp(20px, 2.5vw, 48px);
  box-sizing:border-box;
}
.page-header{
  text-align:center;margin-bottom:36px;
}
.page-header-icon{
  font-size:36px;margin-bottom:10px;
}
.page-header h2{
  font-family:'Playfair Display',var(--font-title);
  font-size:28px;font-weight:700;color:#0D0D0D;
  margin:0 0 6px;
}
.page-header p{
  font-size:13px;color:#aaa;margin:0;
}
.card{
  background:#fff;border-radius:16px;
  border:1px solid #f0ebe7;
  padding:24px;margin-bottom:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.card-title{
  font-size:15px;font-weight:800;color:#0D0D0D;margin-bottom:12px;
}

/* 이용권 상태 카드 */
.voucher-hero{
  background:#fff;border-radius:20px;
  padding:28px;text-align:center;
  margin-bottom:24px;border:1.5px solid #f0ebe7;
}
.voucher-hero .count{
  font-family:var(--font-title);
  font-size:48px;font-weight:700;color:#0D0D0D;line-height:1.1;
}
.voucher-hero .count span{
  font-size:16px;font-weight:400;color:#999;margin-left:4px;
}
.voucher-hero.active{
  background:linear-gradient(135deg,#fff8f5,#fff);
  border-color:#F29C68;
}

/* 이용권 입력 */
.voucher-input-wrap{
  display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;
}
.voucher-input{
  flex:1;min-width:200px;padding:13px 16px;
  border-radius:10px;border:1.5px solid #e8e0db;
  font-size:15px;font-family:'Noto Sans KR',sans-serif;
  letter-spacing:1px;outline:none;transition:border .2s;
  background:#faf8f6;box-sizing:border-box;
}
.voucher-input:focus{ border-color:#F29C68; }
.voucher-register-btn{
  padding:13px 24px;border-radius:10px;border:none;
  background:#F29C68;color:#fff;
  font-size:14px;font-weight:700;
  font-family:'Noto Sans KR',sans-serif;
  cursor:pointer;white-space:nowrap;transition:all .15s;
}
.voucher-register-btn:hover{
  background:#333;transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* 가격 카드 */
.price-card{
  background:#fff;border:1.5px solid #e8e0db;
  border-radius:14px;padding:20px;
}
.price-card .plan-name{
  font-size:13px;font-weight:800;color:#0D0D0D;margin-bottom:2px;
}
.price-card .plan-price{
  font-family:var(--font-title);
  font-size:26px;font-weight:700;color:#0D0D0D;
}
.price-card .plan-price span{
  font-size:12px;color:#999;font-weight:400;
}
.price-card .plan-desc{
  font-size:11px;color:#999;margin-top:4px;
}
.price-card .plan-total{
  font-size:11px;color:#bbb;margin-top:2px;
}
.price-card .plan-btn{
  display:block;text-align:center;margin-top:12px;
  padding:9px;border-radius:8px;
  border:1.5px solid #e8e0db;background:#fff;
  color:#0D0D0D;font-size:12px;font-weight:700;
  text-decoration:none;font-family:'Noto Sans KR',sans-serif;
  transition:all .15s;
}
.price-card .plan-btn:hover{ background:#f5f0ed; }
.price-card.best{
  border-color:#F29C68;
  background:linear-gradient(135deg,#fffaf8,#fff);
}
.price-card.best .plan-btn{
  background:#F29C68;color:#fff;border-color:#F29C68;
}
.price-card.best .plan-btn:hover{ opacity:.85; }

/* 가격 그리드 */
.price-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-bottom:20px;
}

/* 퀴즈 카드 */
.quiz-streak{
  background:#fff;border-radius:14px;
  padding:14px 20px;border:1px solid #f0ebe7;
  margin-bottom:20px;
  display:flex;align-items:center;
  justify-content:space-between;
}
.quiz-card{
  background:#fff;border-radius:18px;
  padding:28px;border:1px solid #f0ebe7;
  margin-bottom:16px;min-height:240px;
}
.quiz-option{
  display:block;width:100%;padding:14px 18px;
  border:1.5px solid #e8e0db;border-radius:10px;
  background:#fff;text-align:left;
  font-size:14px;color:#444;cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;
  transition:all .15s;
}
.quiz-option:hover{ border-color:#F29C68;background:#fffaf8; }
.quiz-explain{
  background:linear-gradient(135deg,#fffaf8,#fff);
  border-radius:14px;padding:20px;
  border:1px solid #F29C68;margin-bottom:16px;
}

/* 커뮤니티 */
.comm-write-bar{
  background:#F29C68;border-radius:14px;
  padding:16px 20px;margin-bottom:20px;
  display:flex;align-items:center;
  justify-content:space-between;gap:12px;
}
.comm-write-bar p{
  font-size:13px;color:#fff;margin:0;
}
.comm-write-btn{
  background:#fff;
  color:#0D0D0D;border:none;
  padding:9px 18px;border-radius:8px;
  font-size:12px;font-weight:800;cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;white-space:nowrap;
}
.cat-filter{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;
}
.cat-filter button{
  padding:5px 14px;border-radius:20px;
  border:1px solid #e8e0db;background:#fff;
  color:#888;font-size:12px;font-weight:600;
  cursor:pointer;font-family:'Noto Sans KR',sans-serif;
  transition:all .15s;
}
.cat-filter button.active{
  background:#F29C68;color:#fff;border-color:transparent;
}
.post-card{
  background:#fff;border-radius:12px;
  padding:18px 20px;border:1px solid #f0ebe7;
  transition:border-color .15s;
}
.post-card:hover{ border-color:#F29C68; }

/* 모달 — 공통 */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px);
  z-index:9000;display:flex;
  align-items:center;justify-content:center;
  padding:16px;
}
.modal-box{
  background:#fff;border-radius:18px;
  padding:24px;max-width:520px;width:100%;
  max-height:80vh;overflow-y:auto;
}

/* ── 이용권·퀴즈·커뮤니티 모바일 ── */
@media(max-width:640px){
  .page-inner{ padding:24px 16px; }
  .page-header h2{ font-size:22px; }
  .page-header p{ font-size:12px; }
  .voucher-hero{ padding:20px; }
  .voucher-hero .count{ font-size:40px; }
  .voucher-hero .count span{ font-size:14px; }
  .card{ padding:18px; }
  .card-title{ font-size:14px; }

  /* 가격 그리드 모바일 1열 */
  .price-grid{ grid-template-columns:1fr!important; }
  .price-card{ padding:16px; }
  .price-card .plan-price{ font-size:22px; }

  /* 이용권 입력 */
  .voucher-input-wrap{ flex-direction:column; }
  .voucher-input{ min-width:0;width:100%; }
  .voucher-register-btn{ width:100%;text-align:center; }

  /* 퀴즈 */
  .quiz-card{ padding:20px;min-height:200px; }
  .quiz-option{ padding:12px 14px;font-size:13px; }
  .quiz-streak{ padding:12px 16px; }

  /* 커뮤니티 */
  .comm-write-bar{ padding:14px 16px;flex-direction:column;gap:10px;text-align:center; }
  .modal-box{ padding:20px;border-radius:14px; }

  /* 사업자 정보 */
  .biz-footer{ padding:18px!important;font-size:12px!important; }
  .biz-footer-unified{ font-size:11px!important;padding:18px 16px!important; }
}

/* ── 통일 푸터 ── */
.biz-footer-unified{
  background:#F29C68;
  border-radius:16px;
  padding:28px 32px;
  font-size:12px;
  line-height:2;
  color:rgba(255,255,255,0.55);
  text-align:center;
  margin-top:40px;
}

/* ══ GL-BAR 리디자인 ══ */
.gl-bar {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 14px;
  background: #ffffff;
  border-bottom: 1px solid #f0ebe5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gl-group {
  display: flex;
  align-items: center;
  gap: 5px;
}
.gl-label-txt {
  font-size: 10px;
  font-weight: 700;
  color: #c8b8ac;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 2px;
}
.gl-select-wrap {
  position: relative;
}
.gl-sel-new {
  height: 24px;
  padding: 0 22px 0 8px;
  border: 1px solid #e8e0db;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #666;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23ccc'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: border-color .15s;
}
.gl-sel-new:focus { border-color: #F29C68; background: #fff; }
.gl-icon-btn {
  height: 24px;
  width: 24px;
  padding: 0;
  border: 1px solid #e8e0db;
  border-radius: 6px;
  background: transparent;
  font-size: 0;
  color: #aaa;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.gl-icon-btn:hover {
  background: #FFF2E6;
  border-color: #F29C68;
  color: #c06040;
}
.gl-icon-btn svg { flex-shrink: 0; }
.gl-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 2px;
  transition: background .3s;
}
.gl-status-dot.off { background: #ddd; }
.gl-status-dot.on  { background: #F29C68; box-shadow: 0 0 0 2px #fff0eb; }
.gl-sep {
  width: 1px; height: 18px;
  background: #ede5de;
  margin: 0 4px;
  flex-shrink: 0;
}
.gl-file-btn {
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #F29C68;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all .15s;
}
.gl-file-btn:hover {
  background: #F29C68;
  border-color: transparent;
  color: #fff;
}
.gl-file-btn svg { flex-shrink: 0; }

/* ══ ED-FOOT + RUN-BTN 리디자인 ══ */
.ed-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 30px;
  font-size: 10.5px;
  color: #bbb;
  font-weight: 500;
  background: #faf8f6;
  border-top: 1px solid #f0ebe7;
  gap: 0;
}
.ed-foot span {
  padding: 0 9px;
  border-right: 1px solid #f0ebe5;
  line-height: 1;
}
.ed-foot span:first-child { padding-left: 0; }
.ed-foot span:last-of-type { border-right: none; }
.dl-btn {
  margin-left: auto;
  height: 22px;
  padding: 0 10px;
  background: #F29C68;
  color: #5a2a10;
  border: none;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .3px;
  transition: opacity .15s;
}
.dl-btn:hover { opacity: .85; }
.run-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 48px;
  background: #F29C68;
  border: none;
  border-radius: 10px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter .15s, transform .1s;
  z-index: 10;
}
.run-btn:hover { filter: brightness(1.04); }
.run-btn:active { transform: scaleY(.97); }
.run-btn.ld { opacity: .75; cursor: wait; }
.run-btn-icon {
  font-size: 16px;
  opacity: .9;
}