/* ─────────── 폰트 ─────────── */
@font-face { font-family:'HangangL';                 src:url('fonts/hangang-l.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HangangM';                 src:url('fonts/hangang-m.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HangangB';                 src:url('fonts/hangang-b.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HangangEB';                src:url('fonts/hangang-eb.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HangangJL';                src:url('fonts/hangangj-l.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HangangJM';                src:url('fonts/hangangj-m.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HangangJB';                src:url('fonts/hangangj-b.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HangangJEB';               src:url('fonts/hangangj-eb.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NamsanL';                  src:url('fonts/namsan-l.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NamsanM';                  src:url('fonts/namsan-m.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NamsanB';                  src:url('fonts/namsan-b.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NamsanEB';                 src:url('fonts/namsan-eb.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NamsanJL';                 src:url('fonts/namsanj-l.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NamsanJM';                 src:url('fonts/namsanj-m.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NamsanJB';                 src:url('fonts/namsanj-b.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NamsanJEB';                src:url('fonts/namsanj-eb.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NuriR';                    src:url('fonts/nuri-r.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NuriB';                    src:url('fonts/nuri-b.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumGothicRegular';       src:url('fonts/nanumgothic-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumGothicBold';          src:url('fonts/nanumgothic-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumGothicExtraBold';     src:url('fonts/nanumgothic-extrabold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GothicA1Light';            src:url('fonts/gothica1-light.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GothicA1Regular';          src:url('fonts/gothica1-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GothicA1Bold';             src:url('fonts/gothica1-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GothicA1Black';            src:url('fonts/gothica1-black.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NotoSansKRRegular';        src:url('fonts/notosanskr-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'IBMPlexSansKRRegular';     src:url('fonts/ibmplexsanskr-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'IBMPlexSansKRBold';        src:url('fonts/ibmplexsanskr-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'SunflowerLight';           src:url('fonts/sunflower-light.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'SunflowerMedium';          src:url('fonts/sunflower-medium.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'SunflowerBold';            src:url('fonts/sunflower-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'DongleLight';              src:url('fonts/dongle-light.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'DongleRegular';            src:url('fonts/dongle-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'DongleBold';               src:url('fonts/dongle-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumMyeongjoRegular';     src:url('fonts/nanummyeongjo-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumMyeongjoBold';        src:url('fonts/nanummyeongjo-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'SongMyungRegular';         src:url('fonts/songmyung-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GowunBatangRegular';       src:url('fonts/gowunbatang-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GowunBatangBold';          src:url('fonts/gowunbatang-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GowunDodumRegular';        src:url('fonts/gowundodum-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HahmletRegular';           src:url('fonts/hahmlet-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'DiphylleiaRegular';        src:url('fonts/diphylleia-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumPenScriptRegular';    src:url('fonts/nanumpenscript-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumBrushScriptRegular';  src:url('fonts/nanumbrushscript-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GaeguLight';               src:url('fonts/gaegu-light.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GaeguRegular';             src:url('fonts/gaegu-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GaeguBold';                src:url('fonts/gaegu-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GamjaFlowerRegular';       src:url('fonts/gamjaflower-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'HiMelodyRegular';          src:url('fonts/himelody-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'PoorStoryRegular';         src:url('fonts/poorstory-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'SingleDayRegular';         src:url('fonts/singleday-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'CuteFontRegular';          src:url('fonts/cutefont-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'YeonSungRegular';          src:url('fonts/yeonsung-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'KirangHaerangRegular';     src:url('fonts/kiranghaerang-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'EastSeaDokdoRegular';      src:url('fonts/eastseadokdo-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'StylishRegular';           src:url('fonts/stylish-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Dohyeon';                  src:url('fonts/dohyeon.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'BlackHanSansRegular';      src:url('fonts/blackhansans-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'JuaRegular';               src:url('fonts/jua-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'GasoekOneRegular';         src:url('fonts/gasoekone-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'BagelFatOneRegular';       src:url('fonts/bagelfatone-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'MoiraiOneRegular';         src:url('fonts/moiraione-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumGothicCodingRegular'; src:url('fonts/nanumgothiccoding-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NanumGothicCodingBold';    src:url('fonts/nanumgothiccoding-bold.woff2') format('woff2'); font-display:swap; }

/* ─────────── 기본 ─────────── */
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

/* 폰: 확대/축소 잠금 — 위아래 스크롤만 허용.
   버튼을 눌러도 더블탭 확대나 화면 흔들림이 생기지 않는다. */
html {
  touch-action:pan-y;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior-y:none;      /* 위아래 끝에서 튕기며 흔들리는 것 방지 */
}
body { touch-action:pan-y; }
button, select, label, .seg button, .pill, .btn {
  touch-action:manipulation;       /* 더블탭 확대 없이 즉시 반응 */
}
/* 글자 선택으로 인한 확대 메뉴 방지 (입력란은 예외) */
button, label, .sec, .grip, .top h1 { -webkit-user-select:none; user-select:none; }
input, textarea, .flavor { -webkit-user-select:text; user-select:text; }

:root {
  --ink:      #1d1d1f;
  --ink-sub:  #5a5a5f;
  --ink-mute: #86868b;
  --line:     #e6e6ea;
  --card:     rgba(255,255,255,.72);
  --hover:    #f2f2f4;
  --danger:   #c0392b;
  --radius:   24px;
}

body {
  font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 8% -8%,  rgba(255,255,255,.95), transparent 60%),
    radial-gradient(900px 640px at 108% 12%, rgba(226,232,240,.85), transparent 62%),
    linear-gradient(140deg, #ffffff 0%, #f7f7f9 48%, #eceef2 100%);
  background-attachment:fixed;
  min-height:100vh;
  padding:24px 16px 64px;
  -webkit-font-smoothing:antialiased;
}

.wrap { max-width:520px; margin:0 auto; }

/* ─────────── 헤더 ─────────── */
.top {
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; padding:0 4px;
}
.top h1 { font-size:22px; font-weight:700; letter-spacing:-.5px; }
.top .spacer { flex:1; }

#connectBtn {
  border:1px solid var(--line); background:#fff; color:var(--ink-sub);
  border-radius:16px; height:34px; padding:0 16px;
  font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:.15s;
}
#connectBtn:hover { background:var(--hover); }
#connectBtn.on { background:#1e1e1e; color:#fff; border-color:#1e1e1e; }
.dot { width:8px; height:8px; border-radius:50%; background:#c7c7cc; }
#connectBtn.on .dot { background:#30d158; }

/* ─────────── 카드 ─────────── */
.card {
  background:var(--card);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.14);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:14px;
}
.card-hd {
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px; min-height:30px;
}
.sec {
  font-size:12px; font-weight:600; letter-spacing:.4px;
  color:var(--ink-mute);
}
.card-hd .spacer { flex:1; }

/* ─────────── 폼 요소 ─────────── */
input[type=text], input[type=search], select, textarea {
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:11px 16px; outline:none; transition:.15s;
}
select { appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; }
textarea { border-radius:16px; resize:vertical; min-height:74px; line-height:1.5; }
input:focus, select:focus, textarea:focus { border-color:#1e1e1e; }
input:disabled { background:#f2f2f4; color:#aeaeb2; border-color:transparent; }
::placeholder { color:#b5b5ba; }

.row { display:flex; gap:10px; align-items:center; }
.row + .row { margin-top:10px; }

.flavor {
  font-size:13px; color:var(--ink-sub); line-height:1.55;
  background:#f5f5f7; border-radius:14px; padding:10px 14px;
  margin-top:10px; white-space:pre-wrap; word-break:break-word;
}

/* 알약 버튼 */
.pill {
  border:1px solid var(--line); background:#fff; color:var(--ink-sub);
  border-radius:15px; height:30px; padding:0 18px;
  font-size:12px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.pill:hover { background:var(--hover); }
.pill.danger { color:var(--danger); }
.pill.mini { padding:0 12px; }

/* 스텝 스핀 */
.steps { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.step { display:flex; align-items:center; gap:6px; }
.step label { font-size:11px; font-weight:500; color:var(--ink-mute);
  width:62px; text-align:center; flex:none; }
.step input {
  width:52px; flex:none; text-align:center; font-weight:600; font-size:13px;
  border-radius:10px; padding:6px 0;
}
.step .arrows { display:flex; flex-direction:column; gap:2px; }
.step .arrows button {
  width:26px; height:16px; font-size:8px; line-height:1;
  border:1px solid var(--line); background:#fff; color:var(--ink-sub);
  border-radius:6px; cursor:pointer; padding:0; font-family:inherit;
}
.step .arrows button:hover { background:var(--hover); }
.step .arrows button:active { background:#1e1e1e; color:#fff; }

/* 세그먼트 (QR 대상) */
.seg { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.seg button {
  border:1px solid var(--line); background:#fff; color:var(--ink-mute);
  border-radius:16px; padding:11px 4px; font-size:13px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:.15s;
  word-break:keep-all; line-height:1.35;   /* '네이버 스토어'가 낱글자로 잘리지 않게 */
}
.seg button:hover { background:var(--hover); color:var(--ink); }
.seg button.on { background:#1e1e1e; color:#fff; border-color:#1e1e1e; }

/* 체크박스 */
.chk { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13px; color:var(--ink); user-select:none; }
.chk input { display:none; }
.chk .box {
  width:20px; height:20px; border-radius:50%; flex:none;
  border:2px solid #d1d1d6; background:#fff; transition:.15s;
  display:grid; place-items:center;
}
.chk input:checked + .box { background:#1e1e1e; border-color:#1e1e1e; }
.chk .box::after {
  content:''; width:6px; height:10px; margin-top:-2px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:.15s;
}
.chk input:checked + .box::after { transform:rotate(45deg) scale(1); }

/* 순서 리스트 */
#orderList { list-style:none; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:6px; }
#orderList li {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px; font-size:15px;
  min-height:52px; transition:background .12s;
}
#orderList li + li { border-top:1px solid #f4f4f6; }
#orderList li:hover { background:#f9f9fb; }
#orderList li.drag { opacity:.35; }
#orderList li.over { background:#eceef2; }
#orderList .name { flex:1; }

/* 위·아래 이동 버튼 — 손가락으로 누르기 좋은 크기 */
#orderList .move { display:flex; gap:6px; flex:none; }
#orderList .move button {
  width:42px; height:38px; padding:0;
  border:1px solid var(--line); background:#fff; color:var(--ink-sub);
  border-radius:11px; font-size:12px; font-family:inherit; cursor:pointer;
  transition:.12s; touch-action:manipulation;
}
#orderList .move button:hover:not(:disabled) { background:var(--hover); }
#orderList .move button:active:not(:disabled) { background:#1e1e1e; color:#fff; }
#orderList .move button:disabled { color:#dcdce0; border-color:#f0f0f2; cursor:default; }

/* 미리보기 */
.preview {
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:12px; display:grid; place-items:center;
}
#previewCanvas { width:100%; max-width:440px; height:auto; image-rendering:pixelated;
  border-radius:8px; }

/* 하단 액션 */
.actions { display:flex; gap:10px; margin-top:4px; }
.btn {
  flex:1; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:16px; padding:14px 8px; font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:.15s;
}
.btn:hover { background:var(--hover); }
.btn.primary { background:#1e1e1e; color:#fff; border-color:#1e1e1e; font-size:16px; flex:2; }
.btn.primary:hover { background:#3a3a3a; }
.btn.slim { flex:none; width:92px; font-size:13px; font-weight:500; color:var(--ink-sub); }
.btn:disabled { background:#f2f2f4; color:#c7c7cc; border-color:transparent; cursor:not-allowed; }

#status { text-align:center; font-size:12px; color:var(--ink-mute);
  margin-top:12px; min-height:18px; }

.hint { font-size:11px; color:var(--ink-mute); line-height:1.6; margin-top:10px; }
.hint code { background:#f2f2f4; border-radius:4px; padding:1px 5px; font-size:10px; }

.hide { display:none !important; }

/* 스와이프 안내는 터치 기기에서만 */
.swipe-tip { display:none; font-size:11px; color:#a1a1a6; }
@media (pointer:coarse) { .swipe-tip { display:inline; } }

/* ─────────── 폰: 손가락으로 쓰기 좋게 전체를 키운다 ─────────── */
@media (max-width:480px) {
  body { padding:16px 10px 56px; }
  .steps { grid-template-columns:1fr; gap:14px; }
  .card { padding:16px; border-radius:20px; margin-bottom:16px; }
  .card-hd { margin-bottom:14px; }

  /* iOS는 글자 16px 미만 입력란을 누르면 화면을 확대해버린다 → 16px 이상 유지 */
  input[type=text], input[type=search], select, textarea { font-size:16px; padding:14px 16px; }
  select { padding-right:40px; }
  textarea { min-height:96px; }
  #presetSelect { font-size:15px !important; height:38px; padding:0 32px 0 14px; }

  /* 스텝 스핀박스 — 화살표를 크게, 숫자는 위아래로 쓸어서 조절 */
  .step { gap:8px; }
  .step label { width:74px; font-size:13px; }
  .step input {
    font-size:17px; width:76px; padding:13px 0; font-weight:700;
    touch-action:none;                      /* 위아래 쓸기를 값 조절로 쓴다 */
    background:linear-gradient(#fff, #fafafb);
  }
  .step .arrows { gap:4px; }
  .step .arrows button { width:44px; height:26px; font-size:10px; }

  /* 알약 버튼 */
  .pill { height:38px; padding:0 20px; font-size:14px; }
  .pill.mini { padding:0 14px; }
  #connectBtn { height:40px; font-size:14px; }

  /* 체크박스 — 누르기 쉽게 */
  .chk { padding:8px 0; font-size:15px; }
  .chk .box { width:24px; height:24px; border-radius:12px; }
  .chk .box::after { width:7px; height:12px; }

  /* 순서 리스트 */
  #orderList li { min-height:60px; font-size:16px; padding:10px 12px; }
  #orderList .move button { width:48px; height:44px; font-size:13px; }

  /* 세그먼트·주요 버튼 */
  .seg { gap:7px; }
  .seg button { padding:13px 6px; font-size:13.5px; min-height:62px; }
  .btn { padding:17px 8px; font-size:15px; }
  .btn.primary { font-size:17px; }
  .btn.slim { width:84px; font-size:14px; }
  .actions { gap:8px; }

  .flavor { font-size:14px; padding:12px 14px; }
  #status { font-size:13px; margin-top:14px; }
}

/* ── 미리보기 위에서 바로 고치기 ── */
.preview { position: relative; }

.inlineEdit {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
}
.inlineEdit input,
.inlineEdit textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 2px 6px;
  box-sizing: border-box;
  border: 2px solid #1d1d1f;
  border-radius: 8px;
  background: #fff;
  color: #1d1d1f;
  /* 16px 아래로 내려가면 iOS 사파리가 입력할 때 화면을 확대해버린다 */
  font-size: 16px;
  line-height: 1.25;
  font-family: inherit;
  resize: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.inlineEdit textarea { overflow: auto; }
.inlineEdit input:focus,
.inlineEdit textarea:focus { outline: none; }

/* ── 폰트 고르기: 글꼴 모양을 보면서 ── */
.fontpick {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e6e6ea; border-radius: 16px;
  background: #fff; color: #1d1d1f;
  text-align: left; cursor: pointer;
}
.fontpick:hover { background: #f7f7f9; }
.fontpick #fontPickName {
  flex: none; max-width: 42%;
  font-size: 13px; font-weight: 600; color: #86868b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fontpick #fontPickSample {
  flex: 1; min-width: 0;
  font-size: 19px; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fontpanel {
  margin-top: 10px;
  max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #e6e6ea; border-radius: 16px;
  background: #fff;
}
.fontpanel .grp {
  position: sticky; top: 0; z-index: 1;
  padding: 9px 16px;
  background: #f2f2f4; color: #86868b;
  font-size: 12px; font-weight: 700;
}
.fontpanel button {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  /* 손가락으로 누르기 좋게 넉넉히 */
  padding: 13px 16px; min-height: 56px;
  border: 0; border-top: 1px solid #f2f2f4;
  background: #fff; color: #1d1d1f;
  text-align: left; cursor: pointer;
}
.fontpanel button:hover { background: #f7f7f9; }
.fontpanel button.on { background: #1d1d1f; color: #fff; }
.fontpanel button.on .nm { color: #d7d7da; }
.fontpanel .nm {
  flex: none; width: 38%;
  font-size: 12px; font-weight: 600; color: #86868b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fontpanel .sm {
  flex: 1; min-width: 0;
  font-size: 20px; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}