/* ───────── 편집기 ─────────
   분위기: 하늘색 종이 위에 흰 별이 흩어진 몽글몽글한 다꾸 무드 — 레이스 테두리, 손글씨, 파스텔 블루 + 연핑크 */
:root {
  --sky: #b9d1ec;
  --sky-2: #a7c4e6;
  --ice: #f3f7fa;
  --cloud: #ffffff;
  --blue: #c0d1dc;
  --blue-d: #5f7a8c;
  --ink: #34495a;
  --mid: #8d9fad;
  --line: #d3e0e9;
  --pink: #c0d1dc;
  --pink-d: #8fa9bb;
  --round: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Helvetica, Arial, sans-serif;
  --hand: var(--round);
  --script: var(--round);
  --lace: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36'><g fill='%23fff'><rect x='6' y='6' width='24' height='24'/><circle cx='6' cy='6' r='6'/><circle cx='18' cy='6' r='6'/><circle cx='30' cy='6' r='6'/><circle cx='6' cy='18' r='6'/><circle cx='30' cy='18' r='6'/><circle cx='6' cy='30' r='6'/><circle cx='18' cy='30' r='6'/><circle cx='30' cy='30' r='6'/></g><g fill='%23cfe0f4'><circle cx='6' cy='6' r='1.6'/><circle cx='18' cy='5' r='1.6'/><circle cx='30' cy='6' r='1.6'/><circle cx='5' cy='18' r='1.6'/><circle cx='31' cy='18' r='1.6'/><circle cx='6' cy='30' r='1.6'/><circle cx='18' cy='31' r='1.6'/><circle cx='30' cy='30' r='1.6'/></g></svg>");
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  color: var(--ink); font: 400 10.5px/1.6 var(--round); -webkit-font-smoothing: antialiased; min-height: 100vh;
  background: #fff;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px dashed var(--blue); outline-offset: 3px; }
::selection { background: var(--pink); color: var(--ink); }


/* 머리말 */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--line); }
.brand { font: 400 10px/1.3 var(--round); color: var(--mid); white-space: nowrap; }
.brand b { display: block; font: 700 15.5px/1.2 var(--round); color: var(--blue-d); letter-spacing: -.02em; }

.brand span { display: none; }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { border: 1.5px solid var(--line); background: #fff; padding: 5px 12px 4px; border-radius: 0; font: 400 13px/1.2 var(--round); color: var(--blue-d); white-space: nowrap; transition: transform .2s, background .2s; }
.tabs button sup { display: none; }
.tabs button:hover { border-color: var(--blue); }
.tabs button.on { background: var(--blue); border-color: var(--blue); color: var(--ink); font-weight: 700; }


.work { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 36px; max-width: 1180px; margin: 0 auto; padding: 26px 24px 70px; align-items: start; }
.preview { position: sticky; top: 92px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.hero { width: 100%; max-width: 440px; margin: 0; display: flex; justify-content: space-between; align-items: center; font: 700 20px/1.2 var(--round); color: var(--blue-d); letter-spacing: -.02em; }
.hero small { display: none; }
.pv-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; max-width: 440px; }
.pv-stage { display: flex; justify-content: center; width: 100%; }
.pv-stage { padding: 12px 0; }
/* 미리보기 액자는 그림자로만 그려서 PNG·HTML 저장에는 들어가지 않게 */
.pv-stage > .shot { box-shadow: 0 0 0 10px #fff, 0 0 0 11.5px var(--line); }
.pv-stage > .shot.story { border-radius: 0; }
.pv-hint { margin: 0; max-width: 420px; font: 400 11.5px/1.5 var(--round); color: var(--mid); text-align: center; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: #fff; border: 1.5px solid var(--line); border-radius: 0; }
.seg button { border: 0; background: none; padding: 3px 13px; border-radius: 0; font: 400 11.5px var(--round); color: var(--mid); }
.seg button.on { background: var(--blue); color: var(--ink); font-weight: 700; }

/* 패널: 레이스 카드 */
.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel > div[data-pane] { display: flex; flex-direction: column; gap: 14px; }
.panel > div[data-pane] > .btn { align-self: flex-start; margin-top: 0; }
.box { position: relative; background: #fff; border: 1.5px solid var(--line); padding: 8px 18px 16px; }
.box > summary { cursor: pointer; padding: 6px 0 4px; list-style: none; display: flex; align-items: baseline; gap: 8px; font: 700 12.5px/1.3 var(--round); color: var(--blue-d); flex-wrap: wrap; }
.box > summary::-webkit-details-marker { display: none; }
.box > summary::after { content: "▾"; margin-left: auto; font-size: 10px; color: var(--mid); }
.box:not([open]) > summary::after { content: "▸"; }
.box > summary small { font: 400 10px var(--round); font-weight: 400; color: var(--mid); }
.box.foot { padding: 14px 18px; }

.f { display: block; margin-top: 10px; font: 400 10.5px var(--round); color: var(--mid); }
.f output { color: var(--blue-d); }
.f input[type=text], .f input[type=number], .f select, .f textarea { display: block; width: 100%; margin-top: 3px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); font: 400 12px/1.5 var(--round); transition: border-color .2s, background .2s; }
.f select { -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%238d9fad' stroke-width='2' stroke-linecap='round'/></svg>") right 12px center no-repeat; padding-right: 30px; cursor: pointer; }
.f textarea { resize: vertical; min-height: 64px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 0; border-color: var(--blue); background: #fff; }
.f input::placeholder, .f textarea::placeholder { color: #b3c6dd; }
.f input[type=range] { display: block; width: 100%; margin-top: 8px; -webkit-appearance: none; appearance: none; height: 20px; background: none; }
.f input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, #e3edf9 6px 12px); }
.f input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.f input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 2px 0 var(--blue-d); }
.f input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.f input[type=color] { display: block; width: 100%; height: 32px; margin-top: 4px; padding: 3px; border: 1.5px solid var(--line); border-radius: 0; background: #fff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
.row { display: flex; gap: 14px; align-items: center; }
.grow { flex: 1; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font: 400 11px var(--round); }
.checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--line); border-radius: 0; background: #fff; display: inline-grid; place-items: center; cursor: pointer; flex: none; transition: background .2s, border-color .2s; }
input[type=checkbox]::after { content: "✓"; font-size: 10px; font-weight: 700; line-height: 1; color: var(--ink); transform: scale(0); transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
input[type=checkbox]:checked { background: var(--blue); border-color: var(--blue); }
input[type=checkbox]:checked::after { transform: scale(1); }
.muted { color: var(--mid); font: 400 10.5px/1.5 var(--round); margin: 8px 0 0; }

.btn, .btn-like { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 6px 14px 5px; border: 1.5px solid var(--line); border-radius: 0; background: #fff; font: 400 11.5px var(--round); cursor: pointer; text-decoration: none; color: var(--blue-d); transition: transform .15s, border-color .2s; }
.btn:hover, .btn-like:hover { transform: translateY(-1px); border-color: var(--blue); }
.btn.ghost { margin-top: 0; }
.btn:disabled { opacity: .4; cursor: default; }
.primary { border: 1.5px solid var(--blue); background: var(--blue); color: var(--ink) !important; font-weight: 700; padding: 7px 18px 6px; border-radius: 0; font: 400 13px var(--round); transition: transform .15s; }
.primary:hover { background: #aec3d1; border-color: #aec3d1; }
.primary:disabled { opacity: .7; }
.btn.danger { color: var(--blue-d); border-color: var(--blue); }
.file input, .btn-like input, .avatar-up input { display: none; }

.avatar-up { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font: 400 10px var(--round); color: var(--mid); }
.avatar-up img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }

.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.thumbs:empty { display: none; }
.thumb { position: relative; width: 62px; }
.thumb img { width: 62px; height: 78px; object-fit: cover; display: block; border: 3px solid #fff; border-radius: 0; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; }
.thumb.on img { border-color: var(--blue); }
.thumb .x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 0; border: 1.5px solid #fff; background: var(--blue); color: var(--ink); font-size: 10px; font-weight: 700; line-height: 17px; padding: 0; }
.thumb .mv { display: flex; margin-top: 3px; }
.thumb .mv button { flex: 1; border: 0; background: none; font-size: 10px; color: var(--mid); padding: 1px 0; }
.thumb .mv button:hover { color: var(--blue-d); }

.item { border: 1.5px solid var(--line); border-radius: 0; padding: 4px 12px 12px; margin-top: 10px; background: #fff; }
.item-head { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.item-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); }
.item-head .grow { font: 400 12.5px var(--round); color: var(--blue-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-head button { width: 26px; height: 26px; border: 1.5px solid var(--line); background: #fff; border-radius: 0; padding: 0; font-size: 10px; color: var(--blue-d); }
.item-head label { cursor: pointer; }
.item-head input[type=file] { display: none; }
.item .f input[type=text], .item .f input[type=number], .item .f textarea { background: #fff; }

.layouts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.layouts button { width: 42px; height: 64px; padding: 4px; border: 1.5px solid var(--line); border-radius: 0; background: #fff; display: grid; gap: 2px; transition: transform .15s; }
.layouts button i { background: #dbe8f7; }
.layouts button:hover { transform: translateY(-2px); }
.layouts button.on { border-color: var(--blue); }
.layouts button.on i { background: var(--pink); }
.cells { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cells button { width: 42px; height: 42px; border-radius: 0; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); background: #fff center/cover; font: 400 10.5px var(--round); color: var(--mid); }
.cells button.on { box-shadow: 0 0 0 2.5px var(--blue); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.swatches button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); padding: 0; }
.swatches button.on { box-shadow: 0 0 0 2.5px var(--blue); }
.swatches input { width: 32px; height: 32px; border: 0; padding: 0; background: none; }

.add-stickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.add-stickers button, .add-stickers .btn-like { margin: 0; padding: 7px 4px 6px; border: 1.5px solid var(--line); border-radius: 0; background: #fff; font: 400 11px var(--round); color: var(--ink); transition: transform .15s, background .2s; }
.add-stickers button:hover, .add-stickers .btn-like:hover { background: #fff; border-color: var(--blue); }
.sticker-edit { margin-top: 12px; padding-top: 4px; border-top: 2px dotted var(--line); }
.sticker-edit h4 { margin: 12px 0 0; font: 400 10.5px var(--round); color: var(--mid); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips button { border: 1.5px solid var(--line); background: #fff; border-radius: 0; padding: 2px 11px 1px; font: 400 10.5px var(--round); color: var(--mid); }
.chips button.on { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.color-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.color-row button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); padding: 0; }
.color-row input { width: 28px; height: 28px; border: 0; padding: 0; background: none; }
.emoji-quick { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.emoji-quick button { border: 0; background: none; font-size: 16.5px; padding: 2px 4px; transition: transform .15s; }
.emoji-quick button:hover { transform: scale(1.2) rotate(-6deg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-row .btn { margin-top: 10px; }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(61,90,128,.35); backdrop-filter: blur(6px); }
.modal-card { background: #fff; border: 1.5px solid var(--line); padding: 14px 16px 16px; max-width: 440px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; gap: 8px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head b { font: 400 13.5px var(--round); color: var(--blue-d); }
.modal-head button { width: 28px; height: 28px; border: 1.5px solid var(--line); background: #fff; border-radius: 0; font-size: 10px; color: var(--blue-d); padding: 0; }
.modal-card img { max-width: 100%; max-height: 62vh; object-fit: contain; border: 1.5px solid var(--line); background: #fff; align-self: center; }
.modal-card .btn { margin-top: 0; }
.modal-card .btn.primary { border-color: #fff; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; background: #fff; color: var(--blue-d); border: 1.5px solid var(--line); padding: 8px 18px; border-radius: 0; font: 400 11.5px var(--round); max-width: calc(100vw - 32px); box-shadow: 0 4px 14px rgba(52,73,90,.15); }

@media (max-width: 860px) {
  .top { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px; }
  .brand b { font-size: 13.5px; }
  .tabs { width: 100%; }
  .work { grid-template-columns: 1fr; padding: 16px 16px 50px; gap: 24px; }
  .preview { position: static; }
  .hero { font-size: 16.5px; }
  .pv-stage > .shot { box-shadow: 0 0 0 8px #fff, 0 0 0 9.5px var(--line); }
}

/* 목록·HTML 저장·임시저장 */
.slots-btn { margin: 0; white-space: nowrap; }
.top .tabs { margin-left: auto; }
.pv-bar2 { justify-content: flex-start; flex-wrap: wrap; gap: 8px 10px; }
.pv-bar2 .btn-row .btn { margin-top: 0; }
.pv-lbl { font-size: 11.5px; color: var(--mid); }
#post-list .chips, #cm-post-list .chips, #story-list .chips { margin-top: 2px; }
.slot-new { display: flex; gap: 10px; align-items: flex-end; }
.slot-new .f { margin-top: 0; }
.slot-new .primary { white-space: nowrap; }
.slot-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.slot { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1.5px solid var(--line); }
.slot img, .slot-ph { width: 44px; height: 44px; object-fit: cover; flex: none; background: var(--ice); }
.slot .grow { display: flex; flex-direction: column; min-width: 0; }
.slot b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot small { font-size: 10.5px; color: var(--mid); }
.slot .btn { margin-top: 0; padding: 4px 9px; }
#pv-account [data-go-post], #pv-account [data-go-story] { cursor: pointer; }
#pv-account [data-go-post]:hover img, #pv-account [data-go-story]:hover .hl-c { opacity: .85; }
@media (max-width: 860px) { .slots-btn { position: absolute; right: 16px; top: 10px; } .top .tabs { margin-left: 0; } }

/* 사진 위치·확대 */
#pv-post [data-crop] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#pv-post [data-crop]:active { cursor: grabbing; }
.sub-h { margin: 16px 0 0; font-size: 12px; font-weight: 700; color: var(--blue-d); }
.crop-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.thumb-crop { position: relative; width: 112px; aspect-ratio: 1; flex: none; overflow: hidden; border: 1.5px solid var(--line); background: var(--ice); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.thumb-crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.crop-row .f { margin-top: 0; }

/* 링크로 사진 넣기 */
.avatar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.link-mini { border: 0; background: none; padding: 0; font-size: 10.5px; color: var(--blue-d); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-err { margin: 0; font-size: 11.5px; line-height: 1.5; color: #c0392b; }
.btn-row > .btn.file { margin-top: 10px; }
#link-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; word-break: break-all; }

.html-notice { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink); }
.modal-card .btn-row .btn { margin-top: 0; }

.reset-row { margin-top: 0; }
.reset-row .btn { margin-top: 0; }

/* 문의·피드·DM 편집 */
.brand-row { display: flex; align-items: center; gap: 12px; }
.contact-btn { margin: 0; padding: 5px 10px; font-size: 11.5px; white-space: nowrap; }
.contact-ok { margin: 0; font-size: 12px; color: #2e7d32; }
.item-head .sq { width: 36px; height: 36px; border-radius: 0; object-fit: cover; background: var(--ice); flex: none; display: block; }
.item .btn-row .btn { margin-top: 8px; }
.msg-head { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.msg-head .chips { margin-top: 0; }
.msg-head .sp { flex: 1; }
.msg-head > button { width: 26px; height: 26px; border: 1.5px solid var(--line); background: #fff; padding: 0; font-size: 11px; color: var(--blue-d); }
.item.msg-me { border-left: 3px solid var(--blue); }
.item.msg-time { background: var(--ice); }
.msg-img { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.msg-img img { width: 64px; height: 64px; object-fit: cover; }
.msg-img .btn { margin-top: 0; }
.dm-seg { margin-top: 6px; }
#pv-feed [data-go-story], #pv-feed [data-go-dmlist], #pv-dm [data-go-dm] { cursor: pointer; }

.xbox { border: 1.5px solid var(--line); padding: 8px 12px; font-size: 11.5px; line-height: 1.6; color: var(--ink); max-height: 40vh; overflow-y: auto; }
.xbox summary { cursor: pointer; font-weight: 700; font-size: 12px; color: var(--blue-d); }
.xbox ul { margin: 6px 0 0; padding-left: 16px; }
.xbox li + li { margin-top: 4px; }
.xbox p { margin: 8px 0 0; color: var(--mid); }

/* ───────── 인스타그램 UI ───────── */
.ig {
  --ig-bg: #fff; --ig-ink: #000; --ig-sec: #737373; --ig-line: #dbdbdb; --ig-link: #00376b;
  --ig-btn: #efefef; --ig-blue: #0095f6; --ig-red: #ff3040; --ig-elev: #fff; --ig-ph: #efefef;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", Helvetica, Arial, sans-serif;
  background: var(--ig-bg); color: var(--ig-ink);
  width: 390px; max-width: 100%;
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
  position: relative; overflow: hidden;
}
.ig[data-theme=dark] {
  --ig-bg: #000; --ig-ink: #f5f5f5; --ig-sec: #a8a8a8; --ig-line: #363636; --ig-link: #e0f1ff;
  --ig-btn: #363636; --ig-elev: #262626; --ig-ph: #262626;
}
.ig svg { display: block; flex: none; }
.ig .sec { color: var(--ig-sec); }
.ig .lk { color: var(--ig-link); }
.ig b { font-weight: 600; }
.ig .vf, .vf { display: inline-block; vertical-align: -2px; margin-left: 4px; }

/* 상태 표시줄 */
.sb { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 6px 26px 20px 36px; font: 600 calc(16px * var(--fs, 1))/1 -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; letter-spacing: -.01em; }
.sb-r { display: flex; gap: 6px; align-items: center; }

/* 게시물 */
.p-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; height: 56px; }
.av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; flex: none; background: var(--ig-ph); }
.ring { padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5); flex: none; }
.ring > .av, .ring > .ring-in { border: 2px solid var(--ig-bg); }
.p-meta { flex: 1; min-width: 0; line-height: 1.25; }
.p-user { font-size: calc(14px * var(--fs, 1)); font-weight: 600; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.p-user .t { overflow: hidden; text-overflow: ellipsis; }
.p-sub { font-size: calc(12px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-btn { background: var(--ig-btn); border-radius: 8px; padding: 0 12px; height: 32px; line-height: 32px; font-size: calc(14px * var(--fs, 1)); font-weight: 600; white-space: nowrap; }
.p-media { position: relative; width: 100%; background: var(--ig-ph); overflow: hidden; }
.p-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.p-count { position: absolute; top: 14px; right: 14px; background: rgba(18,18,18,.7); color: #fff; font-size: calc(12px * var(--fs, 1)); font-weight: 600; padding: 3px 9px; border-radius: 13px; }
.ph-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ig-sec); font-size: calc(13px * var(--fs, 1)); }
.p-act { position: relative; display: flex; align-items: center; height: 46px; padding: 0 12px 0 12px; }
.p-act-l { display: flex; align-items: center; gap: 14px; }
.p-act-l .a { display: flex; align-items: center; gap: 5px; font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.p-act .sp { flex: 1; }
.p-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; }
.p-dots.row { position: static; transform: none; justify-content: center; padding-top: 12px; }
.p-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ig-sec); opacity: .45; }
.p-dots i.on { background: var(--ig-blue); opacity: 1; }
.p-body { padding: 0 14px 14px; font-size: calc(14px * var(--fs, 1)); line-height: calc(18px * var(--fs, 1)); }
.p-body > div + div { margin-top: 5px; }
.p-likes { display: flex; align-items: center; gap: 6px; }
.p-likes .av { width: 20px; height: 20px; }
.p-cap { white-space: pre-wrap; word-break: break-word; }
.p-time { font-size: calc(12px * var(--fs, 1)); }

/* 댓글 시트 */
.phone { height: 844px; }
.phone-bg { position: absolute; inset: 0; }
.dim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sheet-wrap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; }
.sheet-wrap.half { top: 34%; }
.sheet-wrap.full { top: 54px; }
.sheet { background: var(--ig-elev); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; width: 100%; }
.cm-plain .sheet { border-radius: 0; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--ig-sec); opacity: .5; margin: 8px auto 0; }
.s-title { text-align: center; font-size: calc(16px * var(--fs, 1)); font-weight: 700; padding: 14px 0 12px; }
.s-list { flex: 1; min-height: 0; overflow: hidden; padding: 4px 0 8px; }
.s-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; padding: 40px 24px 80px; text-align: center; }
.s-off b { font-size: calc(16px * var(--fs, 1)); font-weight: 700; }
.s-off span { font-size: calc(14px * var(--fs, 1)); color: var(--ig-sec); }
.c { display: flex; gap: 12px; padding: 10px 16px 10px 16px; }
.c.rp { padding-left: 60px; }
.c .av { width: 34px; height: 34px; }
.c.rp .av { width: 26px; height: 26px; }
.c-b { flex: 1; min-width: 0; }
.c-h { font-size: calc(13px * var(--fs, 1)); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: calc(16px * var(--fs, 1)); }
.c-h .vf { margin-left: -2px; }
.c-t { font-size: calc(14px * var(--fs, 1)); line-height: calc(18px * var(--fs, 1)); margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.c-a { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--ig-sec); }
.al { position: relative; display: inline-flex; }
.al .av { width: 16px; height: 16px; }
.al svg { position: absolute; right: -6px; bottom: -3px; }
.c-more { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--ig-sec); }
.c-more i { width: 24px; height: 1px; background: var(--ig-sec); opacity: .7; }
.c-l { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; width: 22px; font-size: calc(12px * var(--fs, 1)); color: var(--ig-sec); }
.s-foot { border-top: 1px solid var(--ig-line); padding: 10px 0 30px; }
.s-emo { display: flex; justify-content: space-around; padding: 2px 10px 10px; font-size: calc(24px * var(--fs, 1)); line-height: 1; }
.s-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.s-in .av { width: 40px; height: 40px; }
.s-ph { flex: 1; color: var(--ig-sec); font-size: calc(14px * var(--fs, 1)); border: 1px solid var(--ig-line); border-radius: 22px; height: 44px; line-height: calc(42px * var(--fs, 1)); padding: 0 16px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; white-space: nowrap; }
.s-ph span { overflow: hidden; text-overflow: ellipsis; }

/* 프로필 */
.acct.phone { display: flex; flex-direction: column; }
.a-top { display: flex; align-items: center; height: 44px; padding: 0 16px; gap: 6px; }
.a-un { display: flex; align-items: center; gap: 4px; font-size: calc(22px * var(--fs, 1)); font-weight: 700; letter-spacing: -.02em; min-width: 0; }
.a-un .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-top .sp { flex: 1; }
.a-ic { display: flex; gap: 22px; }
.a-row { display: flex; align-items: center; gap: 20px; padding: 10px 16px 0; }
.a-av { position: relative; flex: none; }
.a-av .av { width: 86px; height: 86px; }
.a-av .ring .av { width: 80px; height: 80px; }
.a-plus { position: absolute; right: -2px; bottom: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ig-ink); color: var(--ig-bg); border: 3px solid var(--ig-bg); display: flex; align-items: center; justify-content: center; }
.a-right { flex: 1; min-width: 0; }
.a-dn { font-size: calc(15px * var(--fs, 1)); font-weight: 600; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-stats { display: flex; justify-content: space-between; padding-right: 8px; }
.a-stats div { display: flex; flex-direction: column; line-height: 1.2; }
.a-stats b { font-size: calc(17px * var(--fs, 1)); font-weight: 700; }
.a-stats span { font-size: calc(14px * var(--fs, 1)); }
.a-bio { padding: 10px 16px 0; font-size: calc(14px * var(--fs, 1)); line-height: calc(18px * var(--fs, 1)); word-break: break-word; }
.a-bio .bio { white-space: pre-wrap; }
.a-bio > div + div { margin-top: 2px; }
.a-link { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ig-link); }
.a-mutual { display: flex; align-items: center; gap: 8px; margin-top: 8px !important; font-size: calc(13px * var(--fs, 1)); line-height: calc(16px * var(--fs, 1)); }
.a-btns { display: flex; gap: 6px; padding: 14px 16px 0; }
.a-btns div { flex: 1; height: 34px; border-radius: 8px; background: var(--ig-btn); font-size: calc(14px * var(--fs, 1)); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.a-btns div.blue { background: var(--ig-blue); color: #fff; }
.a-btns div.ico { flex: none; width: 34px; }
.a-hl { display: flex; gap: 16px; padding: 16px 16px 0; overflow: hidden; }
.hl { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; flex: none; }
.hl-c { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--ig-line); padding: 3px; }
.hl-c img, .hl-c .hl-new { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--ig-ph); }
.hl-c .hl-new { background: none; }
.hl span { font-size: calc(12px * var(--fs, 1)); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-tabs { display: flex; margin-top: 14px; border-bottom: 1px solid var(--ig-line); }
.a-tabs div { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ig-sec); position: relative; }
.a-tabs div.on { color: var(--ig-ink); }
.a-tabs div.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ig-ink); }
.a-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.acct.phone .a-grid { flex: 1; min-height: 0; overflow: hidden; align-content: start; }
.a-grid div { aspect-ratio: 1 / 1; background: var(--ig-ph); position: relative; overflow: hidden; }
.a-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-multi { position: absolute; top: 6px; right: 6px; display: flex; filter: drop-shadow(0 0 2px rgba(0,0,0,.45)); }
.a-nav { display: flex; justify-content: space-around; align-items: center; height: 84px; padding-bottom: 30px; border-top: 1px solid var(--ig-line); background: var(--ig-bg); }
.a-nav .av { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--ig-bg), 0 0 0 3.5px var(--ig-ink); }

/* 스토리 */
.story { position: relative; width: min(360px, 100%); aspect-ratio: 9 / 16; container-type: inline-size; overflow: hidden; border-radius: 10px; background: #111; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", Helvetica, Arial, sans-serif; }
.exporting .story { border-radius: 0; }
.st-grid { position: absolute; inset: 0; display: grid; }
.cell { position: relative; overflow: hidden; }
.cell img { position: absolute; max-width: none; pointer-events: none; }
.cell-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; font-size: 3.4cqw; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.45); cursor: pointer; }
.cell.sel::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #0095f6; pointer-events: none; }
.exporting .cell-empty, .exporting .cell.sel::after { opacity: 0; }
.k { position: absolute; width: max-content; max-width: 90cqw; cursor: grab; transform-origin: center; }
.k.sel { outline: 1.5px dashed rgba(255,255,255,.95); outline-offset: 1.2cqw; }
.exporting .k.sel { outline: 0; }
.k-text { font-size: 7.2cqw; line-height: 1.38; white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; }
.k-text span { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: .06em .32em; border-radius: .28em; }
.f-classic { font-weight: 700; }
.f-modern { font-family: "Do Hyeon", sans-serif; font-size: 7.8cqw; }
.f-neon { font-family: "Nanum Pen Script", cursive; font-size: 10cqw; line-height: 1.15; }
.f-type { font-family: "Nanum Gothic Coding", monospace; font-weight: 700; font-size: 6.4cqw; }
.f-strong { font-family: "Black Han Sans", sans-serif; font-size: 8cqw; font-style: italic; letter-spacing: -.01em; }
.f-serif { font-family: "Nanum Myeongjo", serif; font-weight: 800; }
.k-emoji { font-size: 18cqw; line-height: 1; display: block; }
.k-chip { display: flex; align-items: center; gap: 1.2cqw; padding: 2.2cqw 3.4cqw; border-radius: 2.2cqw; background: #fff; font-weight: 800; font-size: 6cqw; line-height: 1.1; letter-spacing: -.01em; box-shadow: 0 .4cqw 2cqw rgba(0,0,0,.12); }
.k-chip svg { width: 6cqw; height: 6cqw; }
.gt { -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-mention, .g-hashtag { background-image: linear-gradient(90deg, #fbad50, #f56040 40%, #e1306c 75%, #c13584); }
.g-location { background-image: linear-gradient(90deg, #a033ff, #d63384 60%, #ff4f76); }
.g-link { background-image: linear-gradient(90deg, #0095f6, #0095f6); }
.k-chip.st-clear { background: none; box-shadow: none; text-shadow: 0 0 2cqw rgba(0,0,0,.25); }
.k-chip.st-color { color: #fff; }
.k-chip.st-clear .gt, .k-chip.st-color .gt { background: none; color: #fff; }
.k-chip.st-color.c-mention, .k-chip.st-color.c-hashtag { background: linear-gradient(90deg, #fbad50, #e1306c 60%, #c13584); }
.k-chip.st-color.c-location { background: linear-gradient(90deg, #a033ff, #ff4f76); }
.k-chip.st-color.c-link { background: #0095f6; }
.k-music { display: flex; align-items: center; gap: 3cqw; width: 64cqw; padding: 2.6cqw; border-radius: 3.2cqw; background: #fff; color: #000; box-shadow: 0 .6cqw 3cqw rgba(0,0,0,.18); }
.k-music.dark { background: rgba(20,20,20,.85); color: #fff; }
.mu-art { width: 13cqw; height: 13cqw; border-radius: 1.6cqw; flex: none; background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); overflow: hidden; }
.mu-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mu-tx b { font-size: 4cqw; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-tx span { font-size: 3.5cqw; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-eq { display: flex; align-items: flex-end; gap: .7cqw; height: 4.5cqw; }
.mu-eq i { width: .9cqw; border-radius: .5cqw; background: currentColor; }
.mu-eq i:nth-child(1) { height: 50%; } .mu-eq i:nth-child(2) { height: 100%; } .mu-eq i:nth-child(3) { height: 70%; }
.k-q { position: relative; width: 66cqw; padding: 8cqw 4cqw 4cqw; border-radius: 4cqw; background: #fff; color: #000; text-align: center; box-shadow: 0 .6cqw 3cqw rgba(0,0,0,.18); }
.k-q .q-av { position: absolute; left: 50%; top: -5.5cqw; width: 11cqw; height: 11cqw; border-radius: 50%; object-fit: cover; transform: translateX(-50%); border: .8cqw solid #fff; }
.q-title { font-size: 4.8cqw; font-weight: 700; line-height: 1.3; white-space: pre-wrap; }
.q-in { margin-top: 3cqw; padding: 3.2cqw; border-radius: 2.4cqw; background: rgba(0,0,0,.06); color: rgba(0,0,0,.45); font-size: 3.8cqw; }
.k-img img { display: block; max-width: 60cqw; max-height: 60cqw; pointer-events: none; }
.k-img.framed img { border: 1.6cqw solid #fff; border-radius: 1cqw; box-shadow: 0 .6cqw 3cqw rgba(0,0,0,.25); }

.s-ui { position: absolute; inset: 0; pointer-events: none; }
.s-shade-t { position: absolute; left: 0; right: 0; top: 0; height: 26cqw; background: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0)); }
.s-shade-b { position: absolute; left: 0; right: 0; bottom: 0; height: 30cqw; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.32)); }
.s-sb { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 3.2cqw 6.5cqw 0 8.6cqw; font: 600 calc(4.3cqw * var(--fs, 1))/1 -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
.s-sb svg { height: 3.2cqw; width: auto; }
.s-sb .sb-r { gap: 1.4cqw; }
.s-bars { position: absolute; left: 2.2cqw; right: 2.2cqw; display: flex; gap: 1cqw; }
.s-bars i { flex: 1; height: .65cqw; border-radius: .4cqw; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.s-bars i b { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; }
.s-head { position: absolute; left: 3.4cqw; right: 2.4cqw; display: flex; align-items: center; gap: 2.4cqw; font-size: calc(3.9cqw * var(--fs, 1)); text-shadow: 0 0 1.4cqw rgba(0,0,0,.2); }
.s-head .av { width: 8.8cqw; height: 8.8cqw; }
.s-head b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-head .vf { margin-left: -1.2cqw; }
.s-head .tm { color: rgba(255,255,255,.75); white-space: nowrap; }
.s-head .sp { flex: 1; }
.s-head svg { width: 6.6cqw; height: 6.6cqw; }
.s-bottom { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 3cqw; display: flex; align-items: center; gap: 4.4cqw; }
.s-input { flex: 1; height: 12cqw; border: 1px solid rgba(255,255,255,.7); border-radius: 6cqw; padding: 0 4.6cqw; display: flex; align-items: center; font-size: calc(3.9cqw * var(--fs, 1)); color: #fff; }
.s-bottom svg { width: 7cqw; height: 7cqw; }
.s-own { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 3cqw; display: flex; align-items: center; gap: 2cqw; font-size: calc(3.3cqw * var(--fs, 1)); }
.s-viewers { display: flex; }
.s-viewers .av { width: 7cqw; height: 7cqw; border: .5cqw solid #000; margin-right: -2.2cqw; }
.s-own .lbl { margin-left: 3.4cqw; font-weight: 600; font-size: calc(3.6cqw * var(--fs, 1)); }
.s-own .sp { flex: 1; }
.s-oi { display: flex; flex-direction: column; align-items: center; gap: .8cqw; width: 14cqw; font-size: calc(2.9cqw * var(--fs, 1)); }
.s-oi svg { width: 6.4cqw; height: 6.4cqw; }

/* 홈 피드 */
.feed.phone { height: 844px; display: flex; flex-direction: column; }
.feed.phone .f-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.feed.phone .f-body::-webkit-scrollbar { display: none; }
.f-top { display: flex; align-items: center; gap: 4px; height: 50px; padding: 0 14px 0 16px; }
.f-logo { font-family: "Grand Hotel", cursive; font-size: calc(30px * var(--fs, 1)); line-height: 1; letter-spacing: .01em; padding-top: 4px; }
.f-top .sp { flex: 1; }
.f-ic { position: relative; display: flex; margin-left: 20px; }
.f-dot { position: absolute; top: 0; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--ig-red); border: 1.5px solid var(--ig-bg); }
.f-badge { position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ig-red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 1.5px solid var(--ig-bg); box-sizing: content-box; }
.f-tray { display: flex; gap: 14px; padding: 6px 12px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-bottom: .5px solid var(--ig-line); }
.f-tray::-webkit-scrollbar { display: none; }
.ft { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 74px; flex: none; }
.ft span { font-size: calc(12px * var(--fs, 1)); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-c { position: relative; width: 70px; height: 70px; border-radius: 50%; padding: 3px; }
.ft-c .av { width: 100%; height: 100%; border: 3px solid var(--ig-bg); }
.ft-c.new { background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5); }
.ft-c.seen { background: var(--ig-line); padding: 2px; }
.ft-c.seen .av { border-width: 4px; }
.ft-c.none .av { border: 0; }
.ft-plus { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ig-blue); color: #fff; border: 3px solid var(--ig-bg); display: flex; align-items: center; justify-content: center; }
.f-posts .post + .post { margin-top: 8px; }
.f-empty { text-align: center; color: var(--ig-sec); font-size: 14px; padding: 60px 20px; margin: 0; }
.feed .a-nav { flex: none; }

/* DM 목록 */
.dml.phone { height: 844px; display: flex; flex-direction: column; }
.dml.phone .dm-rows { flex: 1; min-height: 0; overflow: hidden; }
.dm-top { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px 0 10px; }
.dm-me { display: flex; align-items: center; gap: 4px; font-size: calc(20px * var(--fs, 1)); font-weight: 700; letter-spacing: -.02em; min-width: 0; }
.dm-me .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-top .sp { flex: 1; }
.dm-search { display: flex; align-items: center; gap: 8px; margin: 4px 16px 10px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--ig-btn); color: var(--ig-sec); font-size: calc(15px * var(--fs, 1)); }
.dm-sec { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; font-size: calc(16px * var(--fs, 1)); }
.dm-sec b { font-weight: 700; }
.dm-sec span { color: var(--ig-sec); font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.dm-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.dm-av { position: relative; flex: none; display: block; }
.dm-av .av { width: 100%; height: 100%; }
.dm-on { position: absolute; right: 0; bottom: 0; width: 26%; height: 26%; min-width: 11px; min-height: 11px; border-radius: 50%; background: #78de45; border: 3px solid var(--ig-bg); box-sizing: content-box; transform: translate(12%, 12%); }
.dm-tx { flex: 1; min-width: 0; line-height: 1.3; }
.dm-n { display: flex; align-items: center; font-size: calc(14px * var(--fs, 1)); }
.dm-n .t, .dm-p .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-p { display: flex; font-size: calc(13px * var(--fs, 1)); color: var(--ig-sec); }
.dm-p .tm { flex: none; white-space: nowrap; }
.dm-row.unread .dm-n, .dm-row.unread .dm-p { font-weight: 700; color: var(--ig-ink); }
.dm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ig-blue); flex: none; }
.dm-cam { color: var(--ig-sec); display: flex; flex: none; }

/* DM 대화창 */
.dmc.phone { height: 844px; display: flex; flex-direction: column; }
.dc-top { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 10px; border-bottom: .5px solid var(--ig-line); flex: none; }
.dc-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dc-t b { display: flex; align-items: center; font-size: calc(16px * var(--fs, 1)); font-weight: 700; }
.dc-t b .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-t small { font-size: calc(12px * var(--fs, 1)); color: var(--ig-sec); }
.dc-top .sp { flex: 1; }
.dc-top > svg { margin-left: 14px; flex: none; }
.dc-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding: 8px 12px 6px; }
.dc-body.full { justify-content: flex-end; }
.dc-body > * { flex: none; }
.dc-intro { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 0 26px; text-align: center; }
.dc-intro .av { width: 92px; height: 92px; margin-bottom: 8px; }
.dc-intro b { display: flex; align-items: center; font-size: calc(18px * var(--fs, 1)); font-weight: 700; }
.dc-intro span { font-size: calc(13px * var(--fs, 1)); color: var(--ig-sec); }
.dc-pbtn { margin-top: 12px; padding: 7px 14px; border-radius: 8px; background: var(--ig-btn); color: var(--ig-ink) !important; font-weight: 600; }
.dc-time { align-self: center; margin: 14px 0 8px; font-size: calc(12px * var(--fs, 1)); color: var(--ig-sec); font-weight: 600; }
.dc-m { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.dc-m.first { margin-top: 8px; }
.dc-m.me { justify-content: flex-end; }
.dc-sav { width: 28px; flex: none; }
.dc-sav .av { width: 28px; height: 28px; }
.dc-c { position: relative; display: flex; flex-direction: column; gap: 2px; max-width: 72%; }
.dc-m.me .dc-c { align-items: flex-end; }
.dc-b { padding: 9px 13px; border-radius: 22px; font-size: calc(15px * var(--fs, 1)); line-height: 1.32; white-space: pre-wrap; word-break: break-word; background: var(--ig-btn); color: var(--ig-ink); }
.dc-m.them:not(.first) .dc-b { border-top-left-radius: 6px; }
.dc-m.them:not(.last) .dc-b { border-bottom-left-radius: 6px; }
.dc-m.me:not(.first) .dc-b { border-top-right-radius: 6px; }
.dc-m.me:not(.last) .dc-b { border-bottom-right-radius: 6px; }
.dc-b .lk { color: inherit; text-decoration: underline; }
.dc-img { display: block; width: 210px; max-width: 100%; max-height: 300px; object-fit: cover; border-radius: 18px; }
.dc-m.has-react { margin-bottom: 14px; }
.dc-react { position: absolute; bottom: -16px; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 12px; background: var(--ig-bg); box-shadow: 0 0 0 2px var(--ig-bg), 0 0 0 3px var(--ig-btn); }
.dc-m.me .dc-react { right: 8px; }
.dc-m.them .dc-react { left: 8px; }
.dc-seen { align-self: flex-end; margin: 4px 4px 0; font-size: calc(12px * var(--fs, 1)); color: var(--ig-sec); }
.dc-foot { padding: 8px 12px 28px; background: var(--ig-bg); flex: none; }
.dc-in { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px 0 6px; border-radius: 23px; background: var(--ig-btn); }
.dc-in .ph { flex: 1; color: var(--ig-sec); font-size: calc(15px * var(--fs, 1)); }
.dc-cam { width: 34px; height: 34px; border-radius: 50%; background: #3797f0; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.a-nav > span { display: flex; }
.ig *, .ig *::before, .ig *::after, .story *, .story *::before, .story *::after { box-sizing: border-box; }

/* 여러 장 사진 넘기기 */
.p-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.p-track::-webkit-scrollbar { display: none; }
.p-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.p-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-media .p-count { z-index: 2; }
.p-nav { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #262626; font-size: 22px; line-height: 28px; padding: 0; cursor: pointer; z-index: 3; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.p-nav.prev { left: 10px; } .p-nav.next { right: 10px; }
.exporting .p-nav { display: none; }