/* ============ 최애의 독서 — 함께 읽기 카드 메이커 ============ */
:root{
  --paper-ui:#fcfaf5;
  --ink-ui:#111111;
  --line-ui:#111111;
  --muted-ui:#6b6b6b;
  --hl:#fde047;
  --hl2:#fbcfe8;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Pretendard','Pretendard Variable',system-ui,sans-serif;
  background:var(--paper-ui);color:var(--ink-ui);-webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
.hidden{display:none !important}

/* ---- topbar ---- */
.topbar{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:10px 18px;background:#fff;border-bottom:3px solid var(--ink-ui);
  position:sticky;top:0;z-index:30;
}
.topbar .home{
  font-size:12px;font-weight:800;text-decoration:none;color:var(--ink-ui);
  border:2px solid var(--ink-ui);background:#fff;padding:6px 12px;box-shadow:2px 2px 0 var(--ink-ui);
  white-space:nowrap;
}
.topbar .home:hover{background:var(--hl)}
.topbar .ttl{font-size:15px;font-weight:900;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.beta{font-size:10px;font-weight:800;background:var(--hl2);border:2px solid var(--ink-ui);padding:1px 6px}
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.status{color:var(--muted-ui);font-size:12px;white-space:nowrap}

.btn{
  background:#fff;color:var(--ink-ui);border:2px solid var(--ink-ui);
  padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink-ui);transition:.12s;
}
.btn:hover{background:var(--hl);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink-ui)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink-ui)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:2px 2px 0 var(--ink-ui);transform:none}
.btn.primary{background:var(--hl)}
.btn.tiny{padding:3px 9px;font-size:11px;box-shadow:2px 2px 0 var(--ink-ui)}

/* ---- layout ---- */
.layout{display:grid;grid-template-columns:400px 1fr;height:calc(100vh - 57px)}
.panel{overflow-y:auto;border-right:3px solid var(--ink-ui);background:#fff;padding:18px}
.stage{overflow-y:auto;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}

/* ---- blocks ---- */
.block{margin-bottom:22px;padding-bottom:18px;border-bottom:2px dashed #d9d5c9}
.block:last-child{border-bottom:none}
.block-title{
  font-size:13px;font-weight:900;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.title-tools{display:flex;gap:6px}
.hint{font-size:11.5px;color:var(--muted-ui);line-height:1.6;margin:8px 0 6px}
.muted{color:var(--muted-ui)}

input[type=search],input[type=text],textarea{
  width:100%;background:#fff;border:2px solid var(--ink-ui);color:var(--ink-ui);
  padding:9px 11px;font-size:13.5px;font-family:inherit;outline:none;
}
input:focus,textarea:focus{box-shadow:3px 3px 0 var(--hl)}
textarea{resize:vertical;line-height:1.5}

/* ---- search ---- */
.search-wrap{position:relative}
.results{
  list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:20;
  background:#fff;border:2px solid var(--ink-ui);box-shadow:4px 4px 0 var(--ink-ui);
  max-height:320px;overflow:auto;
}
.results li{padding:8px;cursor:pointer;font-size:13.5px;display:flex;align-items:center;gap:8px;font-weight:600}
.results li:hover,.results li.active{background:var(--hl)}
.results img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#eee;flex:none}
.results .rc{color:var(--muted-ui);font-size:11px;margin-left:auto;font-weight:500}
.results .empty{color:var(--muted-ui);cursor:default}

/* ---- celeb card ---- */
.celeb-card{display:flex;gap:12px;align-items:center;border:2px solid var(--ink-ui);padding:12px;box-shadow:3px 3px 0 var(--ink-ui);margin-bottom:12px}
.celeb-card img{width:62px;height:62px;object-fit:cover;background:#eee;flex:none;border:2px solid var(--ink-ui)}
.celeb-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.celeb-meta strong{font-size:15px;font-weight:900}
.celeb-meta .muted{font-size:11.5px}
.mini-file{font-size:11.5px;font-weight:800;cursor:pointer;border-bottom:2px solid var(--hl)}
.ph-row{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}

/* ---- fields ---- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:11px;font-size:12px}
.field>span{color:var(--muted-ui);font-weight:700}
.field.range{gap:2px}
.field.range output{color:var(--ink-ui);font-weight:900}
.field em{font-style:normal;color:var(--muted-ui)}
.field-row{display:flex;gap:14px;align-items:center;margin-bottom:11px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;cursor:pointer}
.seg{display:flex;flex-direction:column;gap:6px}
.seg.seg-row{flex-direction:row;flex-wrap:wrap;gap:14px}
.seg label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;cursor:pointer}
.seg em{font-size:11px}
.seg .dot{width:16px;height:16px;border:2px solid var(--ink-ui);display:inline-block}
input[type=range]{width:100%;accent-color:var(--ink-ui)}

/* ---- 색 스와치 ---- */
.swatches{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.swatches button{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink-ui);cursor:pointer;padding:0}
.swatches button.active{outline:3px solid var(--hl);outline-offset:2px}
.custom-color{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-ui);margin-top:8px;font-weight:700}
.custom-color input[type=color]{width:36px;height:26px;padding:0;border:2px solid var(--ink-ui);background:none;cursor:pointer}

/* ---- theme chips ---- */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.theme-chip{
  display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;
  background:#fff;border:2px solid var(--ink-ui);padding:7px 8px;transition:.12s;
}
.theme-chip:hover{background:var(--hl)}
.theme-chip.active{background:var(--hl);box-shadow:3px 3px 0 var(--ink-ui)}
.theme-chip .tc-dot{width:20px;height:20px;border-radius:50%;flex:none;border:1px solid var(--ink-ui)}
.theme-chip .tc-txt{display:flex;flex-direction:column;min-width:0}
.theme-chip .tc-txt b{font-size:11.5px;font-weight:800;white-space:nowrap}
.theme-chip .tc-txt em{font-size:10px;font-style:normal;color:var(--muted-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- book list ---- */
.book-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.book-item{border:2px solid var(--ink-ui)}
.book-head{display:flex;align-items:center;gap:9px;padding:7px 9px;cursor:pointer}
.book-head img{width:28px;height:40px;object-fit:cover;background:#eee;flex:none;border:1px solid var(--ink-ui)}
.book-head .bt{font-size:12.5px;line-height:1.3;min-width:0;display:flex;flex-direction:column}
.book-head .bt b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-head .bt span{color:var(--muted-ui);font-size:11px}
.book-head input[type=checkbox]{flex:none;width:16px;height:16px;accent-color:var(--ink-ui)}

/* ---- stickers panel ---- */
.add-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.item-editor{border:2px solid var(--ink-ui);padding:12px;box-shadow:3px 3px 0 var(--hl2);margin-bottom:12px}
.ie-head{font-size:12px;font-weight:900;margin-bottom:10px}
.layer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.layer{display:flex;align-items:center;gap:8px;border:2px solid var(--ink-ui);padding:5px 8px;font-size:11.5px;cursor:pointer;background:#fff}
.layer.sel{background:var(--hl)}
.layer .lb{font-weight:800;white-space:nowrap}
.layer .lt{color:var(--muted-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.layer .ltools{display:flex;gap:3px;margin-left:auto}

/* ---- stage ---- */
.stage-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted-ui)}
.stage-empty .big{font-size:46px;margin-bottom:14px}
.stage-empty p{margin:6px 0;line-height:1.6;font-weight:700}
.card-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.card-frame{overflow:hidden;background:#000;border:3px solid var(--ink-ui);box-shadow:8px 8px 0 var(--ink-ui)}
.stage-tip{font-size:11.5px;color:var(--muted-ui);margin:0;font-weight:700}

/* =====================================================
   THE CARD — 1080px 기준. --ink/--paper/--a/--b/--c 는 JS가 주입
   ===================================================== */
.tg-card{
  position:relative;overflow:hidden;transform-origin:top left;
  background:var(--paper,#fff);color:var(--ink,#111);font-family:var(--body,'Jua',sans-serif);
  --ink:#111111;--paper:#ffffff;--a:#ff5d8f;--b:#ffe14d;--c:#7cf0a0;
}
.font-jua  {--body:'Jua','Pretendard',sans-serif;--display:'Black Han Sans','Jua',sans-serif}
.font-black{--body:'Pretendard',sans-serif;--display:'Black Han Sans',sans-serif}
.font-gaegu{--body:'Gaegu','Pretendard',cursive;--display:'Gaegu',cursive}
.font-serif{--body:'Noto Serif KR',serif;--display:'Noto Serif KR',serif}

.tg-bg{position:absolute;inset:0;background-repeat:no-repeat;background-position:center}
.tg-bg.empty{background:var(--c)}
.tg-dim{position:absolute;inset:0;background:#000}

.tg-item{position:absolute;transform-origin:center center;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none}
.tg-item:active{cursor:grabbing}
.tg-item.sel{outline:3px dashed #00c2ff;outline-offset:6px}

/* 큰 제목 — 흰 글자 + 두꺼운 외곽선 */
/* 채움 = 배경색, 외곽선 = 글자색 → 두 색을 바꾸면 그대로 따라온다 */
.tg-title{
  font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:-.01em;color:var(--paper);
  text-shadow:
    5px 0 0 var(--ink),-5px 0 0 var(--ink),0 5px 0 var(--ink),0 -5px 0 var(--ink),
    4px 4px 0 var(--ink),-4px 4px 0 var(--ink),4px -4px 0 var(--ink),-4px -4px 0 var(--ink),
    14px 14px 0 var(--a);
}
/* 밝은 바탕 테마·어두운 바탕 테마는 채움과 외곽선을 맞바꾼다 */
.th-pastel .tg-title,.th-cream .tg-title,.th-neon .tg-title{
  color:var(--ink);
  text-shadow:
    5px 0 0 var(--paper),-5px 0 0 var(--paper),0 5px 0 var(--paper),0 -5px 0 var(--paper),
    4px 4px 0 var(--paper),-4px 4px 0 var(--paper),4px -4px 0 var(--paper),-4px -4px 0 var(--paper),
    12px 12px 0 var(--a);
}

/* 말풍선 */
.tg-bubble{
  padding:22px 36px;max-width:620px;line-height:1.3;font-weight:700;text-align:center;
  border:5px solid var(--ink);box-shadow:9px 9px 0 var(--ink);
}
.tg-bubble[data-shape=blob]{border-radius:58% 42% 56% 44%/52% 56% 44% 48%;padding:34px 46px}
.tg-bubble[data-shape=pill]{border-radius:999px;padding:20px 44px}
.tg-bubble[data-shape=burst]{
  background:transparent !important;border:none;box-shadow:none;position:relative;z-index:0;padding:26px 40px;
}
.tg-bubble[data-shape=burst]::before,
.tg-bubble[data-shape=burst]::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--bubble,var(--b));border:5px solid var(--ink);border-radius:14px;
}
.tg-bubble[data-shape=burst]::after{transform:rotate(45deg)}

/* 별점 */
.tg-stars{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--paper);border:5px solid var(--ink);border-radius:20px;
  padding:16px 30px;box-shadow:9px 9px 0 var(--ink);
}
.tg-star-row{color:var(--a);letter-spacing:.1em;line-height:1}
.tg-star-cap{font-weight:700;line-height:1.25;text-align:center}

/* 이모지 줄 */
.tg-emoji{
  background:var(--paper);border:4px solid var(--ink);border-radius:14px;
  padding:10px 20px;letter-spacing:.12em;line-height:1.2;box-shadow:7px 7px 0 var(--ink);
}

/* 작은 라벨 */
.tg-tag{
  background:var(--ink);color:var(--paper);border-radius:999px;
  padding:9px 22px;font-weight:700;line-height:1.2;
}

/* 책 표지 스티커 */
.tg-book{line-height:0}
.tg-bookimg{
  width:100%;background-repeat:no-repeat;background-position:center;background-size:cover;
  border:none;border-radius:8px;box-shadow:0 16px 30px rgba(0,0,0,.34);
  background-color:var(--paper);
}
.bd-on .tg-bookimg{border:5px solid var(--ink);border-radius:10px;box-shadow:10px 10px 0 rgba(0,0,0,.28)}

/* 하단 표기 */
.tg-mark{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:18px;padding:26px 34px;
  font-family:'Space Grotesk','Pretendard',sans-serif;font-size:22px;font-weight:700;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.65);
}
.tg-mark .tg-mark-r{opacity:.9;font-size:19px;text-align:right}

/* ---- 테마별 마감 ---- */
.th-pastel .tg-bubble,.th-pastel .tg-stars,.th-pastel .tg-emoji{
  border-width:0;box-shadow:0 14px 30px rgba(90,70,110,.28);
}
.th-pastel.bd-on .tg-bookimg{border-width:0;box-shadow:0 14px 30px rgba(90,70,110,.28)}
.th-pastel .tg-title{text-shadow:4px 0 0 #fff,-4px 0 0 #fff,0 4px 0 #fff,0 -4px 0 #fff,12px 12px 0 var(--a);color:var(--ink)}
.th-pastel .tg-tag{background:var(--a);color:#4a3f55}

.th-neon .tg-bubble,.th-neon .tg-stars,.th-neon .tg-emoji{
  border-color:var(--b);box-shadow:0 0 28px rgba(139,92,246,.75);
}
.th-neon .tg-bookimg{box-shadow:0 0 26px rgba(34,211,238,.55)}
.th-neon.bd-on .tg-bookimg{border-color:var(--b)}
.th-neon .tg-title{text-shadow:4px 0 0 #000,-4px 0 0 #000,0 4px 0 #000,0 -4px 0 #000,12px 12px 0 var(--a)}
.th-neon .tg-tag{background:var(--b);color:#111}

/* 폴라로이드 흰 테두리는 '책 표지 테두리'를 켰을 때만 */
.th-cream.bd-on .tg-bookimg{border:14px solid #fff;border-bottom-width:34px;border-radius:2px;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.th-cream .tg-bubble,.th-cream .tg-stars,.th-cream .tg-emoji{border-width:3px;box-shadow:5px 5px 0 rgba(0,0,0,.18)}
.th-cream .tg-title{text-shadow:4px 0 0 #fff,-4px 0 0 #fff,0 4px 0 #fff,0 -4px 0 #fff,10px 10px 0 var(--a);color:var(--ink)}

.th-mono .tg-bookimg{filter:grayscale(1) contrast(1.08);border-radius:0}
.th-mono.bd-on .tg-bookimg{border-radius:0}
.th-mono .tg-bubble,.th-mono .tg-stars,.th-mono .tg-emoji{border-radius:0;box-shadow:8px 8px 0 var(--ink)}
.th-mono .tg-bubble[data-shape=blob]{border-radius:50%}
.th-mono .tg-star-row{color:var(--ink)}
.th-mono .tg-title{text-shadow:5px 0 0 var(--ink),-5px 0 0 var(--ink),0 5px 0 var(--ink),0 -5px 0 var(--ink),12px 12px 0 rgba(0,0,0,.25)}

/* ---- 모바일 ---- */
@media (max-width:920px){
  .layout{grid-template-columns:1fr;height:auto}
  .panel{border-right:none;border-top:3px solid var(--ink-ui);order:2}
  .stage{order:1;padding:16px;background:var(--paper-ui);
    border-bottom:3px solid var(--ink-ui)}
  .card-frame{box-shadow:5px 5px 0 var(--ink-ui)}
  .topbar{padding:8px 12px;gap:10px}
  .topbar .ttl{font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .home{padding:6px 9px;font-size:11px}
  .btn{padding:7px 11px;font-size:12px}
  .theme-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .status{display:none}
  .beta{display:none}
}