:root {
    --ink: #0F2D5B; --sub: #6B7A90; --line: rgba(15,45,91,.12);
    --glass: rgba(251,250,247,.88); --side: #FBFAF7; --accent: #3B82F6; --card: #FFFFFF;
    --navy: #0F2D5B; --sky: #60A5FA; --mint: #34D399; --coral: #FF6B6B; --beige: #F6E8D7; --offwhite: #FBFAF7;
    --serif: "Gowun Batang", serif; --hand: "Nanum Pen Script", cursive; --sans: "Noto Sans KR", -apple-system, sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #e6dccd; color: var(--ink); font-family: var(--sans); }
  button { font-family: inherit; color: inherit; }
  .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; }

  /* ---------- 사이드바 ---------- */
  .side { background: var(--side); border-right: 1px solid var(--line); padding: 30px 18px 22px; display: flex; flex-direction: column; overflow-y: auto; z-index: 5; min-width: 0; }
  .brand { display: flex; align-items: center; gap: 9px; margin: 0 2px; min-width: 0; }
  .brand .bm { width: 46px; height: 46px; flex-shrink: 0; display: block; }
  .brand .bw { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .brand .bw img { height: 27px; width: auto; display: block; }
  .brand small { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; color: var(--navy); white-space: nowrap; }
  .bextra { display: contents; }
  .bextra .sub { padding-left: 34px; font-size: 13.5px; }
  .bextra .sub .ic { opacity: .45; }
  .bextra .ghead .caret { margin-left: 6px; font-size: 10px; opacity: .55; }
  .bextra .bx { margin-left: auto; opacity: .55; font-size: 12px; padding: 0 2px; }
  .bextra .bx:hover { opacity: 1; }
  .tagline { margin: 10px 6px 0; font-size: 12.5px; color: var(--sub); line-height: 1.5; }
  .live { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; align-self: flex-start; font-size: 12px; color: var(--sub); background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 8px; white-space: nowrap; }
  .live[hidden] { display: none; }
  .live i { width: 7px; height: 7px; border-radius: 50%; background: #3fa35b; box-shadow: 0 0 0 0 rgba(63,163,91,.5); animation: livepulse 2.4s infinite; }
  .live b { color: var(--ink); font-weight: 700; }
  @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(63,163,91,.45); } 70% { box-shadow: 0 0 0 7px rgba(63,163,91,0); } 100% { box-shadow: 0 0 0 0 rgba(63,163,91,0); } }
  @media (prefers-reduced-motion: reduce) { .live i { animation: none; } }
  .sep { height: 1px; width: 28px; background: var(--line); margin: 22px 6px; }
  .navlbl { font-size: 11px; letter-spacing: .12em; color: var(--sub); margin: 18px 10px 6px; font-weight: 700; }
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav button, .nav a { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; text-align: left; text-decoration: none; color: var(--ink); }
  .nav button:hover, .nav a:hover { background: rgba(0,0,0,.035); }
  .nav button.active { background: #fff; box-shadow: 0 1px 3px rgba(60,40,20,.08); font-weight: 600; }
  .nav .ic { width: 18px; text-align: center; opacity: .7; font-size: 13px; }
  .nav .cnt { margin-left: auto; font-size: 11.5px; color: var(--sub); }
  .nav button.active .cnt { color: #1d4ed8; } /* 대비 4.5:1 이상 */

  /* ---------- 스테이지 ---------- */
  .stage { position: relative; overflow: hidden; min-width: 0; }
  #gl { position: absolute; inset: 0; touch-action: none; }
  #gl canvas { display: block; cursor: grab; }
  #gl canvas.drag { cursor: grabbing; }
  #gl canvas.hover { cursor: pointer; }
  #gl canvas.movable { cursor: move; }
  .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(70,50,30,.22) 100%); }
  .head { position: absolute; top: 26px; left: 34px; pointer-events: none; }
  .head h1 { margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
  .head p { margin: 6px 0 0; font-size: 13.5px; color: #5d534a; }
  .todaychip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.82); border: 1px solid rgba(60,45,30,.12); font-size: 12.5px; color: #3d342c; box-shadow: 0 1px 4px rgba(0,0,0,.06); backdrop-filter: blur(4px); }
  .todaychip[hidden] { display: none; }
  @media (min-width: 821px) { .head .todaychip { display: none; } } /* PC 는 아래 '최근 추가' 띠에 보여줌 (핀을 가리지 않게) */
  .todaymini { font-size: 11.5px; color: var(--sub); white-space: nowrap; line-height: 1.3; }
  .todaymini[hidden] { display: none; }
  .todaymini b { color: #0F2D5B; font-weight: 700; }
  .recent .rhead { gap: 5px; }
  .recent.collapsed .todaymini { display: none; }
  .todaychip b { font-weight: 700; color: #0F2D5B; }
  .todaychip .tsep { width: 1px; height: 11px; background: rgba(60,45,30,.2); }
  .boardbar { position: absolute; top: 80px; left: 30px; z-index: 6; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 60px); }
  .boardbar[hidden] { display: none; }
  .bnav { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(60,40,20,.08); font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; }
  .bnav:hover { background: #fff; }
  .btabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 4px 14px rgba(60,40,20,.08); overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 620px; scroll-behavior: smooth; }
  .btabs::-webkit-scrollbar { display: none; }
  .btabs button { border: 0; background: transparent; border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-family: inherit; color: var(--ink); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
  .btabs button:hover { background: rgba(0,0,0,.05); }
  .btabs button.on { background: #0F2D5B; color: #fff; font-weight: 600; }
  .btabs button .bx { margin-left: 6px; opacity: .6; }
  .bnav:focus-visible, .btabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .tools { position: absolute; top: 24px; right: 26px; display: flex; gap: 10px; align-items: center; z-index: 6; }
  .search { display: flex; align-items: center; gap: 8px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 0 16px; height: 42px; width: 300px; box-shadow: 0 4px 14px rgba(60,40,20,.08); min-width: 0; }
  .search input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; font-size: 14px; color: var(--ink); font-family: inherit; }
  .search kbd { font-size: 11px; color: var(--sub); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-family: inherit; }
  .search input::-webkit-search-cancel-button { display: none; }
  .qclear { border: 0; background: rgba(0,0,0,.07); width: 20px; height: 20px; border-radius: 50%; font-size: 10px; line-height: 20px; padding: 0; cursor: pointer; color: var(--sub); flex-shrink: 0; }
  .zoom .zsep { display: block; width: 18px; height: 1px; background: rgba(60,45,30,.18); margin: 2px auto; }
  .round svg { display: block; }
  .round { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 4px 14px rgba(60,40,20,.08); text-decoration: none; color: var(--ink); cursor: pointer; font-size: 16px; }
  .acct { font-family: var(--serif); font-weight: 700; font-size: 17px; background: #0F2D5B; color: #fff; border-color: #0F2D5B; }
  .acct.guest { background: var(--glass); color: var(--ink); border-color: rgba(255,255,255,.7); font-family: var(--sans); font-size: 13px; width: auto; padding: 0 16px; border-radius: 999px; font-weight: 600; }
  .acct { position: relative; }
  .acct.hasav { background-size: cover; background-position: center; }
  .acct.alert::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #e0452a; box-shadow: 0 0 0 2px #fff; }
  .menu { position: absolute; top: 52px; right: 0; width: 210px; background: var(--card); border-radius: 14px; box-shadow: 0 14px 40px rgba(60,40,20,.2); padding: 8px; opacity: 0; visibility: hidden; }
  .menu .who { padding: 10px 12px 12px; font-size: 13px; color: var(--sub); border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .menu .who b { color: var(--ink); font-size: 15px; display: block; margin-top: 2px; }
  .menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 9px; font-size: 14px; cursor: pointer; }
  .menu button:hover { background: rgba(0,0,0,.04); }

  /* ---------- 상세 패널 ---------- */
  .panel { position: absolute; top: 88px; right: 26px; width: 330px; max-height: calc(100% - 108px - var(--rb)); overflow-y: auto; overflow-x: hidden; background: rgba(252,249,245,.97); border-radius: 20px; box-shadow: 0 20px 50px rgba(60,40,20,.18); padding: 22px 24px 20px; opacity: 0; visibility: hidden; transform: translateX(30px); z-index: 4; }
  .panel .top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--sub); }
  .x { border: 0; background: transparent; font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; }
  .panel .cat { margin-top: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
  .panel h2 { font-family: var(--serif); font-size: 23px; line-height: 1.35; margin: 8px 0 12px; word-break: keep-all; overflow-wrap: anywhere; }
  .panel .body { font-size: 14px; line-height: 1.7; color: #4a423b; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
  .panel .author { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 14px; }
  .panel .dom { margin-top: 10px; font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
  .panel .stats { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
  .panel .stats .pill.report { margin-left: auto; padding: 7px 10px; }
  .pill.on { background: #fdece3; border-color: #f3c3a8; color: #c4522a; }
  .pill[hidden] { display: none; }
  .pill:disabled { opacity: .6; cursor: default; }
  .panel .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .panel .chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
  .panel .acts { display: grid; gap: 10px; margin-top: 16px; }
  .panel .own { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%; }
  .btn.dark { background: #0F2D5B; color: #fff; border-color: #0F2D5B; }
  .btn.danger { color: #b3261e; }
  .btn:disabled { opacity: .6; cursor: default; }
  [hidden] { display: none !important; }
  .dragtip { margin-top: 12px; font-size: 12px; color: var(--sub); text-align: center; }

  /* ---------- 최근 추가 ---------- */
  /* 최근 추가: 한 줄 가로 띠 (접을 수 있음). --rb = 하단 UI가 차지하는 높이 → 버튼·패널 위치 기준 */
  .stage { --rb: 118px; }
  .stage.rc { --rb: 68px; }
  .recent { position: absolute; left: 22px; right: 22px; bottom: 16px; height: 88px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; box-shadow: 0 10px 30px rgba(60,40,20,.12); padding: 0 8px 0 16px; display: flex; align-items: center; gap: 12px; z-index: 3; }
  .rhead { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; }
  .recent h3 { margin: 0; font-size: 11.5px; letter-spacing: .14em; color: #6b6158; font-weight: 700; white-space: nowrap; }
  .recent h3 small { letter-spacing: 0; font-weight: 600; color: var(--accent); margin-left: 4px; }
  .rbtns { display: flex; gap: 4px; }
  .rbtns button, .rtoggle { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.7); cursor: pointer; font-size: 13px; color: var(--ink); display: grid; place-items: center; padding: 0; }
  .rbtns button:disabled { opacity: .35; cursor: default; }
  .rlist { flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 6px 4px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); }
  .rlist::-webkit-scrollbar { display: none; }
  .rcard { flex: 0 0 176px; height: 62px; border: 0; border-radius: 6px; padding: 7px 10px 7px 8px; cursor: pointer; font-family: var(--hand); font-size: 17px; line-height: 1.05; text-align: left; box-shadow: 0 3px 8px rgba(60,40,20,.12); display: flex; align-items: center; gap: 9px; transition: transform .2s; overflow: hidden; }
  .rcard:hover { transform: translateY(-3px) rotate(-1deg) !important; }
  .rcard .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .rcard .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; } /* 최근 추가: 제목 한 줄 + ... */
  .rcard .d { font-family: var(--sans); font-size: 10.5px; color: inherit; opacity: .6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .rcard .ri { width: 46px; height: 46px; border-radius: 4px; background: center/cover no-repeat; flex-shrink: 0; box-shadow: 0 0 0 2px #fff; }
  .rempty { font-size: 13px; color: var(--sub); padding: 0 4px; }
  .rtoggle { flex-shrink: 0; align-self: flex-start; margin-top: 8px; }
  .recent.collapsed { right: auto; height: 40px; border-radius: 999px; padding: 0 6px 0 14px; gap: 8px; cursor: pointer; }
  .recent.collapsed .rlist, .recent.collapsed .rbtns { display: none; }
  .recent.collapsed .rhead { flex-direction: row; }
  .recent.collapsed .rtoggle { margin-top: 0; align-self: center; }

  .fab { position: absolute; left: 50%; bottom: calc(var(--rb) + 8px); transition: bottom .35s ease; width: 58px; height: 58px; margin-left: -29px; border: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffc9a3, #f08a55); color: #fff; font-size: 30px; font-weight: 300; cursor: pointer; box-shadow: 0 0 0 10px rgba(240,138,85,.18), 0 10px 25px rgba(220,110,60,.45); z-index: 3; }
  .zoom { position: absolute; right: 26px; bottom: calc(var(--rb) + 8px); transition: bottom .35s ease; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
  .hint { position: absolute; left: 34px; bottom: calc(var(--rb) + 6px); transition: bottom .35s ease; font-size: 12px; color: #6b6158; background: rgba(250,246,240,.6); padding: 6px 12px; border-radius: 999px; pointer-events: none; }
  .empty { position: absolute; inset: 0; display: none; place-items: center; font-family: var(--serif); font-size: 18px; color: #6b6158; pointer-events: none; text-align: center; line-height: 1.8; }
  .loader { position: absolute; inset: 0; display: grid; place-items: center; background: #e6dccd; z-index: 10; font-family: var(--hand); font-size: 30px; color: #6b6158; }
  .fallback { padding: 60px 30px; text-align: center; font-family: var(--serif); font-size: 17px; }
  .toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: #0F2D5B; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; z-index: 50; opacity: 0; visibility: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: none; max-width: 90vw; text-align: center; }
  .toast.bad { background: #9c2f1f; }

  /* ---------- 모달 ---------- */
  .modal { position: fixed; inset: 0; background: rgba(40,30,20,.38); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: grid; place-items: center; z-index: 30; opacity: 0; visibility: hidden; padding: 16px; }
  .modal.stacked { z-index: 36; background: rgba(40,30,20,.22); }  /* 작성 창 위에 겹쳐 뜨는 패널 */
  /* 설정: 화면 글자 크기 (3D 캔버스는 제외하고 UI만 확대) */
  .side, .tools, .panel, .recent, .mcard, .toast { zoom: var(--uiz, 1); }
  .pref .psec { margin: 18px 0 8px; font-size: 13px; letter-spacing: .08em; color: var(--sub); font-weight: 700; border-top: 1px solid var(--line); padding-top: 14px; }
  .pref .psec:first-of-type { border-top: 0; padding-top: 0; }
  .pref .field { margin-bottom: 12px; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13.5px; cursor: pointer; color: var(--ink); font-family: inherit; }
  .chips button.on { background: #0F2D5B; border-color: #0F2D5B; color: #fff; }
  .bgbox { margin-top: 10px; background: #f6f1e8; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
  .bgbox-h { font-size: 12.5px; color: var(--sub); font-weight: 700; margin-bottom: 10px; }
  .cswatch { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
  .cswatch button { aspect-ratio: 1; width: 100%; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(0,0,0,.1); cursor: pointer; padding: 0; position: relative; }
  .cswatch button.on { box-shadow: 0 0 0 2px #0F2D5B; }
  .cswatch button.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ck, #0F2D5B); }
  .ccustom { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; cursor: pointer; position: relative; }
  .ccustom .cprev { width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); flex-shrink: 0; }
  .ccustom .ctxt { display: flex; flex-direction: column; font-size: 14px; }
  .ccustom .ctxt small { color: var(--sub); font-size: 12px; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
  .ccustom input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
  .ccustom::after { content: "›"; margin-left: auto; font-size: 20px; color: var(--sub); }
  .drop { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; border: 2px dashed rgba(60,45,30,.22); background: #fff; cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; }
  .drop:hover, .drop.over { border-color: #3B82F6; background: #fff8f2; }
  .drop.has { border-style: solid; border-color: transparent; }
  .drop-prev { position: absolute; inset: 0; background: center/cover no-repeat; }
  .drop-empty { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px; color: var(--ink); }
  .drop-empty .drop-ic { font-size: 30px; line-height: 1; margin-bottom: 4px; }
  .drop-empty b { font-size: 15px; }
  .drop-empty small { font-size: 12px; color: var(--sub); }
  .drop.has .drop-empty { display: none; }
  .drop-change { display: none; position: absolute; right: 10px; bottom: 10px; background: rgba(30,22,16,.72); color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .drop.has .drop-change { display: block; }
  .vh { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .dimrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--sub); }
  .dimrow input { flex: 1; accent-color: #0F2D5B; min-width: 0; }
  .dimrow output { width: 38px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
  .imgfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
  .phint { margin: 0; font-size: 12px; color: var(--sub); line-height: 1.5; }
  .linkbtn { border: 0; background: transparent; color: #b3261e; font-size: 12.5px; cursor: pointer; padding: 4px 0; white-space: nowrap; font-family: inherit; }
  .pref .mact .btn { flex: 1; }
  body.darkbg .head h1, body.darkbg .head p, body.darkbg .empty { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
  /* 사진 비율 고르기 */
  .ratiopick { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
  .ratiopick .rp-l { font-size: 12.5px; color: var(--sub); margin-right: 2px; }
  .ratiopick label { display: inline-block !important; margin: 0 !important; cursor: pointer; position: relative; }
  .ratiopick input { position: absolute; opacity: 0; pointer-events: none; }
  .ratiopick label span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; background: #fff; color: var(--ink); }
  .ratiopick i { display: inline-block; border: 2px solid currentColor; border-radius: 3px; opacity: .75; }
  .ratiopick i.rp-auto { width: 14px; height: 12px; border-style: dashed; }
  .ratiopick input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
  .ratiopick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* 링크 대표 사진: 켜고 끄는 스위치 카드 */
  .thumbcard { display: flex !important; align-items: center; gap: 10px; margin: 8px 0 0 !important; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #F4F8FF; cursor: pointer; transition: background .2s; }
  .thumbcard[hidden] { display: none !important; }
  .thumbcard .tc-ic { font-size: 20px; line-height: 1; flex-shrink: 0; transition: opacity .2s, filter .2s; }
  .thumbcard .tc-tx { flex: 1; min-width: 0; line-height: 1.4; }
  .thumbcard .tc-tx b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
  .thumbcard .tc-tx small { display: block; font-size: 12px; color: var(--sub); margin-top: 2px; }
  .thumbcard input { width: 42px; height: 24px; appearance: none; -webkit-appearance: none; background: #d3d8e0; border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; margin: 0; }
  .thumbcard input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
  .thumbcard input:checked { background: var(--accent); }
  .thumbcard input:checked::after { transform: translateX(18px); }
  .thumbcard input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .thumbcard.off { background: #fff; }
  .sensrow:not(.off) { background: #FFF1F3; border-color: #F7C6CF; }
  .pmedia { position: relative; }
  .pmedia.sens > .pimg, .pmedia.sens > .pyt { filter: blur(26px) saturate(.6); pointer-events: none; }
  .psens { position: absolute; top: 16px; bottom: 0; left: -24px; right: -24px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: rgba(15,20,30,.38); color: #fff; cursor: pointer; font-family: inherit; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
  .psens .ps-i { font-size: 30px; } .psens b { font-size: 15px; } .psens small { font-size: 12.5px; opacity: .9; }
  .psens:hover { background: rgba(15,20,30,.3); }
  .psens:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
  .rcard .ri.blur { filter: blur(6px); }
  .thumbcard.off .tc-ic { opacity: .45; filter: grayscale(1); }
  .thumbtg { display: block; margin: -4px 0 12px auto; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--ink); }
  .thumbtg:disabled { opacity: .6; }
  .panel .author { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
  .panel .author a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 3px; }
  .panel .author a:hover { color: #2563EB; }
  .pfollow { margin-left: 4px; border: 1px solid #3B82F6; background: #3B82F6; color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; font-style: normal; font-family: var(--sans); cursor: pointer; }
  .pfollow.on { background: #fff; color: var(--ink); border-color: var(--line); }
  .pfollow:disabled { opacity: .6; }
  .policy-card { width: min(760px, 100%) !important; height: min(820px, 88vh); display: flex; flex-direction: column; overflow: hidden !important; padding-bottom: 14px !important; }
  #policyModal.over { z-index: 31; } /* 가입 창 위에 겹쳐 뜰 때 */
  #toolsModal.over { z-index: 31; } /* 작성 창 위에 겹쳐 뜰 때 */
  .admin-card { width: min(1120px, 100%) !important; height: min(900px, 92vh) !important; }
  .mhead-r { display: flex; align-items: center; gap: 10px; }
  .mhead-r .newtab { font-size: 12.5px; color: var(--accent); text-decoration: none; white-space: nowrap; }
  .mhead-r .newtab:hover { text-decoration: underline; }
  .import-card { width: min(560px, 100%) !important; }
  .imp-how { margin: -6px 0 14px; font-size: 13px; color: var(--sub); }
  .imp-how summary { cursor: pointer; color: var(--accent); font-weight: 600; }
  .imp-how ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
  .imp-how code { font-size: 11.5px; background: #F2F4F8; border-radius: 5px; padding: 0 5px; }
  .imp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border: 2px dashed var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-align: center; cursor: pointer; }
  .imp-drop:hover, .imp-drop.over { border-color: var(--accent); background: #F4F7FD; }
  .imp-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .imp-drop .imp-ic { font-size: 30px; }
  .imp-drop b { font-size: 14px; }
  .imp-drop small { font-size: 12px; color: var(--sub); }
  .imp-sum { font-size: 14px; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(59,130,246,.07); color: var(--ink); }
  .imp-sum b { color: var(--accent); }
  .imp-bar { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
  .imp-bar span { flex: 1; }
  .imp-bar button { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
  .imp-folders { max-height: 230px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 4px; }
  .imp-folders label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--ink); }
  .imp-folders label:hover { background: #F4F7FD; }
  .imp-folders .fp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .imp-folders .fp small { color: var(--sub); }
  .imp-folders .fc { font-size: 12px; color: var(--sub); flex-shrink: 0; }
  .imp-opt { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13.5px; color: var(--ink); }
  .imp-opt label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  .imp-prog { height: 8px; border-radius: 999px; background: #E8EDF5; overflow: hidden; margin-top: 12px; }
  .imp-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }
  .policy-agree { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
  .policy-agree[hidden] { display: none; }
  .policy-agree .btn { height: 40px; padding: 0 16px; }
  .policy-card iframe { flex: 1; min-height: 0; width: 100%; border: 0; border-radius: 12px; background: #FBFAF7; margin-top: 6px; display: block; }
  .mcard { width: min(440px, 100%); max-height: 92vh; overflow-y: auto; overflow-x: hidden; background: var(--card); border-radius: 22px; box-shadow: 0 30px 70px rgba(40,25,10,.3); padding: 26px 26px 22px; }
  .mcard * { min-width: 0; }
  .swatches input, .seg input, .imgpick input[type=file] { width: 1px; height: 1px; margin: 0; padding: 0; }
  .swatches label, .seg label, .pickbtn { position: relative; overflow: hidden; }
  .mcard h2 { margin: 0; font-family: var(--serif); font-size: 24px; }
  .mcard .mhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .mcard .msub { margin: 4px 0 16px; font-size: 13px; color: var(--sub); line-height: 1.5; }
  .mcard .msub-link { color: var(--accent); text-decoration: none; white-space: nowrap; font-weight: 600; }
  .mcard .msub-link:hover { text-decoration: underline; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; background: rgba(0,0,0,.05); border-radius: 12px; padding: 4px; margin: 14px 0 6px; }
  .tabs button { border: 0; background: transparent; padding: 9px; border-radius: 9px; font-size: 14px; cursor: pointer; font-weight: 600; color: var(--sub); }
  .tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
  .field { margin-top: 12px; }
  .field label { display: block; font-size: 12.5px; color: var(--sub); margin-bottom: 5px; }
  .field input:not([type=radio]):not([type=checkbox]):not([type=file]), .field textarea { width: 100%; max-width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; font-size: 15px; background: #fff; color: var(--ink); font-family: inherit; outline: none; }
  .field input:focus, .field textarea:focus { border-color: #d9a47f; box-shadow: 0 0 0 3px rgba(224,112,58,.12); }
  .field textarea { display: block; min-height: 96px; max-height: 50vh; resize: vertical; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; font-family: var(--sans); font-size: 15px; line-height: 1.6; }
  .field .help { font-size: 11.5px; color: var(--sub); margin-top: 5px; }
  .swatches { display: flex; gap: 8px; flex-wrap: wrap; }
  .swatches label { margin: 0; cursor: pointer; }
  .swatches input { position: absolute; opacity: 0; pointer-events: none; }
  .swatches span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-size: 11px; color: var(--sub); }
  .swatches input:checked + span { border-color: #0F2D5B; }
  .swatches .cpick { position: relative; }
  .swatches .cpick input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; pointer-events: auto; }
  .swatches .cpick span { background: conic-gradient(#f28b82, #fbbc04, #fff475, #ccff90, #a7ffeb, #aecbfa, #d7aefb, #f28b82); font-size: 15px; }
  .swatches .cpick input[type=radio]:checked ~ span { border-color: #0F2D5B; }
  .swatches .cpick:focus-within span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .swatches input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .merr { margin-top: 12px; font-size: 13px; color: #b3261e; min-height: 18px; }
  .draftbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #eef3ea; border: 1px solid #cfdcc6; color: #3f5433; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 4px; }
  .draftbar button { border: 1px solid #cfdcc6; background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; flex-shrink: 0; }
  .savedhint { font-size: 12px; color: var(--sub); text-align: center; margin-top: 8px; min-height: 16px; }
  .agree { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: #5d534a; line-height: 1.5; cursor: pointer; }
  .agree input { margin-top: 3px; accent-color: #0F2D5B; }
  .agree a { color: #2563EB; }
  .keybox { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 20px; letter-spacing: .06em; text-align: center; padding: 18px 10px; background: #fff; border: 1.5px dashed rgba(60,45,30,.3); border-radius: 12px; margin: 6px 0 10px; user-select: all; word-break: break-all; }
  .linkbtn { display: block; margin: 14px auto 0; border: 0; background: transparent; color: var(--sub); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
  .taghint { margin: 4px 10px 0; font-size: 12px; color: var(--sub); line-height: 1.5; }
  .taghint:empty { display: none; }
  /* 내 태그: 양끝이 둥근 알약 모양 칩 + 개수 */
  .tagchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px; }
  .tagchips button { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.6); border-radius: 999px; padding: 4px 5px 4px 10px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; letter-spacing: .02em; }
  .tagchips button:hover { background: #fff; }
  .tagchips button .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tagchips button .cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(0,0,0,.07); font-size: 11px; line-height: 18px; text-align: center; color: var(--sub); flex-shrink: 0; }
  .tagchips button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
  .tagchips button.active .cnt { background: rgba(255,255,255,.22); color: #fff; }
  .tagchips button.more { padding: 4px 10px; color: var(--sub); border-style: dashed; background: transparent; }
  /* 사진 */
  video.pimg { object-fit: contain; background: #111; }
  /* 유튜브 링크: 눌러야 불러오는 플레이어 (서버에 저장하지 않음) */
  .pyt { position: relative; width: calc(100% + 48px); margin: 16px -24px 0; aspect-ratio: 16 / 9; background: #0b0b0b; overflow: hidden; }
  .pyt.short { width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 16px auto 0; border-radius: 12px; }
  .pyt.ig { width: min(100%, 340px); aspect-ratio: 9 / 15.5; margin: 16px auto 0; border-radius: 12px; background: #fff; }
  .pyt.ig .ytplay { background-color: #1b1b1b; }
  /* 재생 중인 인스타: 삽입 화면이 알려주는 높이만큼 늘리고, 너무 길면 안에서 스크롤 */
  .pyt.ig.live { aspect-ratio: auto; height: auto; max-height: min(78vh, 760px); overflow-y: auto; overscroll-behavior: contain; }
  .pyt.ig.live iframe { position: static; display: block; width: 100%; height: 720px; }
  .pyt a.ytplay { display: block; text-decoration: none; }
  .pyt .ytplay .yi.out::after { content: '↗'; border: 0; margin: 0; font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
  .pyt .ytplay .ymsg { position: absolute; left: 12px; right: 12px; bottom: 34px; font-size: 12px; line-height: 1.5; color: #fff; opacity: .92; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  .yfb { display: block; margin: 8px auto 0; width: fit-content; font-size: 12.5px; color: var(--sub); text-decoration: none; }
  .yfb:hover { color: var(--accent); text-decoration: underline; }
  .pyt .ytplay.noimg { background-image: linear-gradient(135deg, #1f2937, #0b0b0b) !important; }
  .pyt .ybusy { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; background: #0b0b0b; }
  .pyt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .pyt .ytplay { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #0b0b0b center / cover no-repeat; color: #fff; }
  .pyt .ytplay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
  .pyt .ytplay .yi { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .15s; }
  .pyt .ytplay .yi::after { content: ''; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
  .pyt .ytplay:hover .yi { transform: scale(1.08); }
  .pyt .ytplay:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
  .pyt .ytplay .ybr { width: 22px; height: 22px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  .pyt .ytplay .yl { display: flex; align-items: center; gap: 7px; position: absolute; left: 12px; bottom: 10px; font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  .pimg { display: block; width: calc(100% + 48px); margin: 16px -24px 0; max-height: 300px; object-fit: cover; background: #eee6da; }
  .imgpick { display: flex; gap: 12px; align-items: center; }
  .imgpick .thumb { width: 84px; height: 84px; border-radius: 10px; background: #fff center/cover no-repeat; border: 1.5px dashed rgba(60,45,30,.25); display: grid; place-items: center; color: var(--sub); font-size: 26px; flex-shrink: 0; }
  .imgpick .thumb.has { border-style: solid; font-size: 0; }
  .imgpick .ctl { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--sub); }
  .imgpick .ctl button, .imgpick .ctl label.pickbtn { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 7px 12px; font-size: 13px; cursor: pointer; text-align: center; color: var(--ink); }
  .imgpick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .imgpick input[type=file]:focus-visible + span { outline: 2px solid var(--accent); }
  .seg { display: grid; grid-template-columns: 1fr 1fr; background: rgba(0,0,0,.05); border-radius: 11px; padding: 4px; }
  .seg label { margin: 0; text-align: center; padding: 8px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--sub); cursor: pointer; }
  .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .seg label:has(input:checked) { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
  .seg label:has(input:focus-visible) { outline: 2px solid var(--accent); }
  .toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; cursor: pointer; margin: 0; color: var(--ink); }
  .toggle small { display: block; font-size: 12px; color: var(--sub); }
  .toggle input { width: 42px; height: 24px; appearance: none; -webkit-appearance: none; background: #d9d1c6; border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; margin: 0; }
  .toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
  .toggle input:checked { background: #0F2D5B; }
  .toggle input:checked::after { transform: translateX(18px); }
  .toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .noclone { font-size: 12.5px; color: var(--sub); text-align: center; padding: 6px 0; }
  .hidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hidebar[hidden] { display: none; }
  .hidebar .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adbadge { margin-top: 14px; background: #f7efe6; border: 1px solid #ead9c6; color: #4f3b28; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.55; font-weight: 600; overflow-wrap: anywhere; }
  .srcline { margin-top: 8px; font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
  .srcline a { color: #2563EB; }
  .adpresets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
  .adpresets button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; }
  .adpresets button.on { background: #f6f1ea; border-color: #c9a26b; color: #5d4a36; font-weight: 600; }
  .hlabel { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--sub); margin: 16px 0 6px; }
  .reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
  .reasons label { position: relative; display: block; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; cursor: pointer; }
  .reasons input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .reasons label:has(input:checked) { border-color: #0F2D5B; box-shadow: inset 0 0 0 1px #0F2D5B; font-weight: 600; }
  .reasons label:has(input:focus-visible) { outline: 2px solid var(--accent); }
  .blockednote { margin-top: 10px; background: #fdecea; border: 1px solid #f4c5bf; color: #8a2a1e; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; }
  .arow { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .arow .ahead { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
  .arow .ahead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .arow .ameta { font-size: 12px; color: var(--sub); margin-top: 2px; }
  .arow ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: #4a423b; line-height: 1.55; }
  .arow .aacts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
  .arow .aacts button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
  .arow .aacts .del { color: #b3261e; border-color: #f0c2bc; }
  .tagb { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin-left: 6px; background: #fdecea; color: #8a2a1e; }
  .hlist { display: flex; flex-direction: column; gap: 6px; }
  .hrow { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; font-size: 14px; }
  .hrow .hname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hrow .hname small { color: var(--sub); margin-left: 6px; }
  .hrow button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; flex-shrink: 0; }
  .hempty { font-size: 13px; color: var(--sub); padding: 6px 2px; }
  .toast button { margin-left: 12px; border: 0; background: rgba(255,255,255,.18); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .mact { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
  .tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
  .tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
  .tpl:hover { border-color: var(--accent); transform: translateY(-1px); }
  .tpl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .tpl .ti { font-size: 22px; }
  .tpl b { font-size: 14.5px; }
  .tpl small { font-size: 12px; color: var(--sub); line-height: 1.4; }
  @media (max-width: 420px) { .tpls { grid-template-columns: 1fr; } }

  /* ---------- 책 팝업 (프로필 · 내 관리) ---------- */
  .book { position: fixed; inset: 0; z-index: 32; background: rgba(35,24,14,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; }
  .book-stage { position: relative; width: min(960px, 100%); height: min(760px, calc(100dvh - 48px)); }
  .book-body { position: absolute; inset: 0; background: #FBFAF7; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(20,12,4,.4); }
  .book-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 10px 18px; background: #f3ebdd; border-bottom: 1px solid var(--line); flex-shrink: 0; }
  .book-tabs { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .book-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13.5px; cursor: pointer; color: var(--ink); white-space: nowrap; font-family: inherit; }
  .book-tabs button.on { background: #0F2D5B; border-color: #0F2D5B; color: #fff; font-weight: 600; }
  .book-tabs button[hidden] { display: none; }
  .book-spread { position: relative; flex: 1; min-height: 0; }
  .book-spread iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
  @media (max-width: 760px) {
    .book { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
    .book-stage { height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .book-bar { padding: 8px 10px 8px 12px; }
  }
  /* ---------- 알림 · 그룹 · 신고 ---------- */
  .bell { position: relative; font-size: 17px; }
  .bdot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e0452a; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
  .menu.notif { width: 330px; padding: 0; overflow: hidden; }
  .nhead { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .nhead b { flex-shrink: 0; font-size: 15px; }
  .nhead .nacts { display: flex; gap: 6px; flex-shrink: 0; }
  .nhead .nacts button, .nfoot a { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
  .nhead .nacts button:hover:not(:disabled), .nfoot a:hover { background: #F4F8FF; border-color: #C9D7F2; color: #2563EB; }
  .nhead .nacts button:focus-visible, .nfoot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nhead .nacts button:disabled { color: var(--sub); background: #f6f6f6; border-color: transparent; cursor: default; }
  .nfoot { padding: 10px 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
  .nprefs { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .nprefs[hidden] { display: none; }
  .nprefs .nph b { display: block; font-size: 13.5px; color: var(--ink); }
  .nprefs .nph small { display: block; font-size: 12px; color: var(--sub); margin-top: 2px; line-height: 1.4; }
  .nprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .nprow label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: #F4F8FF; user-select: none; }
  .nprow label.off { background: #fff; color: var(--sub); text-decoration: line-through; }
  .nprow label[hidden] { display: none; }
  .nprow input { accent-color: var(--accent); margin: 0; }
  .nprow.locked { opacity: .5; pointer-events: none; }
  .nlist { max-height: 60vh; overflow-y: auto; }
  .nitem { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-bottom: 1px solid rgba(60,45,30,.06); font-size: 13.5px; line-height: 1.45; cursor: pointer; background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; }
  .nitem:hover { background: rgba(0,0,0,.03); }
  .nitem.unread { background: #fff8f0; }
  .nitem .ni { font-size: 18px; flex-shrink: 0; }
  .nitem .nt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .nitem .nt small { display: block; color: var(--sub); font-size: 11.5px; margin-top: 2px; }
  .nempty { padding: 28px 14px; text-align: center; color: var(--sub); font-size: 13px; }
  .seg3 { grid-template-columns: 1fr 1fr 1fr; }
  .grouppick { display: flex; gap: 8px; margin-top: 8px; }
  .grouppick select, .field select { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: #fff; color: var(--ink); font-family: inherit; }
  .field select { width: 100%; }
  .grouppick button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 0 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
  .gnew { display: flex; gap: 8px; }
  .gnew input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; font-size: 15px; font-family: inherit; }
  .gnew .btn { width: auto; padding: 0 18px; height: 46px; }
  .gcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .gcard .gh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
  .gcard .gh small { font-weight: 400; color: var(--sub); font-size: 12px; }
  .gcard .gmem { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
  .gcard .gmem span { display: inline-flex; align-items: center; gap: 4px; background: #FBFAF7; border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12.5px; }
  .gcard .gmem button { border: 0; background: rgba(0,0,0,.08); width: 18px; height: 18px; border-radius: 50%; font-size: 10px; cursor: pointer; padding: 0; }
  .gcard .gadd { display: flex; gap: 6px; }
  .gcard .gadd input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; font-family: inherit; }
  .gcard .gadd button, .gcard .gh button { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 7px 10px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
  .gcard .gh .del { color: #b3261e; border-color: #f0c2bc; }
.ginv { margin-top: 12px; padding: 11px 12px 12px; border-radius: 11px; background: rgba(59,130,246,.06); border: 1px dashed rgba(59,130,246,.4); color: var(--ink); }
.ginv .gi-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; font-weight: 700; }
.ginv .gi-h small { font-weight: 400; font-size: 12px; color: var(--sub); }
.ginv .gi-row { display: flex; gap: 6px; margin-top: 9px; }
.ginv .gi-url { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; }
.ginv button { height: 36px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 9px; padding: 0 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ginv button:hover { background: #F4F7FD; }
.ginv .gi-copy { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; min-width: 64px; }
.ginv .gi-copy:hover { background: #2F6FD8; }
.ginv .gi-make { width: 100%; margin-top: 9px; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.ginv .gi-make:hover { background: #2F6FD8; }
.ginv button:focus-visible, .ginv .gi-url:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ginv button:disabled { opacity: .6; cursor: default; }
.ginv .gi-qr { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.ginv .gi-qr[hidden] { display: none; }
.ginv .gi-qr canvas { width: 132px; height: auto; flex-shrink: 0; border-radius: 6px; }
.ginv .gi-qr p { margin: 0 0 10px; font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.ginv .gi-qr b { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 3px; }
.ginv button[aria-expanded="true"] { background: #E8F0FE; border-color: rgba(59,130,246,.5); }
@media (max-width: 480px) { .ginv .gi-row { flex-wrap: wrap; } .ginv .gi-url { flex-basis: 100%; } .ginv .gi-row button { flex: 1; } .ginv .gi-qr { flex-direction: column; text-align: center; } .ginv .gi-qr canvas { width: 180px; } }
  .btn.report, .pill.report { color: #b3261e; border-color: #f0c2bc; background: #fffafa; }
  .sidefoot { margin-top: auto; padding: 22px 0 0; display: grid; gap: 6px; }
  .sfbtn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--line); background: rgba(255,255,255,.6); border-radius: 10px; font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sfbtn:hover { background: #fff; }
  .sfbtn.report { color: #b3261e; border-color: #f0c2bc; }
  .sfbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .operatorinfo { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.8; color: var(--sub); overflow-wrap: anywhere; }
  .operatorinfo p { margin: 0; }
  .operatorinfo a { color: var(--ink); text-underline-offset: 3px; }
  .operatorinfo a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (max-width: 820px) {
    .sidefoot { display: none; }
    .head { display: none; }                       /* 상단 최적화: 큰 제목 숨김 */
    .head:has(.todaychip:not([hidden])) { display: block; top: 60px; left: 10px; right: 10px; text-align: center; } /* 오늘 핀 수만 검색창 아래에 */
    .head:has(+ .boardbar:not([hidden])) { top: 108px; }
    .head:has(.todaychip:not([hidden])) h1, .head:has(.todaychip:not([hidden])) p { display: none; }
    .todaychip { margin-top: 0; font-size: 12px; padding: 4px 11px; }
    .boardbar { top: 62px; left: 10px; right: 10px; max-width: none; justify-content: center; }
    .btabs { max-width: none; }
    .tools { top: 8px; }
    .panel { max-height: 78%; }                    /* 상세 시트 더 높게 */
    .menu.notif { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; border-radius: 18px; }
    .modal.top { place-items: start center; padding: max(12px, env(safe-area-inset-top)) 10px 0; }
    .modal.top .mcard { border-radius: 20px; max-height: calc(100dvh - 24px); padding-bottom: 20px; }
    .seg3 label { font-size: 12.5px; padding: 11px 2px; }
  }
  /* ---------- 모바일 ---------- */
  @media (max-width: 820px) {
    .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; }
    .side { flex-direction: row; align-items: center; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); gap: 8px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .side::-webkit-scrollbar { display: none; }
    .brand { gap: 6px; margin: 0 2px; flex-shrink: 0; } .brand .bm { width: 32px; height: 32px; } .brand .bw img { height: 19px; } .brand small { display: none; }
    .tagline, .sep, .navlbl, .nav.main a, .taghint { display: none; }
    .nav { flex-direction: row; gap: 6px; }
    .nav button { white-space: nowrap; padding: 8px 12px; background: rgba(0,0,0,.04); width: auto; min-height: 36px; font-size: 13.5px; }
    .nav .ic { width: auto; }
    .nav .cnt { margin-left: 4px; }
    .tagchips { flex-wrap: nowrap; padding: 0; }
    .tagchips button { white-space: nowrap; min-height: 36px; padding: 6px 6px 6px 12px; font-size: 13px; }
    .head { top: 14px; left: 16px; right: 16px; }
    .head h1 { font-size: 21px; }
    .head p { display: none; }
    .tools { top: 8px; left: 10px; right: 10px; gap: 6px; }
    .search { width: auto; flex: 1; height: 44px; }
    .search input { font-size: 16px; } /* iOS 입력 시 자동 확대 방지 */
    .search kbd { display: none; }
    .round { width: 44px; height: 44px; }
    .menu { position: fixed; top: auto; right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; border-radius: 18px; padding: 10px; z-index: 40; }
    .menu button { padding: 13px 12px; font-size: 15px; }
    .recent, .hint { display: none; }
    .fab { bottom: calc(20px + env(safe-area-inset-bottom)); left: auto; right: 18px; margin: 0; }
    .zoom { right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); } /* 모바일: 확대/축소는 두 손가락, 보드 버튼만 */
    .zoom #zIn, .zoom #zOut, .zoom #zFit { display: none; }
    .panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 78%; border-radius: 20px 20px 0 0; transform: translateY(40px); padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
    .panel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.15); margin: -6px auto 10px; }
    .panel h2 { font-size: 21px; }
    .pimg { width: calc(100% + 36px); margin: 12px -18px 0; max-height: 200px; }
    .psens { top: 12px; left: -18px; right: -18px; }
    .pyt { width: calc(100% + 36px); margin: 12px -18px 0; }
    .pyt.short { width: min(100%, 240px); margin: 12px auto 0; }
    .pyt.ig { width: min(100%, 300px); margin: 12px auto 0; }
    /* 모달은 아래에서 올라오는 시트 */
    .modal { place-items: end center; padding: 0; }
    .mcard { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
    .mcard h2 { font-size: 21px; }
    .field input:not([type=radio]):not([type=checkbox]):not([type=file]), .field textarea { font-size: 16px; }
    .reasons label { padding: 12px; }
    .seg label { padding: 11px 6px; }
    .swatches { gap: 10px; }
    .swatches span { width: 38px; height: 38px; }
    .btn { height: 50px; font-size: 15px; }
    .toast { bottom: calc(92px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
    .empty { padding: 0 24px; font-size: 16px; }
  }
  @media (max-width: 380px) {
    .reasons { grid-template-columns: 1fr; }
    .head h1 { font-size: 19px; }
  }