@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css');
:root {
--sky: #5cb3f5;
--sky-l: #9fd4fb;
--sky-soft: #e7f3fe;
--sky-rgb: 92,179,245;
--pink: #ffb3ca;
--pink-d: #ff96b6;
--pink-soft: #ffe5ed;
    --win: #ffffff;
    --side: #f7f1f6;
    --line: #f0e6ee;
    --line2: #e6dce6;
    --ink: #4a4651;
    --ink-soft: #948e9d;
    --ink-faint: #bdb8c5;
    --titlebar: #ffeaf3;
    --desktop-bg: #e3f0fd;
    --label-bg: rgba(255,255,255,0.7);
    --taskbar: rgba(255,255,255,0.82);
    --win-border: #d8d4dc;
    --menu-bg: rgba(255,255,255,0.92);
    --shadow: 0 16px 44px rgba(140,130,140,0.22);
    --font: 'Mabiyet', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  * { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--pink);
    border-radius: 11px; border: 3px solid transparent;
    background-clip: padding-box;
  }
  html, body { height: 100%; }
  body {
    font-family: var(--font);
    color: var(--ink);
    height: 100%;
    overflow: hidden;
    background: var(--desktop-bg);
  }
  #bgLayer {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background-position: center; background-repeat: no-repeat;
    background-size: cover;
    display: none;
  }
  #bgLayer.on { display: block; }
  #bgDim {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; background: #000; opacity: 0;
  }
  #fxLayer {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    display: none;
  }
  #fxLayer.on { display: block; }
  .desktop {
    position: fixed; left: 0; right: 0; top: 0; bottom: 44px;
    z-index: 1;
    opacity: 0;
    animation: skinReveal 0.01s linear 1.6s forwards;   
  }
  .desktop.skin-ready { opacity: 1; animation: none; transition: opacity 0.16s ease; }
  @keyframes skinReveal { to { opacity: 1; } }
  .desk-icon {
    position: absolute;
    top: 26px; left: 26px;
    width: 92px;
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    text-align: center;
  }
  .desk-icon:hover { background: rgba(255,255,255,0.35); }
  .desk-icon.sel {
    background: rgba(var(--sky-rgb),0.25);
    border-color: rgba(var(--sky-rgb),0.55);
  }
  .desk-icon .di-art {
    width: 50px; height: 50px;
    margin-bottom: 7px;
    display: flex; align-items: center; justify-content: center;
  }
  .desk-icon .di-art svg {
    width: 48px; height: 48px;
    color: #f6cf86;
    shape-rendering: crispEdges;
    filter: drop-shadow(2px 2px 0 rgba(90,80,100,0.22));
  }
  .desk-icon .di-label {
    font-size: 11.5px;
    color: var(--ink);
    line-height: 1.35;
    background: var(--label-bg);
    border-radius: 4px;
    padding: 1px 5px;
  }
  .desk-icon.deco-icon .di-art { opacity: 0.92; }
  .explorer {
    position: fixed;
    z-index: 10;
    width: min(880px, calc(100vw - 44px));
    height: min(620px, calc(100vh - 110px));
    left: 50%; top: 50%;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--win-border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: winFadeIn 0.25s ease both;
    transform: none !important;
  }
  @keyframes winIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }
  .explorer.closed { display: none; }
  .explorer.collapsed { height: auto !important; }
  .explorer.collapsed .toolbar,
  .explorer.collapsed .body,
  .explorer.collapsed .app-body,
  .explorer.collapsed .deco-tabs,
  .explorer.collapsed .content,
  .explorer.collapsed .statusbar { display: none !important; }
  .explorer.maximized {
    left: 12px !important; top: 12px !important;
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 68px) !important;
    border-radius: 12px;
  }
  .explorer.maximized .titlebar { cursor: default; }
  .resize-handle {
    position: absolute;
    right: 0; bottom: 0;
    width: 20px; height: 20px;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 3px;
    cursor: nwse-resize;
    color: var(--ink-faint);
    z-index: 5;
  }
  .resize-handle svg { width: 12px; height: 12px; }
  .explorer.collapsed .resize-handle,
  .explorer.maximized .resize-handle { display: none; }
  .app-win {
    width: min(440px, calc(100vw - 44px));
    height: min(440px, calc(100vh - 110px));
    z-index: 15;
  }
  .app-body {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .titlebar {
    height: 42px; flex-shrink: 0;
    display: flex; align-items: center;
    padding: 0 14px;
    background: var(--titlebar);
    border-bottom: 1px solid var(--line2);
    cursor: grab;
    user-select: none;
  }
  .titlebar:active { cursor: grabbing; }
  .titlebar .traffic, .titlebar .tb-spacer { cursor: default; }
  .traffic { display: flex; gap: 8px; }
  .traffic i {
    width: 12px; height: 12px;
    border-radius: 50%; display: block;
    cursor: pointer;
    transition: background 0.13s ease;
  }
  .traffic .r { background: #ff6b81; }
  .traffic .y { background: #f6cf86; }
  .traffic .g { background: #a4d7a8; }
  .traffic .r:hover { background: #ff7e95; }
  .traffic .y:hover { background: #f0b94e; }
  .traffic .g:hover { background: #82c889; }
  .tb-title {
    flex: 1; text-align: center;
    font-size: 13px; color: var(--ink);
    display: flex; align-items: center; justify-content: center; gap: 7px;
  }
  .tb-title .fi {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .tb-title .fi svg { width: 17px; height: 17px; }
  .tb-spacer { width: 52px; }
  .toolbar {
    height: 46px;
    display: flex; align-items: center;
    gap: 8px; padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: var(--win);
  }
  .nav-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--ink-faint);
    background: transparent;
    border: 0; cursor: default;
    flex-shrink: 0;
  }
  .nav-btn.active { color: var(--ink-soft); cursor: pointer; }
  .nav-btn.active:hover { background: var(--sky-soft); color: var(--sky); }
  .nav-btn svg { width: 16px; height: 16px; }
  .addressbar {
    flex: 1; min-width: 0;
    height: 30px;
    display: flex; align-items: center; gap: 5px;
    padding: 0 11px;
    background: var(--side);
    border: 1px solid var(--line2);
    border-radius: 8px;
    font-size: 12px; color: var(--ink-soft);
  }
  .addressbar .crumb { color: var(--ink); }
  .addressbar .sep { color: var(--ink-faint); font-size: 11px; flex: 0 0 auto; }
  .addressbar .here { color: var(--pink-d); }
  .addressbar { white-space: nowrap; overflow: hidden; }
  .addressbar .crumb, .addressbar .here { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .addressbar .crumb.hideable { flex: 0 0 auto; }
  .addressbar #crumbMid { flex: 0 1 auto; min-width: 0; }
  .addressbar #crumbHere { flex: 1 1 auto; min-width: 0; }
  .searchbox {
    width: 150px; height: 30px;
    display: flex; align-items: center; gap: 6px;
    padding: 0 10px;
    background: var(--side);
    border: 1px solid var(--line2);
    border-radius: 8px;
    flex-shrink: 0;
  }
  .searchbox svg { width: 13px; height: 13px; color: var(--ink-faint); flex-shrink: 0; }
  .searchbox input {
    width: 100%; border: 0; background: transparent; outline: none;
    font-family: var(--font); font-size: 12px; color: var(--ink);
  }
  .searchbox input::placeholder { color: var(--ink-faint); }
  .body {
    display: flex;
   flex: 1;
    min-height: 0;
   overflow: hidden;
   background: transparent !important;
  }
  .side-toggle { display: none; align-items: center; justify-content: center;
    width: 28px; height: 24px; margin-right: 8px; flex: 0 0 auto;
    border: 1px solid var(--line2); border-radius: 8px; background: var(--win);
    color: var(--ink-soft); font-size: 14px; line-height: 1; cursor: pointer; }
  .side-toggle:hover { color: var(--pink-d); border-color: var(--pink); }
  .side-backdrop { display: none; }
  .sidebar {
    width: 184px;
    flex-shrink: 0;
    background: rgba(242, 242, 242, 0.52) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
    border-right: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: inset -1px 0 0 rgba(180, 180, 180, 0.18);
    padding: 14px 9px;
   overflow-y: auto;
  }
  .side-group { margin-bottom: 16px; }
  .side-group-label {
    font-size: 10.5px; font-weight: 700;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    padding: 0 9px;
    margin-bottom: 5px;
  }
  .side-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.13s ease, color 0.13s ease;
  }
  .side-item svg { width: 16px; height: 16px; flex-shrink: 0; }
  .side-item:hover { background: var(--win); color: var(--ink); }
  .side-item.active {
    background: var(--pink-soft);
    color: var(--ink); font-weight: 700;
  }
  .side-item.active svg { color: var(--pink-d); }
  .side-count {
    margin-left: auto;
    font-size: 10px; color: var(--ink-faint);
    font-weight: 400;
  }
  .content {
    flex: 1; min-width: 0;
    padding: 16px 18px;
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .content-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .content-head h2 {
    font-size: 15px; color: var(--ink);
  }
  .content-head .sub {
    font-size: 11px; color: var(--ink-faint);
  }
  .icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    align-content: start;
  }
  .file {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none;
    padding: 14px 6px 11px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.13s ease, border-color 0.13s ease;
    animation: fileIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
  }
  @keyframes fileIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .icon-grid .file:nth-child(1) { animation-delay: 0.08s; }
  .icon-grid .file:nth-child(2) { animation-delay: 0.13s; }
  .icon-grid .file:nth-child(3) { animation-delay: 0.18s; }
  .icon-grid .file:nth-child(4) { animation-delay: 0.23s; }
  .icon-grid .file:nth-child(5) { animation-delay: 0.28s; }
  .file:hover {
    background: var(--sky-soft);
    border-color: var(--sky-l);
  }
  .file:active { background: var(--sky-soft); }
  .file-ic {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 9px;
    transition: transform 0.1s steps(2);
  }
  .file:hover .file-ic { transform: translateY(-3px); }
  .file-ic svg {
    width: 48px; height: 48px;
    shape-rendering: crispEdges;
    filter: drop-shadow(1.5px 2px 0 rgba(90,80,100,0.16));
  }
  .file-name {
    font-size: 12px; color: var(--ink);
    text-align: center; line-height: 1.4;
    word-break: keep-all;
  }
  .file-ext {
    font-size: 9.5px; color: var(--ink-faint);
    margin-top: 3px;
  }
  .file.soon { cursor: default; }
  .file.soon:hover { background: transparent; border-color: transparent; }
  .file.soon:hover .file-ic { transform: none; }
  .file.soon .file-ic, .file.soon .file-name { opacity: 0.5; }
  .empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: var(--ink-faint);
    font-size: 12.5px;
  }
  .empty .ee { font-size: 32px; margin-bottom: 8px; }
  .statusbar {
    height: 30px;
    display: flex; align-items: center;
    padding: 0 14px; gap: 12px;
    border-top: 1px solid var(--line);
    background: var(--side);
    font-size: 11px; color: var(--ink-soft);
  }
  .statusbar .sb-act {
    cursor: pointer; user-select: none;
    transition: color 0.14s ease;
  }
  .statusbar .sb-act:hover { color: var(--pink-d); }
  .btn {
    flex: 1;
    font-family: var(--font);
    font-size: 13px;
    padding: 10px;
    border-radius: 11px;
    border: 1px solid var(--line2);
    background: var(--win);
    color: var(--ink-soft);
    cursor: pointer;
    transition: transform 0.12s ease;
  }
  .btn:active { transform: scale(0.97); }
  .btn.primary {
    border: 0;
    background: var(--pink-d);
    color: #fff;
    box-shadow: 0 5px 13px rgba(150,140,200,0.3);
  }
  .toast {
    position: fixed; bottom: 26px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--win);
    border: 1px solid var(--line2);
    box-shadow: var(--shadow);
    font-size: 12px; color: var(--ink);
    padding: 10px 17px; border-radius: 999px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
    z-index: 90;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast .th { color: var(--pink-d); }
  #snapHint {
    position: fixed;
    z-index: 9;
    background: rgba(var(--sky-rgb),0.22);
    border: 2px solid var(--sky);
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
  }
  #snapHint.show { opacity: 1; }
  .trash-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .trash-info {
    font-size: 12px; color: var(--ink-soft);
    flex: 1; min-width: 0;
  }
  .trash-toolbar .btn {
    flex-shrink: 0;
    font-size: 11.5px;
    padding: 7px 13px;
  }
  .trash-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 7px;
  }
  .trash-row {
    border: 1px solid var(--line2);
    border-radius: 10px;
    padding: 10px 11px;
    background: var(--side);
  }
  .trash-row-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 5px;
  }
  .trash-row-title { font-size: 12px; font-weight: 700; color: var(--ink); }
  .trash-row-acts { display: flex; gap: 5px; flex-shrink: 0; }
  .trash-mini {
    font-size: 10.5px;
    padding: 3px 8px;
    border: 0; border-radius: 7px;
    cursor: pointer;
    font-family: var(--font);
  }
  .trash-mini.restore { background: var(--sky-soft); color: var(--sky-d); }
  .trash-mini.purge { background: var(--pink-soft); color: var(--pink-d); }
  .trash-row-preview {
    font-size: 11px; color: var(--ink-soft);
    line-height: 1.5;
    max-height: 42px; overflow: hidden;
    white-space: pre-wrap;
  }
  .trash-thumb {
    width: 100%;
    max-height: 100px;
    object-fit: cover;
    border-radius: 7px;
    display: block;
  }
  .trash-empty {
    text-align: center;
    padding: 44px 16px;
    color: var(--ink-faint);
    font-size: 12.5px; line-height: 1.7;
  }
  .trash-empty .te-ic { font-size: 30px; margin-bottom: 8px; }
  @media (max-width: 680px) {
    .body { position: relative; }
    .sidebar {
      position: absolute; left: 0; top: 0; bottom: 0; z-index: 40;
      width: min(82%, 282px); transform: translateX(-100%);
      transition: transform .26s ease; box-shadow: 6px 0 24px rgba(120,100,120,.28);
    }
    .sidebar.open { transform: translateX(0); }
    .side-backdrop { display: block; position: absolute; inset: 0; z-index: 39;
      background: rgba(0,0,0,.34); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    .side-backdrop.show { opacity: 1; pointer-events: auto; }
    .side-toggle { display: inline-flex; }
    .icon-grid { grid-template-columns: repeat(3, 1fr); }
    .searchbox { width: 110px; }
    body { padding: 14px 12px 50px; }
    .widget { display: none; }
  }
  @media (max-width: 420px) {
    .icon-grid { grid-template-columns: repeat(2, 1fr); }
    .addressbar .crumb.hideable { display: none; }
    .addressbar .sep.hideable { display: none; }
  }
/* =========================================================
   ▒▒ 티스토리 블로그 콘텐츠 스타일 (스킨 변환 추가분) ▒▒
   원본 데스크톱 디자인 토큰(--ink, --pink-d, --sky-soft …)을 그대로 사용
   ========================================================= */
.idx-head { display: none; }
body#tt-body-index .list-wrap,
body#tt-body-page  .list-wrap { display: none !important; }
body#tt-body-category .idx-grid,
body#tt-body-tag      .idx-grid,
body#tt-body-search   .idx-grid,
body#tt-body-archive  .idx-grid { display: none !important; }
.cover-area { display: flex; flex-direction: column; gap: 16px; }
.content .cover-area .icon-grid { grid-template-columns: repeat(var(--cover-cols, 3), 1fr); gap: 8px; }
.content .cover-area .file-ic { width: 72px; height: 72px; }
.content .cover-area .file-doc { font-size: 42px; }
.content .cover-area .file-name { font-size: 13px; }
.cover-slide { position: relative; aspect-ratio: 5 / 2; overflow: hidden; background: var(--side);
  margin-left: -18px; margin-right: -18px; }
.cover-area > .cover-slide:first-child { margin-top: -16px; }   
.cover-slide::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, transparent 45%, var(--win)); }   
.cslide-track { position: absolute; inset: 0; }
.cslide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .6s ease; text-decoration: none; }
.cslide-track .cslide:first-child { opacity: 1; }
.cslide-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--pink-soft), var(--sky-soft)); }
.cslide .file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cslide-cap { display: none; }
.cslide-date { font-size: 11.5px; opacity: .92; }
.cslide-ttl { font-size: 18px; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,.35);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cslide-dots { position: absolute; left: 0; right: 0; bottom: 11px; z-index: 3; display: flex; justify-content: center; gap: 6px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.cover-slide:hover .cslide-dots { opacity: 1; pointer-events: auto; }
.cslide-dots .cdot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; cursor: pointer; background: var(--ink-faint); opacity: .55; transition: width .2s, opacity .2s; }
.cslide-dots .cdot.on { background: var(--pink-d); opacity: 1; width: 18px; }
.chscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
.chscroll::-webkit-scrollbar { height: 7px; }
.chscroll::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 999px; }
.chscroll::-webkit-scrollbar-track { background: transparent; }
.chscroll .chcard { flex: 0 0 150px; scroll-snap-align: start; flex-direction: column; align-items: stretch; padding: 0; border: none; background: transparent; }
.chscroll .chcard:hover { background: transparent; }
.chscroll .chcard .file-ic { width: 100%; height: 116px; border-radius: 12px; margin: 0; }
.chscroll .chcard .file-name { text-align: left; margin-top: 7px; font-size: 12.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover-profile { padding: clamp(20px, 4vw, 30px) 22px; border-radius: 18px;
  border: none; background: linear-gradient(135deg, var(--pink-soft), var(--sky-soft));
  display: flex; flex-direction: column; gap: 22px; }
.cprof-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; }
.cprof-photo { display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  width: clamp(80px, 18vw, 112px); aspect-ratio: 1 / 1; border-radius: 999px;
  background: var(--win); color: var(--pink-d); font-size: 34px;
  box-shadow: 0 3px 12px rgba(120,100,120,.22); }
.cprof-photo img { width: 100%; height: 100%; object-fit: cover; }
.cprof-name { font-size: clamp(17px, 3.4vw, 20px); font-weight: 800; color: var(--ink); text-decoration: none; }
.cprof-name:hover { color: var(--pink-d); }
.cprof-bio { margin: 0 auto; max-width: 480px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; white-space: pre-line; }
.cprof-bio:empty { display: none; }
[data-tistory-react-app="Namecard"],
.tt_box_namecard { display: none !important; }
#sideAdmin { display: none !important; }
.file-body { width: 100%; }
.file-cat, .file-sum { display: none; }
.file-cat { font-size: 11px; color: var(--pink, #e98cb5); margin-top: 2px; }
.file-sum { font-size: 12px; color: var(--ink-faint); margin-top: 3px; line-height: 1.45;
  -webkit-box-orient: vertical; overflow: hidden; }
.postlist.show-sum .file-sum { display: -webkit-box; -webkit-line-clamp: 2; }
.postlist.show-cat .file-cat { display: block; }
.postlist.hide-date .fx-date { display: none; }
.postlist.hide-cmt .fx-cmt { display: none; }
.postlist.hide-thumb .file-thumb { display: none; }
.postlist.view-text .file-sum, .postlist.view-text .file-cat { display: none; }
.file-name .new-pill {
  display: none !important;
}
.postlist.view-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.postlist.view-gallery .file { flex-direction: column; align-items: stretch; padding: 0;
  border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--win); }
.postlist.view-gallery .file:hover { border-color: var(--sky-l); background: var(--win); }
.postlist.view-gallery .file-ic { width: 100%; height: 116px; border-radius: 0; margin: 0; border: none; }
.postlist.view-gallery .file-doc { font-size: 38px; }
.postlist.view-gallery .file-body { padding: 8px 11px 11px; text-align: left; }
.postlist.view-gallery .file-name { text-align: left; font-size: 13px; }
.postlist.view-text { display: flex; flex-direction: column; gap: 0; }
.postlist.view-text .file { flex-direction: row; align-items: baseline; gap: 10px;
  padding: 8px 6px; border-radius: 0; border: none; border-bottom: 1px solid var(--line); }
.postlist.view-text .file:hover { background: var(--sky-soft); }
.postlist.view-text .file-ic { display: none; }
.postlist.view-text .file-body { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.postlist.view-text .file-name { text-align: left; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.postlist.view-text .file-ext { white-space: nowrap; flex: 0 0 auto; font-size: 10.5px; }
.postlist.view-list { display: flex; flex-direction: column; gap: 8px; }
.postlist.view-list .file { flex-direction: row; align-items: stretch; gap: 12px; padding: 10px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--win); }
.postlist.view-list .file:hover { border-color: var(--sky-l); background: var(--win); }
.postlist.view-list .file-ic { width: 88px; height: 88px; flex: 0 0 88px; margin: 0; }
.postlist.view-list .file-doc { font-size: 34px; }
.postlist.view-list .file-body { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.postlist.view-list .file-name { text-align: left; font-size: 14px; }
.postlist.view-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.postlist.view-card .file { flex-direction: column; align-items: stretch; padding: 0;
  border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--win); }
.postlist.view-card .file:hover { border-color: var(--sky-l); background: var(--win); }
.postlist.view-card .file-ic { width: 100%; height: 168px; border-radius: 0; margin: 0; border: none; }
.postlist.view-card .file-doc { font-size: 46px; }
.postlist.view-card .file-body { padding: 12px 14px 15px; text-align: left; display: flex; flex-direction: column; gap: 5px; }
.postlist.view-card .file-name { text-align: left; font-size: 15px; font-weight: 700; }
.postlist.view-card .file-sum { display: -webkit-box; -webkit-line-clamp: 2; }
.postlist.view-magazine { display: flex; flex-direction: column; gap: 14px; }
.postlist.view-magazine .file { flex-direction: row; align-items: stretch; gap: 0;
  padding: 0; overflow: hidden; min-height: 132px;
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--win); }
.postlist.view-magazine .file:hover { border-color: var(--sky-l); }
.postlist.view-magazine .file-ic { width: 210px; flex: 0 0 210px; height: auto; min-height: 132px; border-radius: 0; margin: 0; border: none; }
.postlist.view-magazine .file-doc { font-size: 44px; }
.postlist.view-magazine .file-body { flex: 1; min-width: 0; padding: 16px 18px; text-align: left;
  display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.postlist.view-magazine .file-name { text-align: left; font-size: 16px; font-weight: 700; }
.postlist.view-magazine .file-sum { display: -webkit-box; -webkit-line-clamp: 3; }
.postlist.view-compact { display: flex; flex-direction: column; gap: 1px; }
.postlist.view-compact .file { flex-direction: row; align-items: center; gap: 13px;
  padding: 6px 9px; border: none; border-radius: 8px; background: transparent; }
.postlist.view-compact .file:hover { background: var(--sky-soft); }
.postlist.view-compact .file-ic { width: 30px; height: 30px; flex: 0 0 30px; margin: 0; border-radius: 7px; }
.postlist.view-compact .file-doc { font-size: 15px; }
.postlist.view-compact .file-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; text-align: left; }
.postlist.view-compact .file-name { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.postlist.view-compact .file-sum, .postlist.view-compact .file-cat { display: none; }
.postlist.view-compact .file-ext { flex: 0 0 auto; font-size: 10px; white-space: nowrap; }
.postlist.view-photo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.postlist.view-photo .file { position: relative; flex-direction: column; align-items: stretch; padding: 0; border: none; background: transparent; border-radius: 0; }
.postlist.view-photo .file:hover { background: transparent; }
.postlist.view-photo .file-ic { width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 8px; margin: 0; }
.postlist.view-photo .file:hover .file-ic { transform: none; }
.postlist.view-photo .file-doc { font-size: 30px; }
.postlist.view-photo .file-body {
  position: absolute; inset: 0; z-index: 2; border-radius: 8px;
  display: flex; align-items: flex-end; padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 62%);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.postlist.view-photo .file:hover .file-body { opacity: 1; }
.postlist.view-photo .file-name {
  margin: 0; color: #fff; font-size: 12px; font-weight: 600; text-align: left; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.postlist.view-photo .file-cat, .postlist.view-photo .file-sum, .postlist.view-photo .file-ext { display: none !important; }
.view-switch { margin-left: auto; display: flex; gap: 2px; }
.view-switch .vsw { width: 24px; height: 22px; border: 1px solid var(--line2); background: var(--win);
  border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; padding: 0; }
.view-switch .vsw:hover { background: var(--sky-soft); }
.view-switch .vsw.on { background: var(--sky-soft); color: var(--ink); border-color: var(--sky-l); }
@media (max-width: 560px) {
  .postlist.view-gallery { grid-template-columns: repeat(2, 1fr); }
  .postlist.view-card { grid-template-columns: 1fr; }
  .postlist.view-magazine .file-ic { width: 120px; flex-basis: 120px; min-height: 100px; }
  .postlist.view-magazine .file { min-height: 100px; }
  .view-switch .vsw { width: 22px; height: 20px; font-size: 11px; }
  .content .cover-area .icon-grid { grid-template-columns: repeat(2, 1fr); }
}
.gb-wrap, .tag-wrap { max-width: 820px; margin: 0 auto; }
.gb-body { margin-top: 12px; }
.gb-body .tt-comment-cont { font-family: var(--font) !important; color: var(--ink); display:flex !important; flex-direction:column !important; }
.gb-body .tt-comment-cont, .gb-body .tt-comment-cont * { font-family: var(--font) !important; }   
.gb-body .tt-comment-cont > form { order:999 !important; }   
.gb-body input, .gb-body textarea, .gb-body .tt-cmt { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; caret-color: var(--pink-d) !important; }
.gb-body input::placeholder, .gb-body textarea::placeholder { color: var(--ink-faint) !important; -webkit-text-fill-color: var(--ink-faint) !important; }
.gb-body .tt-cmt {
  font-size:13.5px !important; line-height:1.6 !important;
  padding:11px 13px !important; min-height:74px !important;
  border:1.5px solid var(--line) !important; border-radius:12px !important;
  background: var(--win) !important; outline:none !important;
}
.gb-body .tt-cmt:focus { border-color: var(--pink-d) !important; }
.gb-body .tt-cmt:empty::before { content: attr(data-placeholder); color: var(--ink-faint) !important; -webkit-text-fill-color: var(--ink-faint) !important; pointer-events:none; }
.gb-body .tt_txt_user { display:block !important; font-size:12px !important; font-weight:800 !important; color: var(--ink-soft) !important; margin-bottom:6px !important; }
.gb-body .tt-box-total { display:none !important; }   
.gb-body .tt-box-total .tt_txt_g { font-weight:800; color: var(--ink); }
.gb-body .tt-box-total .tt_num_g { font-weight:800; color: var(--pink-d); }
.gb-body form { margin:0 !important; }
.gb-body .tt-area-write {
  display:flex !important; gap:12px; align-items:flex-start;
  background: var(--side) !important;
  border:none !important;
  border-radius:16px !important;
  padding:15px !important; margin:0 0 4px !important;
}
.gb-body .tt-box-thumb { flex:0 0 auto !important; padding:0 !important; margin:0 !important; }
.gb-body .tt-thumbnail {
  display:block !important; width:42px !important; height:42px !important;
  border-radius:50% !important; background-size:cover !important; background-position:center !important;
  border:1.5px solid var(--line) !important;
}
.gb-body .tt_wrap_write { flex:1 1 auto !important; min-width:0; display:flex; flex-direction:column; gap:9px; }
.gb-body .tt-box-account { display:flex !important; gap:8px; }
.gb-body .tt-box-account input {
  flex:1 1 0; min-width:0; width:auto !important; height:auto !important;
  font-family: var(--font) !important; font-size:13px !important;
  padding:9px 12px !important; margin:0 !important;
  border:1.5px solid var(--line) !important; border-radius:10px !important;
  background: var(--win) !important; color: var(--ink) !important;
  outline:none !important; box-shadow:none !important;
}
.gb-body .tt-box-account input:focus { border-color: var(--pink-d) !important; }
.gb-body .tt-box-account input::placeholder { color: var(--ink-faint) !important; }
.gb-body .tt-box-textarea, .gb-body .tt-box-textarea .tt-inner-g { border:none !important; background:transparent !important; padding:0 !important; margin:0 !important; }
.gb-body .tt-box-textarea textarea {
  width:100% !important; box-sizing:border-box !important; display:block !important;
  font-family: var(--font) !important; font-size:13.5px !important; line-height:1.6 !important;
  padding:11px 13px !important; margin:0 !important;
  border:1.5px solid var(--line) !important; border-radius:12px !important;
  background: var(--win) !important; color: var(--ink) !important;
  min-height:76px !important; resize:vertical !important; outline:none !important; box-shadow:none !important;
}
.gb-body .tt-box-textarea textarea:focus { border-color: var(--pink-d) !important; }
.gb-body .tt-box-textarea textarea::placeholder { color: var(--ink-faint) !important; }
.gb-body .tt-box-write { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px; margin-top:2px; padding:0 !important; }
.gb-body .tt-xe-label { display:inline-flex !important; align-items:center; gap:6px; cursor:pointer; font-size:12.5px; color: var(--ink-soft); }
.gb-body .tt-xe-input-helper { display:none !important; }
.gb-body .tt-xe-label input {
  position:static !important; opacity:1 !important; width:15px !important; height:15px !important; margin:0 !important;
  clip:auto !important; clip-path:none !important; overflow:visible !important; pointer-events:auto !important;
  -webkit-appearance:auto !important; appearance:auto !important; accent-color: var(--pink-d);
}
.gb-body .tt-xe-label-text { color: var(--ink-soft); }
.gb-body .tt-btn_register {
  font-family: var(--font) !important; font-weight:800 !important; font-size:13px !important;
  color:#fff !important; background: var(--pink-d) !important;
  border:none !important; border-radius:999px !important;
  padding:9px 22px !important; margin:0 !important; cursor:pointer !important;
  min-width:auto !important; width:auto !important; height:auto !important;
  transition: background .13s ease, opacity .13s ease;
}
.gb-body .tt-btn_register:hover:not(:disabled) { background: var(--pink) !important; }
.gb-body .tt-btn_register:disabled { opacity:.45 !important; cursor:default !important; }
.gb-body .tt-area-reply { margin:4px 0 0 !important; }
.gb-body .tt-list-reply, .gb-body .tt-list-reply-comment { list-style:none !important; margin:0 !important; padding:0 !important; }
.gb-body .tt-list-reply { margin-top:6px !important; display:flex !important; flex-direction:column; gap:12px; }
.gb-body .tt-item-reply { list-style:none !important; }
.gb-body .tt-wrap-cmt {
  display:flex !important; gap:11px; align-items:flex-start;
  background: var(--side) !important; border:none !important;
  border-radius:14px !important; padding:12px 14px !important; position:relative;
}
.gb-body .tt-item-reply .tt-box-thumb { flex:0 0 auto !important; padding:0 !important; margin:0 !important; }
.gb-body .tt-item-reply .tt-thumbnail { display:block !important; width:36px !important; height:36px !important; border-radius:50% !important; background-size:cover !important; background-position:center !important; border:1.5px solid var(--line) !important; }
.gb-body .tt-box-content { flex:1 1 auto !important; min-width:0; }
.gb-body .tt-box-meta { display:flex !important; align-items:center; gap:6px; margin-bottom:3px; flex-wrap:wrap; padding-right:24px; }
.gb-body .tt-link-user { font-weight:800 !important; font-size:13px !important; color: var(--ink) !important; text-decoration:none !important; }
.gb-body .tt-link-user:hover { color: var(--pink-d) !important; }
.gb-body .tt_ico_lock {
  display:inline-block !important; font-size:10px !important; line-height:1.6 !important; font-weight:700 !important;
  color: var(--pink-d) !important; background: var(--pink-soft) !important;
  padding:0 7px !important; border-radius:999px !important;
  text-indent:0 !important; width:auto !important; height:auto !important; overflow:visible !important; background-image:none !important; text-decoration:none !important;
}
.gb-body .tt-wrap-desc { margin:0 !important; }
.gb-body .tt_desc { font-size:13.5px !important; line-height:1.6 !important; color: var(--ink) !important; margin:0 !important; word-break:break-word; white-space:pre-wrap; }
.gb-body .tt-wrap-info { display:flex !important; align-items:center; gap:10px; margin-top:7px !important; }
.gb-body .tt_date { font-size:11.5px !important; color: var(--ink-faint) !important; }
.gb-body .tt-link-comment { text-decoration:none !important; }
.gb-body .tt-link-comment .tt_txt_g { font-size:11.5px !important; font-weight:700 !important; color: var(--ink-soft) !important; }
.gb-body .tt-link-comment:hover .tt_txt_g { color: var(--pink-d) !important; }
.gb-body .tt-box-modify { position:absolute !important; top:10px; right:12px; }
.gb-body .tt-button-modify { font-size:0 !important; background:none !important; border:none !important; cursor:pointer !important; padding:2px 4px !important; width:auto !important; height:auto !important; background-image:none !important; text-indent:0 !important; line-height:1 !important; }
.gb-body .tt-button-modify::before { content:'\22EF'; font-size:17px; color: var(--ink-faint); }
.gb-body .tt-button-modify:hover::before { color: var(--pink-d); }
.gb-body .tt-list-modify {
  list-style:none !important; margin:4px 0 0 !important; padding:5px !important;
  background: var(--win) !important; border:1.5px solid var(--line) !important; border-radius:10px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.16) !important; min-width:96px;
}
.gb-body .tt-list-modify li { list-style:none !important; }
.gb-body .tt-list-modify a { display:block !important; padding:6px 10px !important; font-size:12px !important; color: var(--ink) !important; text-decoration:none !important; border-radius:7px !important; }
.gb-body .tt-list-modify a:hover { background: var(--pink-soft) !important; color: var(--pink-d) !important; }
.gb-body .tt-list-reply-comment { margin-top:10px !important; padding-left:20px !important; display:flex !important; flex-direction:column; gap:10px; }
.gb-body .tt-list-reply-comment > .tt-item-reply > .tt-wrap-cmt { background: var(--win) !important; }
.gb-body .tt-list-reply, .gb-body .tt-list-reply-comment,
.gb-body .tt-list-reply > .tt-item-reply, .gb-body .tt-list-reply-comment > .tt-item-reply,
.gb-body .tt-item-reply, .gb-body .tt-box-content, .gb-body .tt-box-meta,
.gb-body .tt-wrap-desc, .gb-body .tt-wrap-info { border:none !important; }
.gb-body .tt_box_pwd { margin-top:9px !important; }
.gb-body .tt_form_pwd fieldset { border:none !important; margin:0 !important; padding:0 !important; display:flex !important; gap:7px; }
.gb-body .tt_inp_g {
  flex:1 1 auto; font-family: var(--font) !important; font-size:12.5px !important;
  padding:8px 11px !important; border:1.5px solid var(--line) !important; border-radius:9px !important;
  background: var(--win) !important; color: var(--ink) !important; outline:none !important;
}
.gb-body .tt_inp_g:focus { border-color: var(--pink-d) !important; }
.gb-body .tt_btn_submit { background: var(--pink-d) !important; border:none !important; border-radius:999px !important; padding:0 16px !important; cursor:pointer !important; }
.gb-body .tt_btn_submit:disabled { opacity:.45 !important; }
.gb-body .tt_ico_check { color:#fff !important; font-size:12px !important; font-weight:800 !important; text-indent:0 !important; width:auto !important; height:auto !important; background-image:none !important; overflow:visible !important; line-height:34px !important; }
.taglog { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; padding: 4px; align-items: baseline; }
.taglog .tag-item {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  background: var(--pink-soft, #ffe2ef); color: var(--pink-d, #e06699);
  text-decoration: none; font-weight: 600; line-height: 1.2;
  border: 1.5px solid transparent;
  transition: background .13s ease, border-color .13s ease, transform .1s ease;
}
.taglog .tag-item:hover { background: var(--win); border-color: var(--pink); transform: translateY(-2px); }
.taglog .tag-item.cloud1 { font-size: 19px; background: var(--pink, #e98cb5); color: #fff; }
.taglog .tag-item.cloud2 { font-size: 16px; }
.taglog .tag-item.cloud3 { font-size: 14px; }
.taglog .tag-item.cloud4 { font-size: 12.5px; background: var(--sky-soft); color: var(--sky); }
.taglog .tag-item.cloud5 { font-size: 11px; background: var(--sky-soft); color: var(--sky); opacity: 0.92; }
.content .file-ic {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sky-soft);
  border: 1.5px solid var(--line);
}
.content .file:hover .file-ic { border-color: var(--sky-l); }
.content .file-doc {
  font-size: 30px; line-height: 1;
  filter: drop-shadow(1.5px 2px 0 rgba(90,80,100,0.10));
}
.content .file-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.content .file-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
body#tt-body-page .idx-grid { display: block; }
.post {
  max-width: 760px;
  margin: 4px auto 0;
  animation: fileIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.post-head {
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1.5px dashed var(--line2);
}
.post-cat {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  color: #fff; background: var(--pink-d);
  padding: 3px 11px; border-radius: 999px;
  text-decoration: none; margin-bottom: 12px;
}
.post-cat:hover { background: var(--pink); }
.post-title {
  font-size: 25px; line-height: 1.35;
  color: var(--ink); word-break: keep-all;
}
.post-meta {
  margin-top: 9px;
  font-size: 12px; color: var(--ink-faint);
}
.post-body {
  max-width: 760px;
  margin: 0 auto;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 14.5px; line-height: 1.8;
  color: var(--ink); word-break: keep-all;
}
.post-body > * { margin-bottom: 1.05em; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
  color: var(--ink); line-height: 1.4;
  margin: 1.5em 0 0.6em; word-break: keep-all;
}
.post-body h1 { font-size: 22px; }
.post-body h2 {
  font-size: 19px;
  padding-bottom: 6px; border-bottom: 2px solid var(--pink-soft);
}
.post-body h3 { font-size: 17px; }
.post-body h3::before { content: "♥ "; color: var(--pink-d); }
.post-body a { color: var(--sky); text-decoration: none; border-bottom: 1px solid var(--sky-l); }
.post-body a:hover { color: var(--pink-d); border-bottom-color: var(--pink); }
.post-body img, .post-body video, .post-body iframe {
  max-width: 100%; height: auto; border-radius: 12px;
}
.post-body figure { margin: 1.2em 0; text-align: center; }
.post-body figure figcaption { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.post-body blockquote {
  margin: 1.2em 0; padding: 12px 18px;
  background: var(--pink-soft);
  border-left: 4px solid var(--pink-d);
  border-radius: 0 10px 10px 0;
  color: var(--ink-soft);
}
.post-body pre {
  background: #2f2b35; color: #f4eef6;
  padding: 16px 18px; border-radius: 12px;
  overflow-x: auto; font-size: 13px; line-height: 1.6;
}
.post-body code {
  font-family: 'Consolas','Menlo',monospace; font-size: 0.92em;
  background: var(--sky-soft); color: var(--ink);
  padding: 2px 6px; border-radius: 6px;
}
.post-body pre code { background: none; color: inherit; padding: 0; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li { margin-bottom: 0.4em; }
.post-body hr { border: none; border-top: 1.5px dashed var(--line2); margin: 1.8em 0; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.post-body th, .post-body td { border: 1px solid var(--line2); padding: 8px 10px; }
.post-body th { background: var(--pink-soft); }
.post-body:empty { display: none; }
.post-protected { max-width: 440px; margin: 30px auto; padding: 32px 26px; text-align: center;
  background: var(--win); border: 1.5px solid var(--line); border-radius: 16px;
  box-shadow: 0 4px 18px rgba(150,120,140,.12); }
.post-protected .pp-lock { font-size: 38px; margin-bottom: 6px; }
.post-protected .pp-msg { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 18px; }
.post-protected .pp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 0; }
.post-protected .pp-input { flex: 1 1 160px; min-width: 0; padding: 9px 13px; font-size: 14px;
  border: 1.5px solid var(--line2); border-radius: 10px; background: var(--side); color: var(--ink); }
.post-protected .pp-input:focus { outline: none; border-color: var(--pink); }
.post-protected .pp-btn { flex: 0 0 auto; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; border-radius: 10px; background: var(--pink); color: #fff; }
.post-protected .pp-btn:hover { background: var(--pink-d); }
.post-tags {
  max-width: 760px; margin: 26px auto 0;
  font-size: 0;            
  color: var(--ink-soft);
}
.post-tags .pt-label {
  font-size: 12.5px; font-weight: 700; color: var(--pink-d);
  vertical-align: middle; margin-right: 8px;
}
.post-tags a {
  display: inline-block; vertical-align: middle;
  font-size: 12px;
  background: var(--side); color: var(--ink-soft);
  padding: 4px 10px; border-radius: 999px;
  text-decoration: none; border: 1px solid var(--line);
  margin: 0 6px 6px 0;     
}
.post-tags a:hover { background: var(--pink-soft); color: var(--ink); }
.post-admin {
  max-width: 760px; margin: 16px auto 0;
  display: flex; gap: 8px; justify-content: flex-end;
}
.post-admin a {
  font-size: 11.5px; padding: 5px 13px; border-radius: 999px;
  background: var(--side); border: 1px solid var(--line2);
  color: var(--ink-soft); text-decoration: none; transition: background .14s, border-color .14s;
}
.post-admin a:hover { background: var(--sky-soft); color: var(--ink); border-color: var(--sky-l); }
.post-admin a.pa-del:hover { background: var(--pink-soft); color: var(--pink-d); }
.post-nav {
  max-width: 760px; margin: 30px auto 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.pn-item {
  flex: 1; min-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 15px;
  background: var(--win); border: 1.5px solid var(--line);
  border-radius: 12px; text-decoration: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.pn-item:hover { border-color: var(--sky-l); background: var(--sky-soft); }
.pn-next { text-align: right; }
.pn-dir { font-size: 11px; font-weight: 700; color: var(--pink-d); }
.pn-title {
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-related { max-width: 760px; margin: 36px auto 0; }
.post-related .pr-head {
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 12px;
}
.content .post-related .icon-grid { gap: 14px; }
.content .post-related .file {
  padding: 0; border-radius: 14px; overflow: hidden;   
  align-items: stretch; text-align: left;
  border: 1.5px solid var(--line); background: var(--win);
  transition: border-color .13s ease, background .13s ease;
}
.content .post-related .file:hover { border-color: var(--pink); }
.content .post-related .file-ic {
  width: 100%; aspect-ratio: 1 / 1; height: auto; position: relative;
  margin: 0; border-radius: 0;                          
  background: var(--pink-soft);
  display: flex; align-items: center; justify-content: center;
}
.content .post-related .file-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.content .post-related .file-doc { font-size: 30px; }
.content .post-related .file-name {
  text-align: left; line-height: 1.45;
  padding: 11px 11px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.content .post-related .file-ext { text-align: left; padding: 5px 11px 13px; margin-top: 0; }
body#tt-body-page .another_category,
body#tt-body-page .postbtn_ccl,
body#tt-body-page [data-tistory-react-app="SupportButton"],
body#tt-body-page .btn_subscription,
body#tt-body-page .btn_menu_toolbar.btn_subscription {
  display: none !important;
}
/* 공감/좋아요 복구
   기존 코드의 `.postbtn_like .wrap_btn { display:none }` 때문에
   티스토리 DOM이 조금만 달라져도 공감 버튼까지 같이 사라질 수 있어서,
   게시글 페이지에서는 버튼 묶음을 먼저 확실히 보이게 둔다. */
body#tt-body-page .container_postbtn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  border: none !important;
  padding: 0 !important;
  margin: 18px 0 8px !important;
  max-width: 760px !important;
}
body#tt-body-page .post-head { position: relative; }
body#tt-body-page .post-head .container_postbtn.in-head {
  position: static !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}
body#tt-body-page .postbtn_like,
body#tt-body-page .postbtn_like .wrap_btn,
body#tt-body-page .postbtn_like [id^="reaction-"],
body#tt-body-page .postbtn_like .btn_post,
body#tt-body-page .postbtn_like .uoc-icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
}
body#tt-body-page .postbtn_like {
  justify-content: flex-start !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
body#tt-body-page .postbtn_like .btn_post.uoc-icon,
body#tt-body-page .postbtn_like .uoc-icon {
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  background: var(--pink-soft) !important;
  border: 0 !important;
  box-shadow: 0 2px 0 rgba(150,120,140,0.10) !important;
  transition: background .14s ease, transform .1s ease;
}
body#tt-body-page .postbtn_like .btn_post.uoc-icon:hover,
body#tt-body-page .postbtn_like .uoc-icon:hover {
  background: var(--pink) !important;
}
body#tt-body-page .postbtn_like .ico_like {
  background: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  overflow: visible !important;
}
body#tt-body-page .postbtn_like .ico_like::before {
  content: "♥";
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--pink-d, #e06699) !important;
}
body#tt-body-page .postbtn_like .txt_like {
  display: inline !important;
  font-size: 11.5px !important;
  color: var(--ink-soft) !important;
}
.paging {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin: 30px 0 12px; flex-wrap: wrap;
}
.paging a { text-decoration: none; }
.pg-num, .pg-arrow {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 12.5px; color: var(--ink-soft);
  background: var(--win); border: 1.5px solid var(--line);
  transition: all 0.13s ease;
}
.pg-num:hover, .pg-arrow:hover { background: var(--sky-soft); border-color: var(--sky-l); color: var(--ink); }
.pg-num.selected, .pg-num[class*="current"], .paging .pg-num.pg-on {
  background: var(--pink-d); border-color: var(--pink-d); color: #fff; font-weight: 700;
}
.pg-arrow.no_more_prev, .pg-arrow.no_more_next { opacity: 0.35; pointer-events: none; }
body#tt-body-page .post-comments {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 760px;
  margin: 40px auto 10px;
  padding-top: 22px;
  border-top: 1.5px dashed var(--line2);
}
body#tt-body-page .post-comments [data-tistory-react-app="Comment"],
body#tt-body-page .post-comments .tt-comment-cont,
body#tt-body-page .post-comments iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
}
.cat-box { font-size: 12.5px; }
.cat-box ul { list-style: none; margin: 0; padding: 0; }
.cat-box li { margin: 0; }
.cat-box a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none;
  transition: background 0.13s ease, color 0.13s ease;
}
.cat-box a:hover {
  background: rgba(0, 0, 0, 0.18) !important;
  color: #ffffff !important;
}
.cat-box a:hover::before {
  color: #ffffff !important;
  opacity: 0.95 !important;
}
.cat-box .c_cnt, .cat-box .cnt { display: none; }
.cat-box .cat-new {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 3px; margin-left: 4px;
  font-size: 9px; font-weight: 800; line-height: 1; vertical-align: middle;
  color: #fff !important; background: var(--pink, #e98cb5) !important;
  border-radius: 999px !important; border: 0 !important;
}
.cat-box li.has-sub { position: relative; }
.cat-box li.has-sub > a { padding-right: 26px; }
.cat-box .cat-toggle {
  position: absolute; top: 5px; right: 4px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-faint); border-radius: 6px; z-index: 2;
  transition: background .12s ease, color .12s ease;
}
.cat-box .cat-toggle:hover { background: var(--pink-soft, #ffe2ef); color: var(--pink-d, #e06699); }
.cat-box .cat-toggle .ct-ic { font-size: 9px; line-height: 1; display: inline-block; transition: transform .18s ease; }
.cat-box li.has-sub:not(.collapsed) > .cat-toggle .ct-ic { transform: rotate(90deg); }
.cat-box li.has-sub.collapsed > ul { display: none; }
.cat-box a.cat-active {
  background: rgba(0, 0, 0, 0.10) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.cat-box a.cat-active::before {
  color: #ffffff !important;
  opacity: 0.95 !important;
}
.cat-box a.cat-active .cat-new,
.cat-box a.cat-active .c_cnt,
.cat-box a.cat-active .cnt {
  background: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
}
@media (max-width: 760px) {
  .post-title { font-size: 21px; }
  .post-body { font-size: 15px; }
  .post-nav { flex-direction: column; }
}
.desk-icon .di-art img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(90,80,100,0.22));
}
.file-ic img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(1.5px 2px 0 rgba(90,80,100,0.16));
}
.content .cover-area .file-ic img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
}
#navGuestbook {
  display: none !important;
}
#guestbookAppWin .app-body {
flex: 1;
min-height: 0;
overflow: hidden;
}
.guestbook-frame {
width: 100%;
height: 100%;
border: 0;
background: #fff;
display: block;
}
body.guestbook-iframe-mode {
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
overflow: auto !important;
}
body.guestbook-iframe-mode .gb-wrap {
max-width: 520px;
margin: 0 auto;
padding: 28px 24px;
}
#guestbookSource {
  display: none !important;
}
body.guestbook-iframe-mode #guestbookSource {
  display: block !important;
}
.content .cover-area .chscroll .file.chcard {
  flex: 0 0 260px !important;
width: 260px !important;
min-width: 260px !important;
max-width: 260px !important;
}
.content .cover-area .chscroll .file.chcard .file-ic {
  width: 220px !important;
  height: 160px !important;
  min-height: 160px !important;
  border-radius: 12px !important;
}
.content .cover-area .chscroll .file.chcard .file-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* =========================================================
   방명록 리셋본 v1
   - 꼬리 없음
   - 내 글 초록/오른쪽
   - 방문자 글 회색/왼쪽
   - 입력창 하단 고정
========================================================= */
:root {
--gb-my: #3f9cff;
--gb-other: #e9e9eb;
--gb-bg: #ffffff;
--gb-meta: rgba(60, 60, 67, 0.56);
}
#guestbookAppWin {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
}
#guestbookAppWin.maximized {
  width: calc(100vw - 24px) !important;
  max-width: none !important;
}
body.guestbook-iframe-mode {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--gb-bg) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.guestbook-iframe-mode #guestbookSource,
body.guestbook-iframe-mode .gb-wrap {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0vh !important;
  margin: 0 !important;
  padding: 14px 16px 8px !important;
  background: var(--gb-bg) !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode #guestbookSource .content-head {
  display: none !important;
}
body.guestbook-iframe-mode .gb-body,
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  width: 100% !important;
  min-height: 0vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--gb-bg) !important;
  overflow: visible !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply {
  order: 1 !important;
  padding-bottom: 10px !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment {
  margin-top: 4px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble > .tt-wrap-cmt {
  align-items: flex-start !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble > .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner > .tt-wrap-cmt {
  align-items: flex-end !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-thumbnail,
body.guestbook-iframe-mode .gb-body .tt_thumb {
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-meta {
  width: fit-content !important;
  max-width: 62% !important;
  margin: 0 0 1px 0 !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: transparent !important;
  line-height: 1.15 !important;
}
body.guestbook-iframe-mode .gb-body .tt-link-user,
body.guestbook-iframe-mode .gb-body .tt-link-user span,
body.guestbook-iframe-mode .gb-body .tt-link-user a {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #111 !important;
  white-space: nowrap !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-modify,
body.guestbook-iframe-mode .gb-body .tt-button-modify {
  position: static !important;
  inset: auto !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 0 0 2px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 14px !important;
  opacity: 0.6 !important;
  transform: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-button-modify::before {
  font-size: 11px !important;
  color: rgba(0,0,0,0.45) !important;
}
body.guestbook-iframe-mode .gb-body .tt_desc {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 62% !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: 17px !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  line-height: 1.34 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: pre-wrap !important;
  box-sizing: border-box !important;
  position: relative !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  background: var(--gb-other) !important;
  color: #111 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt_desc,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt_desc {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  background: var(--gb-my) !important;
  color: #fff !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-info {
  width: fit-content !important;
  max-width: 62% !important;
  margin-top: -2px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
  color: var(--gb-meta) !important;
  opacity: 1 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.guestbook-iframe-mode .gb-body .tt_date,
body.guestbook-iframe-mode .gb-body .tt-link-comment,
body.guestbook-iframe-mode .gb-body .tt-link-comment .tt_txt_g {
  color: var(--gb-meta) !important;
  opacity: 1 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-info {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-wrap-info {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment::before,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment::after,
body.guestbook-iframe-mode .gb-body .tt-item-reply::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply::after,
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt::before,
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt::after,
body.guestbook-iframe-mode .gb-body .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt_desc::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   방명록 iMessage 리셋본
   - 꼬리 없음
   - 내 글 초록 / 오른쪽
   - 방문자 글 회색 / 왼쪽
   - 입력창 하단
========================================================= */
body.guestbook-iframe-mode .gb-body,
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  width: 100% !important;
  min-height: 0vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--gb-bg) !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-box-meta {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-link-user,
body.guestbook-iframe-mode .gb-body .tt-link-user span,
body.guestbook-iframe-mode .gb-body .tt-link-user a {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #111 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-info {
  width: fit-content !important;
  max-width: 62% !important;
  margin-top: -2px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
  color: var(--gb-meta) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-info {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-wrap-info {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt_date,
body.guestbook-iframe-mode .gb-body .tt-link-comment,
body.guestbook-iframe-mode .gb-body .tt-link-comment .tt_txt_g {
  color: var(--gb-meta) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment::before,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment::after,
body.guestbook-iframe-mode .gb-body .tt-item-reply::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply::after,
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt::before,
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt::after,
body.guestbook-iframe-mode .gb-body .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt_desc::after {
  content: none !important;
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment {
  width: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble > .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner > .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-wrap-cmt {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt_desc,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt_desc {
  display: inline-block !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  background: var(--gb-my, #62e96d) !important;
  color: #fff !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-wrap-desc,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-wrap-desc {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt_desc,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt_desc {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-desc {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment {
  gap: 2px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt {
  gap: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-info {
  margin-top: 1px !important;
  margin-bottom: 0px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment {
  margin-top: 2px !important;
  padding-top: 0 !important;
}
/* =========================================================
   방명록 말풍선 꼬리 1차 추가
   - JS 안 건드림
   - 내 말풍선: 오른쪽 꼬리
   - 방문자 말풍선: 왼쪽 꼬리
========================================================= */
body.guestbook-iframe-mode .gb-body .tt_desc {
  position: relative !important;
  overflow: visible !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt_desc::after,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt_desc::after,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt_desc::before {
  right: -7px !important;
  bottom: 0 !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--gb-my, #62e96d) !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 3px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt_desc::after,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt_desc::after {
  right: -14px !important;
  bottom: -1px !important;
  width: 14px !important;
  height: 18px !important;
  background: var(--gb-bg, #ffffff) !important;
  border-bottom-left-radius: 14px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc::after {
  content: none !important;
  display: none !important;
}
/* =========================================================
   방문자가 쓴 '원본 방명록'에만 회색 꼬리 붙이기
   - 답글에는 안 붙음
   - 내 초록 말풍선에는 영향 없음
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-list-reply > .tt-item-reply.is-guest-bubble > .tt-wrap-cmt .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-list-reply > .tt-item-reply.is-guest-bubble > .tt-wrap-cmt .tt_desc::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply > .tt-item-reply.is-guest-bubble > .tt-wrap-cmt .tt_desc::before {
  left: -7px !important;
  right: auto !important;
  bottom: 0 !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--gb-other, #e9e9eb) !important;
  border-bottom-right-radius: 16px !important;
  border-bottom-left-radius: 3px !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply > .tt-item-reply.is-guest-bubble > .tt-wrap-cmt .tt_desc::after {
  left: -14px !important;
  right: auto !important;
  bottom: -1px !important;
  width: 14px !important;
  height: 18px !important;
  background: var(--gb-bg, #ffffff) !important;
  border-bottom-right-radius: 14px !important;
}
/* =========================================================
   방명록 꼬리 최종: 연속 말풍선은 마지막에만
========================================================= */
body.guestbook-iframe-mode .gb-body .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt_desc::after {
  content: none !important;
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.has-tail .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply.has-tail .tt_desc::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.same-next .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply.same-next .tt_desc::after {
  content: none !important;
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble.has-tail .tt_desc::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner.has-tail .tt_desc::before {
  right: -7px !important;
  left: auto !important;
  bottom: 0 !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--gb-my, #62e96d) !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 3px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble.has-tail .tt_desc::after,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner.has-tail .tt_desc::after {
  right: -14px !important;
  left: auto !important;
  bottom: -1px !important;
  width: 14px !important;
  height: 18px !important;
  background: var(--gb-bg, #ffffff) !important;
  border-bottom-left-radius: 14px !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply > .tt-item-reply.is-guest-bubble.has-tail > .tt-wrap-cmt .tt_desc::before {
  left: -7px !important;
  right: auto !important;
  bottom: 0 !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--gb-other, #e9e9eb) !important;
  border-bottom-right-radius: 16px !important;
  border-bottom-left-radius: 3px !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply > .tt-item-reply.is-guest-bubble.has-tail > .tt-wrap-cmt .tt_desc::after {
  left: -14px !important;
  right: auto !important;
  bottom: -1px !important;
  width: 14px !important;
  height: 18px !important;
  background: var(--gb-bg, #ffffff) !important;
  border-bottom-right-radius: 14px !important;
}
/* =========================================================
   방명록: 방문자 이름 표시 + 점세개를 이름 옆에 붙이기
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
  max-width: 70% !important;
  margin: 0 0 3px 6px !important;
  padding: 0 !important;
  align-self: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  line-height: 1 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-link-user,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-link-user span,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-link-user a {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #111 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-modify,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-button-modify {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 0 0 2px !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 0.55 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 14px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-button-modify::before {
  font-size: 11px !important;
  line-height: 14px !important;
  color: rgba(0,0,0,0.45) !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc {
  margin-top: 0 !important;
}
/* =========================================================
   방명록: 방문자 이름 기존 요소 살리기
   - 구조: .tt-box-content > .tt-box-meta > .tt-link-user
   - 새 요소 생성 안 함
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-content {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  overflow: visible !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta {
  order: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 70% !important;
  height: auto !important;
  min-height: 12px !important;
  margin: 0 0 3px 6px !important;
  padding: 0 !important;
  align-self: flex-start !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  overflow: visible !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-desc {
  order: 1 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta .tt-link-user,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta .tt-link-user span,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta .tt-link-user a {
  display: inline-block !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  height: auto !important;
  min-height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-indent: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  transform: none !important;
  overflow: visible !important;
}
/* =========================================================
   방명록: 이름 / 말풍선 / 시간답글 순서 정리
   순서: 이름 → 말풍선 → 시간·답글
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta {
  order: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  margin-left: 6px !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-desc {
  order: 2 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-info {
  order: 3 !important;
  align-self: flex-start !important;
  margin-top: 2px !important;
  margin-bottom: 4px !important;
  margin-left: 6px !important;
  margin-right: auto !important;
  padding: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-box-meta {
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-wrap-info {
  order: 3 !important;
  align-self: flex-end !important;
  margin-top: 2px !important;
  margin-bottom: 4px !important;
  margin-left: auto !important;
  margin-right: 6px !important;
  padding: 0 !important;
}
/* =========================================================
   방명록: 채팅 간격 강제 압축
   - 연속 말풍선은 거의 붙게
   - same-next는 시간/답글 숨김
   - 마지막 말풍선만 시간/답글 표시
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-list-reply,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment {
  gap: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-box-content {
  gap: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta {
  margin-bottom: 1px !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-info {
  margin-top: 0 !important;
  margin-bottom: 1px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.same-next .tt-wrap-info {
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.same-next {
  margin-bottom: 1px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble.same-next,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner.same-next {
  margin-bottom: 3px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble.same-next {
  margin-bottom: 2px !important;
}
body.guestbook-iframe-mode .gb-body .tt_desc {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
/* =========================================================
   방명록: 방문자 프사 말풍선 왼쪽에 붙이기
   - 기존 .tt-box-thumb / .tt-thumbnail 사용
   - 내 초록 말풍선 프사는 숨김
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-box-thumb {
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble > .tt-wrap-cmt {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 6px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-thumb {
  display: flex !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 0 1px 0 !important;
  padding: 0 !important;
  flex: 0 0 24px !important;
  align-self: flex-end !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-thumb a {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-thumbnail {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
/* =========================================================
   방명록: 방문자 프사 최종 배치
   - 내 프사 숨김
   - 방문자 프사만 표시
   - 프사는 말풍선 왼쪽 아래에 붙임
   - 연속 말풍선은 마지막에만 프사 보임
   - 회색 말풍선 살짝 오른쪽으로
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble > .tt-wrap-cmt {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  margin-left: 10px !important;   
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-thumb {
  display: flex !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
  margin: 0 0 16px 0 !important;  
  padding: 0 !important;
  align-self: flex-end !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-thumb a {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-thumbnail {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-content {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-desc,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-info {
  align-self: flex-start !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc {
  margin-left: 6px !important;
  margin-right: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble.same-next .tt-box-thumb {
  visibility: hidden !important;
}
/* =========================================================
   방명록: 방문자 프사/말풍선 위치 미세조정
   - 프사와 방문자 말풍선 전체를 왼쪽으로
   - 방문자 이름/말풍선만 살짝 아래로
   - 날짜/답글 위치는 그대로
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble > .tt-wrap-cmt {
  margin-left: 0 !important;   
  gap: 5px !important;         
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-thumb {
  margin-left: -4px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-content {
  margin-left: 3px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta {
  transform: translate(8px, 10px) !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-desc {
  transform: translateY(10px) !important;
}
/* =========================================================
   방명록: 프사 표시 최종 정리
   - 내 프사 숨김
   - 방문자 연속 말풍선은 마지막에만 프사 표시
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-thumbnail,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-thumbnail {
  display: none !important;
  visibility: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble.same-next .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble.same-next .tt-thumbnail {
  visibility: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble:not(.same-next) .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble:not(.same-next) .tt-thumbnail {
  visibility: visible !important;
}
/* =========================================================
   방명록: 답글 안의 내 초록 말풍선 오른쪽 정렬
   - 방문자 답글/프사는 건드리지 않음
   - class 붙은 내 글만 오른쪽
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble > .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner > .tt-wrap-cmt {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble .tt-thumbnail,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner .tt-thumbnail {
  display: none !important;
  visibility: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble .tt-wrap-desc,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner .tt-wrap-desc {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble .tt_desc,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner .tt_desc {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  background: var(--gb-my, #62e96d) !important;
  color: #fff !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner .tt-wrap-info {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 6px !important;
  justify-content: flex-end !important;
  text-align: right !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-mine-bubble .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment > .tt-item-reply.is-owner .tt-box-meta {
  display: none !important;
}
/* =========================================================
   방명록: 내가 직접 쓴 원글 초록 말풍선만 아래로 내리기
   - 답글로 단 내 글은 제외
   - 시간/답글 줄은 건드리지 않음
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-list-reply > .tt-item-reply.is-mine-bubble > .tt-wrap-cmt .tt_desc,
body.guestbook-iframe-mode .gb-body .tt-list-reply > .tt-item-reply.is-owner > .tt-wrap-cmt .tt_desc {
  transform: translateY(10px) !important;
}
/* =========================================================
   방명록 창 크기 고정
   - 가로/세로 고정
   - 사용자가 리사이즈 못 하게
========================================================= */
#guestbookAppWin {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  height: 600px !important;
  min-height: 600px !important;
  max-height: 600px !important;
  resize: none !important;
}
#guestbookAppWin .app-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#guestbookFrame,
#guestbookAppWin iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}
#guestbookAppResize,
#guestbookAppWin .resize-handle {
  display: none !important;
}
/* =========================================================
   스크롤바 색상만 연한 회색으로 통일
   - 두께 안 건드림
   - 화살표 안 건드림
   - 색만 변경
========================================================= */
html,
body,
* {
  scrollbar-color: #dcdcdc transparent !important;
}
*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent !important;
}
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #dcdcdc !important;
  border-radius: 999px !important;
  border-color: transparent !important;
  background-clip: padding-box !important;
}
*::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background-color: #cfcfcf !important;
}
.content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.trash-list::-webkit-scrollbar-thumb,
.explorer .content::-webkit-scrollbar-thumb,
.explorer .body::-webkit-scrollbar-thumb,
.app-body::-webkit-scrollbar-thumb,
.app-win .app-body::-webkit-scrollbar-thumb,
#guestbookAppWin .app-body::-webkit-scrollbar-thumb,
body.guestbook-iframe-mode::-webkit-scrollbar-thumb,
body.guestbook-iframe-mode *::-webkit-scrollbar-thumb {
  background-color: #dcdcdc !important;
  border-radius: 999px !important;
  border-color: transparent !important;
  background-clip: padding-box !important;
}
/* =========================================================
   스크롤바 살짝만 두껍게
   - 화살표는 건드리지 않음
   - 너무 두껍게 하지 않음
========================================================= */
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 11px !important;
  height: 11px !important;
}
.content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.trash-list::-webkit-scrollbar,
.explorer .content::-webkit-scrollbar,
.explorer .body::-webkit-scrollbar,
.app-body::-webkit-scrollbar,
.app-win .app-body::-webkit-scrollbar,
#guestbookAppWin .app-body::-webkit-scrollbar,
body.guestbook-iframe-mode::-webkit-scrollbar,
body.guestbook-iframe-mode *::-webkit-scrollbar {
  width: 11px !important;
  height: 11px !important;
}
///////////////////////////////////
///////////////////////////////////
///////////////////////////////////
///////////////////////////////////
///////////////////////////////////
/* =========================================================
   Finder식 왼쪽 사이드바 블러판
   - 사이드바 자체가 아니라 뒤에 유리판을 깔아서 blur
   - 메인 콘텐츠는 선명하게 유지
========================================================= */
.explorer {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.explorer .body {
  position: relative !important;
  display: flex !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
.explorer .sidebar-glass {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 184px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(245, 248, 250, 0.7) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.45) brightness(1.08) !important;
  backdrop-filter: blur(20px) saturate(1.45) brightness(1.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    inset -1px 0 0 rgba(120, 130, 145, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.36) !important;
}
.explorer .sidebar {
  position: relative !important;
  z-index: 1 !important;
  width: 184px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-right: 0 !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.explorer .content {
  position: relative !important;
  z-index: 1 !important;
  background: var(--win) !important;
}
.explorer .titlebar {
  background: var(--titlebar) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.explorer .toolbar {
  background: var(--win) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.explorer .statusbar {
  background: var(--side) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* =========================================================
   사이드바 블러 색감 보정
   - 채도 낮춤
   - 밝기 낮춤
   - 하얗게 뜨는 느낌 줄이고 차분한 젖빛 유리 느낌
========================================================= */
.explorer .sidebar-glass {
  background: rgba(248, 249, 250, 0.70) !important;
  -webkit-backdrop-filter:
    blur(30px)
    saturate(1.2)
    brightness(0.95)
    contrast(0.92) !important;
  backdrop-filter:
    blur(30px)
    saturate(1.2)
    brightness(0.95)
    contrast(0.95) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    inset -1px 0 0 rgba(110, 120, 135, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.22) !important;
}
/* =========================================================
   사이드바 텍스트 가독성 보정
   - 블러 배경 위에서도 잘 보이게 짙은 회색으로
========================================================= */
.explorer .sidebar,
.explorer .sidebar * {
  color: #3f3f46 !important;
}
.explorer .sidebar .side-group-label {
  color: #55555f !important;
  font-weight: 700 !important;
}
.explorer .sidebar .side-item {
  color: #42424a !important;
  font-weight: 500 !important;
}
.explorer .sidebar .side-item.active {
  color: #2f2f36 !important;
  font-weight: 700 !important;
}
.explorer .sidebar .side-count {
  color: #ffffff !important;
  background: rgba(90, 90, 96, 0.45) !important;
}
.explorer .sidebar svg {
  color: #55555f !important;
  stroke: #55555f !important;
}
/* =========================================================
   사이드바 선택/호버 배경 통일
   - 글씨는 계속 짙은 회색
   - 선택/호버 배경만 투명한 검정
   - 농도 낮춤
========================================================= */
.explorer .sidebar .side-item.active {
  background: rgba(0, 0, 0, 0.14) !important;
  color: #2f2f36 !important;
  font-weight: 700 !important;
}
.explorer .sidebar .side-item:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #2f2f36 !important;
}
.explorer .sidebar .side-item.active *,
.explorer .sidebar .side-item:hover *,
.explorer .sidebar .side-item.active svg,
.explorer .sidebar .side-item:hover svg {
  color: #2f2f36 !important;
  stroke: #2f2f36 !important;
}
.explorer .sidebar .cat-box a.cat-active,
.explorer .sidebar .cat-box li.selected > a,
.explorer .sidebar .cat-box li.active > a,
.explorer .sidebar .cat-box a.selected,
.explorer .sidebar .cat-box a.active {
  background: rgba(0, 0, 0, 0.14) !important;
  color: #2f2f36 !important;
  font-weight: 700 !important;
}
.explorer .sidebar .cat-box a:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #2f2f36 !important;
}
.explorer .sidebar .cat-box a.cat-active::before,
.explorer .sidebar .cat-box li.selected > a::before,
.explorer .sidebar .cat-box li.active > a::before,
.explorer .sidebar .cat-box a.selected::before,
.explorer .sidebar .cat-box a.active::before,
.explorer .sidebar .cat-box a:hover::before {
  color: #2f2f36 !important;
  opacity: 0.9 !important;
}
.explorer .sidebar .side-item.active .side-count,
.explorer .sidebar .side-item:hover .side-count,
.explorer .sidebar .cat-box a.cat-active .cat-new,
.explorer .sidebar .cat-box li.selected > a .cat-new,
.explorer .sidebar .cat-box li.active > a .cat-new,
.explorer .sidebar .cat-box a:hover .cat-new {
  background: rgba(0, 0, 0, 0.18) !important;
  color: #ffffff !important;
}
.explorer .sidebar .cat-box .tt_category > li > a,
.explorer .sidebar .cat-box a.link_tit {
  display: none !important;
}
/* =========================================================
   사이드바 카테고리 최종 정렬
   - 즐겨찾기 = cms / 만화
   - 전체 글 = HKKR / PMGM / RK
   - 분류 전체보기, N, 숫자, 접기 화살표 제거
========================================================= */
.explorer .sidebar .cat-box > ul > li > a,
.explorer .sidebar .cat-box a.link_tit,
.explorer .sidebar .cat-box .link_tit,
.explorer .sidebar .cat-box a[href="/category"],
.explorer .sidebar .cat-box a[href$="/category"] {
  display: none !important;
}
.explorer .sidebar .cat-box .cat-toggle {
  display: none !important;
}
.explorer .sidebar .cat-box li.has-sub.collapsed > ul {
  display: block !important;
}
.explorer .sidebar .cat-box img,
.explorer .sidebar .cat-box .c_cnt,
.explorer .sidebar .cat-box .cnt,
.explorer .sidebar .cat-box .cat-new,
.explorer .sidebar .cat-box .ico_new,
.explorer .sidebar .cat-box .tt_new,
.explorer .sidebar .cat-box .new,
.explorer .sidebar .cat-box span[class*="new"],
.explorer .sidebar .cat-box em[class*="new"],
.explorer .sidebar .cat-box i[class*="new"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}
.explorer .sidebar .cat-box,
.explorer .sidebar .cat-box ul,
.explorer .sidebar .cat-box li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.explorer .sidebar .cat-box {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.explorer .sidebar .side-group-label,
.explorer .sidebar .cat-box > ul > li > ul > li > a,
.explorer .sidebar .cat-box .category_list > li > a,
.explorer .sidebar .cat-box a.link_item {
  display: block !important;
  padding: 0 9px !important;
  margin: 0 0 5px 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  color: var(--ink-faint) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.explorer .sidebar .cat-box > ul > li > ul > li > a::before,
.explorer .sidebar .cat-box > ul > li > ul > li > a::after,
.explorer .sidebar .cat-box .category_list > li > a::before,
.explorer .sidebar .cat-box .category_list > li > a::after,
.explorer .sidebar .cat-box a.link_item::before,
.explorer .sidebar .cat-box a.link_item::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
.explorer .sidebar .cat-box > ul > li > ul > li,
.explorer .sidebar .cat-box .category_list > li {
  margin-top: 14px !important;
}
.explorer .sidebar .cat-box > ul > li > ul > li:first-child,
.explorer .sidebar .cat-box .category_list > li:first-child {
  margin-top: 0 !important;
}
.explorer .sidebar .cat-box > ul > li > ul > li > ul,
.explorer .sidebar .cat-box .sub_category_list,
.explorer .sidebar .cat-box ul ul {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.explorer .sidebar .side-item,
.explorer .sidebar .cat-box > ul > li > ul > li > ul > li > a,
.explorer .sidebar .cat-box .sub_category_list > li > a,
.explorer .sidebar .cat-box a.link_sub_item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 32px !important;
  padding: 8px 9px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #3f3f46 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
.explorer .sidebar .cat-box > ul > li > ul > li > ul > li > a::before,
.explorer .sidebar .cat-box .sub_category_list > li > a::before,
.explorer .sidebar .cat-box a.link_sub_item::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%233f3f46' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") !important;
}
.explorer .sidebar .cat-box > ul > li > ul > li > ul > li > a::after,
.explorer .sidebar .cat-box .sub_category_list > li > a::after,
.explorer .sidebar .cat-box a.link_sub_item::after {
  content: none !important;
  display: none !important;
}
.explorer .sidebar .side-item:hover,
.explorer .sidebar .side-item.active,
.explorer .sidebar .cat-box > ul > li > ul > li > ul > li > a:hover,
.explorer .sidebar .cat-box > ul > li > ul > li > ul > li > a.cat-active,
.explorer .sidebar .cat-box .sub_category_list > li > a:hover,
.explorer .sidebar .cat-box .sub_category_list > li > a.cat-active,
.explorer .sidebar .cat-box a.link_sub_item:hover,
.explorer .sidebar .cat-box a.link_sub_item.cat-active {
  color: #2f2f36 !important;
  background: rgba(0, 0, 0, 0.10) !important;
  font-weight: 600 !important;
}
/* =========================================================
   사이드바 섹션 제목 글씨 보정
   - 즐겨찾기 / cms / 만화
   - 글씨만 살짝 키움
   - 배경 바 없음
   - 글씨 자체를 곱하기 레이어처럼
========================================================= */
.explorer .sidebar .side-group-label,
.explorer .sidebar .cat-box > ul > li > ul > li > a,
.explorer .sidebar .cat-box .category_list > li > a,
.explorer .sidebar .cat-box a.link_item {
  display: block !important;
  padding: 0 9px !important;
  margin: 0 0 7px 0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
  color: rgba(32, 32, 38, 0.48) !important;
  mix-blend-mode: multiply !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   사이드바 간격 압축
   - 즐겨찾기 / cms / 백업 같은 제목 간격 줄이기
   - 전체 글 / HKKR / PMGM / RK / 만화 항목 다닥다닥 붙이기
========================================================= */
.explorer .sidebar {
  padding-top: 12px !important;
}
.explorer .sidebar .side-group-label,
.explorer .sidebar .cat-box > ul > li > ul > li > a,
.explorer .sidebar .cat-box .category_list > li > a,
.explorer .sidebar .cat-box a.link_item {
  padding: 0 9px !important;
  margin: 0 0 4px 0 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}
.explorer .sidebar .side-group {
  margin-bottom: 15px !important;
}
.explorer .sidebar .cat-box > ul > li > ul > li,
.explorer .sidebar .cat-box .category_list > li {
  margin-top: 15px !important;
}
.explorer .sidebar .side-item,
.explorer .sidebar .cat-box > ul > li > ul > li > ul > li > a,
.explorer .sidebar .cat-box .sub_category_list > li > a,
.explorer .sidebar .cat-box a.link_sub_item {
  min-height: 20px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1.15 !important;
}
/* =========================================================
   방명록 앱 접힘 상태 투명해짐 방지
   - 접었을 때 titlebar만 남아도 창 배경 유지
========================================================= */
#guestbookAppWin.collapsed {
  height: auto !important;
  background: #ffffff !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--win-border) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}
#guestbookAppWin.collapsed .titlebar {
  display: flex !important;
  background: var(--titlebar) !important;
  border-bottom: 0 !important;
  opacity: 1 !important;
}
#guestbookAppWin.collapsed .app-body,
#guestbookAppWin.collapsed .guestbook-frame,
#guestbookAppWin.collapsed .statusbar,
#guestbookAppWin.collapsed .resize-handle {
  display: none !important;
}
/* =========================================================
   방명록 접힘 상태: 흰 빈 화면 제거
========================================================= */
#guestbookAppWin.collapsed {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}
#guestbookAppWin.collapsed .titlebar {
  height: 42px !important;
  display: flex !important;
  border-bottom: 0 !important;
}
#guestbookAppWin.collapsed .app-body,
#guestbookAppWin.collapsed .guestbook-frame,
#guestbookAppWin.collapsed iframe,
#guestbookAppWin.collapsed .statusbar,
#guestbookAppWin.collapsed .resize-handle {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   음악 앱 아이콘
   - Apple Music 느낌
========================================================= */
.apple-music-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(145deg, #ff6b9a 0%, #ff2d68 48%, #ff004c 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.45),
    inset 0 -8px 18px rgba(190, 0, 60, 0.18),
    0 5px 12px rgba(255, 45, 104, 0.28) !important;
}
.apple-music-icon .music-note-mark {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(150, 0, 50, 0.25) !important;
}
/* =========================================================
   음악 앱 창 1차: 모바일 팝업형
========================================================= */
#musicAppWin {
  width: 330px;
  height: 255px;
  min-width: 300px;
  min-height: 220px;
  background: rgba(246, 246, 246, 0.96) !important;
}
#musicAppWin .titlebar {
  height: 38px !important;
  background: rgba(246, 246, 246, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
#musicAppWin .tb-title {
  font-size: 12px !important;
  color: #666 !important;
}
.music-popup-body {
  height: calc(100% - 38px) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,245,245,0.96)) !important;
}
.music-mini-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.music-album-art {
  width: 68px !important;
  height: 68px !important;
  flex: 0 0 68px !important;
  border-radius: 9px !important;
  background:
    linear-gradient(145deg, #ff6b9a, #ff004c) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}
.music-album-art span {
  color: #fff !important;
  font-size: 34px !important;
}
.music-album-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.music-info {
  min-width: 0 !important;
  flex: 1 !important;
}
.music-song-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #333 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.music-song-artist {
  margin-top: 4px !important;
  font-size: 11px !important;
  color: rgba(60,60,60,0.58) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.music-progress-row {
  display: grid !important;
  grid-template-columns: 34px 1fr 34px !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  color: rgba(60,60,60,0.58) !important;
}
#musicProgress {
  width: 100% !important;
  accent-color: #ff4f86 !important;
}
.music-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  margin-top: 2px !important;
}
.music-control-btn {
  border: 0 !important;
  background: transparent !important;
  color: #444 !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.music-control-btn:hover {
  color: #ff4f86 !important;
}
.music-main-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #ff4f86 !important;
  color: #fff !important;
  font-size: 18px !important;
  box-shadow: 0 4px 12px rgba(255, 79, 134, 0.35) !important;
}
.music-main-btn:hover {
  color: #fff !important;
  background: #ff3678 !important;
}
/* =========================================================
   뮤직 앱 접힘 상태
========================================================= */
#musicAppWin.collapsed {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  overflow: hidden !important;
}
#musicAppWin.collapsed .music-popup-body,
#musicAppWin.collapsed .resize-handle {
  display: none !important;
}
/* =========================================================
   뮤직 앱: 볼륨바 + 플레이리스트
========================================================= */
#musicAppWin {
  height: 330px;
  min-height: 285px;
}
.music-volume-row {
  display: grid !important;
  grid-template-columns: 22px 1fr 22px !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: -2px !important;
}
.music-volume-ic {
  font-size: 11px !important;
  opacity: 0.62 !important;
  text-align: center !important;
}
#musicVolume {
  width: 100% !important;
  accent-color: #ff4f86 !important;
}
.music-app-playlist {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow-y: auto !important;
  padding: 4px !important;
  margin-top: 0 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.music-app-track {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 18px 1fr auto !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  font-family: var(--font) !important;
  color: #444 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.music-app-track:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}
.music-app-track.on {
  background: rgba(255, 79, 134, 0.14) !important;
  color: #222 !important;
  font-weight: 700 !important;
}
.music-app-track-ic {
  font-size: 12px !important;
  color: #ff4f86 !important;
}
.music-app-track-main {
  min-width: 0 !important;
}
.music-app-track-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.music-app-track-artist {
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(60, 60, 60, 0.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.music-app-track-time {
  font-size: 10px !important;
  color: rgba(60, 60, 60, 0.45) !important;
}
/* =========================================================
   뮤직 앱 플레이리스트 정렬 보정
   - 제목/아티스트 줄 분리
   - 오른쪽 시간/상태 정렬
========================================================= */
#musicAppWin .music-app-playlist {
  padding: 6px !important;
  gap: 3px !important;
}
#musicAppWin .music-app-track {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  column-gap: 7px !important;
  min-height: 36px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
}
#musicAppWin .music-app-track-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}
#musicAppWin .music-app-track-title {
  display: block !important;
  width: 100% !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#musicAppWin .music-app-track-artist {
  display: block !important;
  width: 100% !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(60, 60, 60, 0.52) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#musicAppWin .music-app-track-time {
  justify-self: end !important;
  font-size: 10px !important;
  color: rgba(60, 60, 60, 0.42) !important;
}
#musicAppWin .music-app-track.on {
  background: rgba(255, 79, 134, 0.15) !important;
}
#musicAppWin .music-app-track.on .music-app-track-title {
  color: #222 !important;
}
#musicAppWin .music-app-track.on .music-app-track-artist {
  color: rgba(40, 40, 40, 0.56) !important;
}
/* =========================================================
   음악 앱 - 썸네일 기반 블러 배경
========================================================= */
#musicAppWin .music-popup-body {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #22162b !important;
}
#musicAppWin .music-dynamic-bg {
  position: absolute !important;
  inset: -28px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  filter: blur(32px) saturate(1.18) brightness(0.92) !important;
  transform: scale(1.14) !important;
  opacity: 0.95 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transition:
    background-image 0.35s ease,
    opacity 0.25s ease !important;
}
#musicAppWin .music-dynamic-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.03) 18%,
      rgba(18,10,24,0.20) 100%
    ),
    radial-gradient(
      circle at top,
      rgba(255,255,255,0.10),
      transparent 40%
    ),
    rgba(32, 18, 42, 0.26) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}
#musicAppWin .music-mini-card,
#musicAppWin .music-progress-row,
#musicAppWin .music-controls-row,
#musicAppWin .music-volume-row,
#musicAppWin .music-app-playlist,
#musicAppWin .resize-handle {
  position: relative !important;
  z-index: 2 !important;
}
#musicAppWin .music-mini-card,
#musicAppWin .music-app-playlist {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 8px 20px rgba(0,0,0,0.08) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}
#musicAppWin .music-song-title {
  color: #ffffff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.18) !important;
}
#musicAppWin .music-song-artist,
#musicAppWin .music-progress-row,
#musicAppWin .music-app-track-time,
#musicAppWin .music-volume-ic {
  color: rgba(255,255,255,0.78) !important;
}
#musicAppWin .music-control-btn:not(.music-main-btn) {
  color: rgba(255,255,255,0.88) !important;
}
#musicAppWin .music-control-btn:not(.music-main-btn):hover {
  color: #ffffff !important;
}
#musicAppWin .music-app-track.on {
  background: rgba(255,255,255,0.18) !important;
  box-shadow: inset 3px 0 0 rgba(255,255,255,0.68) !important;
}
/* =========================================================
   뮤직 앱: 모바일 미니 플레이어 스타일로 정리
   - 썸네일 크게
   - 재생버튼 원 제거
   - 진행바/볼륨바 얇게
   - 진행바 시간 아래 배치
   - 썸네일 카드 테두리/회색바 제거
========================================================= */
#musicAppWin {
  width: 350px;
  height: 270px;
  min-width: 330px;
  min-height: 250px;
}
#musicAppWin .music-popup-body {
  padding: 14px 16px 12px !important;
  gap: 9px !important;
  background:
    linear-gradient(
      180deg,
      rgba(246, 246, 246, 0.86),
      rgba(219, 225, 230, 0.82)
    ) !important;
  overflow: hidden !important;
}
#musicAppWin .music-dynamic-bg {
  opacity: 0.34 !important;
  filter: blur(28px) saturate(1.05) brightness(1.08) !important;
}
#musicAppWin .music-dynamic-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.45),
      rgba(238, 238, 238, 0.26)
    ) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}
#musicAppWin .music-mini-card {
  padding: 0 !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#musicAppWin .music-album-art {
  width: 74px !important;
  height: 74px !important;
  flex: 0 0 74px !important;
  border-radius: 4px !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.18) !important;
}
#musicAppWin .music-song-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: rgba(20, 20, 24, 0.92) !important;
  text-shadow: none !important;
}
#musicAppWin .music-song-artist {
  margin-top: 2px !important;
  font-size: 11px !important;
  color: rgba(35, 35, 40, 0.62) !important;
}
#musicAppWin .music-progress-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 12px 14px !important;
  column-gap: 0 !important;
  row-gap: 2px !important;
  width: 100% !important;
  margin-top: 1px !important;
  font-size: 10px !important;
  color: rgba(35, 35, 40, 0.55) !important;
}
#musicAppWin #musicProgress {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 12px !important;
}
#musicAppWin #musicTimeCur {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: start !important;
}
#musicAppWin #musicTimeDur {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
}
#musicAppWin .music-controls-row {
  min-height: 34px !important;
  gap: 26px !important;
  margin-top: 1px !important;
}
#musicAppWin .music-control-btn {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(20, 20, 24, 0.82) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
#musicAppWin .music-main-btn {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(20, 20, 24, 0.86) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
}
#musicAppWin .music-main-btn:hover,
#musicAppWin .music-control-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: #000000 !important;
}
#musicAppWin .music-volume-row {
  display: grid !important;
  grid-template-columns: 18px 1fr 18px !important;
  gap: 7px !important;
  margin-top: -1px !important;
}
#musicAppWin .music-volume-ic {
  font-size: 10px !important;
  color: rgba(35, 35, 40, 0.38) !important;
}
#musicAppWin input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  accent-color: auto !important;
}
#musicAppWin input[type="range"]::-webkit-slider-runnable-track {
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(30, 30, 35, 0.42) !important;
}
#musicAppWin input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 13px !important;
  height: 13px !important;
  margin-top: -5px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
}
#musicAppWin input[type="range"]::-moz-range-track {
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(30, 30, 35, 0.42) !important;
}
#musicAppWin input[type="range"]::-moz-range-thumb {
  width: 13px !important;
  height: 13px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
}
#musicAppWin .music-app-playlist {
  margin-top: 3px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}
#musicAppWin .music-app-track {
  min-height: 26px !important;
  padding: 4px 7px !important;
  background: transparent !important;
  box-shadow: none !important;
}
#musicAppWin .music-app-track.on {
  background: rgba(255, 255, 255, 0.26) !important;
  box-shadow: none !important;
}
/* =========================================================
   뮤직 앱 미세 조정
   - 아래 회색 바 제거
   - 재생바 원 작게
   - 재생바/볼륨바/음량 아이콘 곱하기 느낌
   - 이전/다음 버튼 진한 회색 통일
========================================================= */
#musicAppWin .music-app-playlist {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 3px 0 0 0 !important;
  margin-top: 2px !important;
  scrollbar-width: none !important;
}
#musicAppWin .music-app-playlist::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#musicAppWin .music-app-track {
  background: transparent !important;
  box-shadow: none !important;
}
#musicAppWin .music-app-track.on {
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}
#musicAppWin input[type="range"] {
  mix-blend-mode: multiply !important;
}
#musicAppWin input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(35, 35, 40, 0.36) !important;
  mix-blend-mode: multiply !important;
}
#musicAppWin input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  margin-top: -6px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(35, 35, 40, 0.55) !important;
  box-shadow: none !important;
  mix-blend-mode: multiply !important;
}
#musicAppWin input[type="range"]::-moz-range-track {
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(35, 35, 40, 0.36) !important;
}
#musicAppWin input[type="range"]::-moz-range-thumb {
  width: 15px !important;
  height: 15px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(35, 35, 40, 0.55) !important;
  box-shadow: none !important;
}
#musicAppWin #musicProgress::-webkit-slider-thumb {
  width: 10px !important;
  height: 10px !important;
  margin-top: -3px !important;
}
#musicAppWin #musicProgress::-moz-range-thumb {
  width: 8px !important;
  height: 8px !important;
}
#musicAppWin .music-volume-ic {
  color: rgba(35, 35, 40, 0.42) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.75 !important;
}
#musicAppWin .music-progress-row {
  color: rgba(35, 35, 40, 0.54) !important;
  mix-blend-mode: multiply !important;
}
#musicAppWin .music-control-btn,
#musicAppWin .music-control-btn:not(.music-main-btn),
#musicAppWin .music-main-btn {
  color: rgba(22, 22, 26, 0.78) !important;
  mix-blend-mode: multiply !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
#musicAppWin .music-control-btn:hover,
#musicAppWin .music-control-btn:not(.music-main-btn):hover,
#musicAppWin .music-main-btn:hover {
  color: rgba(10, 10, 14, 0.9) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#musicAppWin .music-main-btn {
  font-size: 23px !important;
  font-weight: 900 !important;
}
#musicAppWin #musicPrevBtn,
#musicAppWin #musicNextBtn {
  opacity: 1 !important;
  font-weight: 900 !important;
}
/* =========================================================
   뮤직 앱 바/아이콘 최종 보정
   - 아래 회색 바 제거
   - 재생바/음량바 조절된 부분 더 진하게
   - 원은 불투명도 100%
   - 음량 아이콘 CSS 아이콘화
========================================================= */
#musicAppWin .music-popup-body {
  height: calc(100% - 38px) !important;
  margin: 0 !important;
  padding-bottom: 12px !important;
  background-clip: padding-box !important;
}
#musicAppWin .music-app-playlist {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  scrollbar-width: none !important;
}
#musicAppWin .music-app-playlist::-webkit-scrollbar {
  display: none !important;
}
#musicAppWin .resize-handle {
  background: transparent !important;
}
#musicAppWin input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 12px !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  mix-blend-mode: multiply !important;
  --range-pct: 0%;
}
#musicAppWin input[type="range"]::-webkit-slider-runnable-track {
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      rgba(18, 18, 22, 0.72) 0%,
      rgba(18, 18, 22, 0.72) var(--range-pct),
      rgba(38, 38, 44, 0.28) var(--range-pct),
      rgba(38, 38, 44, 0.28) 100%
    ) !important;
}
#musicAppWin input[type="range"]::-moz-range-track {
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      rgba(18, 18, 22, 0.72) 0%,
      rgba(18, 18, 22, 0.72) var(--range-pct),
      rgba(38, 38, 44, 0.28) var(--range-pct),
      rgba(38, 38, 44, 0.28) 100%
    ) !important;
}
#musicAppWin input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 10px !important;
  height: 10px !important;
  margin-top: -3.5px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgb(36, 36, 42) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
#musicAppWin input[type="range"]::-moz-range-thumb {
  width: 10px !important;
  height: 10px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgb(36, 36, 42) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
#musicAppWin #musicProgress::-webkit-slider-thumb {
  width: 9px !important;
  height: 9px !important;
  margin-top: -3px !important;
}
#musicAppWin #musicProgress::-moz-range-thumb {
  width: 9px !important;
  height: 9px !important;
}
#musicAppWin .music-volume-ic {
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  background: rgba(22, 22, 26, 0.58) !important;
  opacity: 1 !important;
  mix-blend-mode: multiply !important;
  flex: 0 0 14px !important;
}
#musicAppWin .music-volume-low {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
#musicAppWin .music-volume-high {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath fill='black' d='M16.5 8.5a5 5 0 0 1 0 7l1.7 1.7a7.4 7.4 0 0 0 0-10.4l-1.7 1.7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath fill='black' d='M16.5 8.5a5 5 0 0 1 0 7l1.7 1.7a7.4 7.4 0 0 0 0-10.4l-1.7 1.7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
#musicAppWin .music-control-btn,
#musicAppWin .music-control-btn:not(.music-main-btn),
#musicAppWin .music-main-btn {
  color: rgba(20, 20, 24, 0.86) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 1 !important;
  mix-blend-mode: multiply !important;
}
#musicAppWin .music-control-btn:hover,
#musicAppWin .music-main-btn:hover {
  color: rgba(5, 5, 8, 0.96) !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* =========================================================
   뮤직 앱: 볼륨바 원 크게 + 볼륨바 색 갱신 보정
========================================================= */
#musicAppWin #musicVolume::-webkit-slider-thumb {
  width: 20px !important;
  height: 20px !important;
  margin-top: -8.5px !important;
  background: rgb(36, 36, 42) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
#musicAppWin #musicVolume::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  background: rgb(36, 36, 42) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
#musicAppWin .music-volume-row {
  min-height: 24px !important;
  align-items: center !important;
}
#musicAppWin #musicVolume::-webkit-slider-runnable-track {
  height: 3px !important;
}
#musicAppWin #musicVolume::-moz-range-track {
  height: 3px !important;
}
/* =========================================================
   뮤직 앱 레이아웃 보정
   - 이전/다음 버튼 더 붙어 보이게
   - 컨트롤 좌우로 더 퍼지게
   - 음량 아이콘 크게
   - 썸네일/텍스트 크게
   - 재생바 살짝 아래로
========================================================= */
#musicAppWin .music-mini-card {
  gap: 14px !important;
  align-items: center !important;
}
#musicAppWin .music-album-art {
  width: 84px !important;
  height: 84px !important;
  flex: 0 0 84px !important;
}
#musicAppWin .music-song-title {
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}
#musicAppWin .music-song-artist {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-top: 4px !important;
}
#musicAppWin .music-progress-row {
  margin-top: 8px !important;
}
#musicAppWin .music-controls-row {
  width: 72% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 36px !important;
  margin-top: 3px !important;
}
#musicAppWin .music-control-btn {
  color: rgba(20, 20, 24, 0.88) !important;
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
#musicAppWin #musicPrevBtn,
#musicAppWin #musicNextBtn {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -5px !important;
  transform: scaleX(0.92) !important;
  width: 36px !important;
  text-align: center !important;
}
#musicAppWin #musicPlayBtn {
  font-size: 25px !important;
  font-weight: 900 !important;
  width: 40px !important;
  text-align: center !important;
}
#musicAppWin .music-volume-row {
  grid-template-columns: 22px 1fr 22px !important;
  gap: 9px !important;
  margin-top: 2px !important;
}
#musicAppWin .music-volume-ic {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  background: rgba(20, 20, 24, 0.62) !important;
  opacity: 1 !important;
  mix-blend-mode: multiply !important;
}
/* =========================================================
   뮤직 앱 하단 정리 v2
   - 플레이리스트는 유지
   - 아래 회색/투명 빈칸 제거
   - 크기조절 핸들 오른쪽 아래 고정
========================================================= */
#musicAppWin {
  width: 350px;
  height: 285px;
  min-width: 330px;
  min-height: 245px;
  overflow: hidden !important;
}
#musicAppWin .music-popup-body {
  height: calc(100% - 38px) !important;
  padding: 14px 16px 12px !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 46px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 0 14px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  scrollbar-width: none !important;
}
#musicAppWin .music-app-playlist::-webkit-scrollbar,
#musicAppWin #musicAppPlaylist::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#musicAppWin .music-app-track {
  min-height: 24px !important;
  padding: 3px 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#musicAppWin .music-volume-row {
  margin-bottom: 0 !important;
}
#musicAppWin .resize-handle,
#musicAppResize {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 3px !important;
  background: transparent !important;
  color: rgba(40, 40, 46, 0.25) !important;
  cursor: nwse-resize !important;
  z-index: 10 !important;
}
#musicAppWin .resize-handle svg,
#musicAppResize svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}
/* =========================================================
   뮤직 앱 진짜 블러 유리판 FINAL
   - ::before 가짜 유리판에 backdrop-filter 적용
   - 기존 내용은 위로 올림
   - 창 뒤 배경이 확실히 흐려짐
========================================================= */
#musicAppWin {
  position: fixed !important;
  z-index: 15;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  isolation: auto !important;
  box-shadow:
    0 18px 42px rgba(60, 60, 70, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}
#musicAppWin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(245, 247, 249, 0.32) !important;
  -webkit-backdrop-filter:
    blur(20px)
    saturate(0.9)
    brightness(1.05) !important;
  backdrop-filter:
    blur(20px)
    saturate(0.9)
    brightness(1.05) !important;
}
#musicAppWin > * {
  position: relative !important;
  z-index: 1 !important;
}
#musicAppWin .titlebar {
  background: rgba(246, 247, 249, 0.34) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#musicAppWin .music-popup-body {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18),
      rgba(235, 240, 244, 0.10)
    ) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#musicAppWin .music-dynamic-bg {
  opacity: 0 !important;
}
#musicAppWin .music-dynamic-overlay {
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#musicAppWin .music-mini-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#musicAppWin .resize-handle,
#musicAppResize {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  z-index: 5 !important;
}
/* =========================================================
   뮤직 앱 최종 UI 정리
   - 앱 크기 작게 고정
   - 크기조절 핸들 제거
   - 컨트롤 버튼 모서리 라운드
   - 아티스트 글씨 조금 키우기
========================================================= */
#musicAppWin {
  width: 300px !important;
  height: 250px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  resize: none !important;
}
#musicAppWin .music-popup-body {
  height: calc(100% - 42px) !important;
  padding: 12px 15px 10px !important;
  gap: 7px !important;
  overflow: hidden !important;
}
#musicAppWin .resize-handle,
#musicAppResize {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#musicAppMax {
  display: none !important;
}
#musicAppWin .traffic {
  gap: 8px !important;
}
#musicAppWin .music-mini-card {
  gap: 12px !important;
}
#musicAppWin .music-album-art {
  width: 78px !important;
  height: 78px !important;
  flex: 0 0 78px !important;
}
#musicAppWin .music-song-title {
  font-size: 14px !important;
  line-height: 1.2 !important;
}
#musicAppWin .music-song-artist {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  margin-top: 4px !important;
}
#musicAppWin .music-progress-row {
  margin-top: 4px !important;
}
#musicAppWin .music-controls-row {
  width: 76% !important;
  min-height: 32px !important;
  margin-top: 1px !important;
}
#musicAppWin .music-control-btn,
#musicAppWin .music-main-btn {
  min-width: 34px !important;
  height: 28px !important;
  padding: 0 7px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(20, 20, 24, 0.86) !important;
}
#musicAppWin .music-control-btn:hover,
#musicAppWin .music-main-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 9px !important;
  color: rgba(5, 5, 8, 0.96) !important;
}
#musicAppWin #musicPlayBtn {
  font-size: 24px !important;
  font-weight: 900 !important;
}
#musicAppWin #musicPrevBtn,
#musicAppWin #musicNextBtn {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -5px !important;
}
#musicAppWin .music-volume-row {
  margin-top: 0 !important;
}
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  flex: 1 1 auto !important;
  min-height: 28px !important;
  max-height: none !important;
  padding-bottom: 0 !important;
}
/* =========================================================
   뮤직 앱 UI 미세조정
   - 초록 버튼 회색 + 클릭 불가
   - 플레이리스트 딱 2줄만 보이게
   - 재생/건너뛰기 버튼 라운드 보이게
   - 컨트롤 전체 살짝 위로
========================================================= */
#musicAppMax,
#musicAppWin .traffic .g {
  display: block !important;
  background: #c8cec9 !important;
  opacity: 0.75 !important;
  pointer-events: none !important;
  cursor: default !important;
  filter: grayscale(1) !important;
}
#musicAppWin {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  resize: none !important;
}
#musicAppWin .music-popup-body {
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  gap: 5px !important;
}
#musicAppWin .music-mini-card {
  margin-bottom: 0 !important;
}
#musicAppWin .music-progress-row {
  margin-top: 0 !important;
  transform: translateY(-3px) !important;
}
#musicAppWin .music-controls-row {
  margin-top: -3px !important;
  min-height: 30px !important;
  transform: translateY(-3px) !important;
}
#musicAppWin .music-control-btn,
#musicAppWin .music-main-btn,
#musicAppWin #musicPrevBtn,
#musicAppWin #musicPlayBtn,
#musicAppWin #musicNextBtn {
  min-width: 34px !important;
  height: 28px !important;
  padding: 0 7px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(20, 20, 24, 0.86) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#musicAppWin .music-control-btn:hover,
#musicAppWin .music-main-btn:hover,
#musicAppWin #musicPrevBtn:hover,
#musicAppWin #musicPlayBtn:hover,
#musicAppWin #musicNextBtn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-radius: 10px !important;
  color: rgba(5, 5, 8, 0.96) !important;
}
#musicAppWin #musicPrevBtn,
#musicAppWin #musicNextBtn {
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -5px !important;
}
#musicAppWin #musicPlayBtn {
  font-size: 23px !important;
  font-weight: 900 !important;
}
#musicAppWin .music-volume-row {
  margin-top: -6px !important;
  transform: translateY(-3px) !important;
}
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  flex: 0 0 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin-top: -3px !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}
#musicAppWin .music-app-track {
  min-height: 26px !important;
  height: 26px !important;
  padding: 2px 6px !important;
  margin: 0 !important;
}
#musicAppWin .music-app-track-title {
  font-size: 11.5px !important;
  line-height: 1.1 !important;
}
#musicAppWin .music-app-track-artist {
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
}
/* =========================================================
   뮤직 앱 타이틀바 제거 + 플레이리스트 스크롤 복구 + 재생바 위치
========================================================= */
#musicAppWin .titlebar,
#musicAppWin #musicAppBar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
#musicAppWin .music-popup-body {
  height: 100% !important;
  padding-top: 12px !important;
  padding-bottom: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#musicAppWin .music-progress-row {
  margin-top: 3px !important;
  transform: translateY(1px) !important;
}
#musicAppWin .music-controls-row {
  margin-top: -2px !important;
  transform: translateY(-2px) !important;
}
#musicAppWin .music-volume-row {
  margin-top: -5px !important;
  transform: translateY(-2px) !important;
}
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin-top: -2px !important;
  padding: 0 !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
#musicAppWin .music-app-track {
  flex: 0 0 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   뮤직 앱: 투명 드래그 영역 + 플레이리스트 1줄
========================================================= */
#musicAppWin .titlebar,
#musicAppWin #musicAppBar {
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: grab !important;
  z-index: 40 !important;
  overflow: hidden !important;
}
#musicAppWin #musicAppBar:active {
  cursor: grabbing !important;
}
#musicAppWin #musicAppBar .traffic,
#musicAppWin #musicAppBar .tb-title,
#musicAppWin #musicAppBar .tb-spacer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#musicAppWin .music-popup-body {
  height: 100% !important;
  padding-top: 14px !important;
}
#musicAppWin .music-mini-card,
#musicAppWin .music-progress-row,
#musicAppWin .music-controls-row,
#musicAppWin .music-volume-row,
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist,
#musicAppWin input,
#musicAppWin button {
  position: relative !important;
  z-index: 45 !important;
}
#musicAppWin .music-mini-card {
  margin-top: 6px !important;
}
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  flex: 0 0 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin-top: -2px !important;
  padding: 0 !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
#musicAppWin .music-app-track {
  flex: 0 0 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   뮤직 앱 상단 여백 추가
   - 파란 표시한 만큼 위쪽 공간 확보
   - 투명 드래그 영역 유지
========================================================= */
#musicAppWin .music-popup-body {
  padding-top: 24px !important;
}
#musicAppWin .music-mini-card {
  margin-top: 0 !important;
}
/* =========================================================
   뮤직 앱: 짧은 가수명일 때 복제 텍스트 안 보이게
========================================================= */
#musicAppWin #musicSongArtist:not(.is-marquee)
.music-marquee-item[aria-hidden="true"] {
  display: none !important;
}
#musicAppWin #musicSongArtist:not(.is-marquee)
.music-marquee-track {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  animation: none !important;
  transform: none !important;
}
#musicAppWin #musicSongArtist.is-marquee
.music-marquee-item[aria-hidden="true"] {
  display: inline-block !important;
}
/* =========================================================
   뮤직 앱: 플레이리스트 한 블럭 정확히 보이게
========================================================= */
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  flex: 0 0 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
}
#musicAppWin .music-app-track {
  flex: 0 0 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 5px 6px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#musicAppWin .music-app-track-title {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}
#musicAppWin .music-app-track-artist {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}
/* =========================================================
   뮤직 앱: 플레이리스트 스크롤 밀림 방지 최종
========================================================= */
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin-top: -2px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  flex: 0 0 42px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#musicAppWin .music-app-track {
  flex: 0 0 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 5px 6px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#musicAppWin .music-app-track-main {
  min-width: 0 !important;
  overflow: hidden !important;
}
#musicAppWin .music-app-track-title,
#musicAppWin .music-app-track-artist {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
/* =========================================================
   뮤직 앱: 현재곡 음표 / 플리 시간 표시 정리
========================================================= */
#musicAppWin .music-app-track-ic {
  width: 14px !important;
  flex: 0 0 14px !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: #ff4f91 !important;
  opacity: 0 !important;
}
#musicAppWin .music-app-track.on .music-app-track-ic {
  opacity: 1 !important;
}
#musicAppWin .music-app-track-time {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  text-align: right !important;
  font-size: 10px !important;
  color: rgba(35, 35, 40, 0.38) !important;
  mix-blend-mode: multiply !important;
}
/* =========================================================
   뮤직 앱: 현재 곡 커버 이미지 블러 배경
   - cover 이미지를 앱 배경에 크게 깔기
   - 흐림 + 색감 + 흰 유리막
========================================================= */
#musicAppWin .music-popup-body {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(236, 242, 246, 0.16)
    ) !important;
}
#musicAppWin .music-dynamic-bg {
  display: block !important;
  position: absolute !important;
  inset: -42px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: 0.38 !important;
  filter:
    blur(34px)
    saturate(1.6)
    brightness(0.92) !important;
  transform: scale(1.16) !important;
  transition:
    background-image 0.25s ease,
    opacity 0.25s ease,
    filter 0.25s ease !important;
}
#musicAppWin .music-dynamic-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.20)
    ) !important;
  -webkit-backdrop-filter: blur(8px) saturate(0.9) !important;
  backdrop-filter: blur(8px) saturate(0.9) !important;
}
#musicAppWin .music-popup-body > *:not(.music-dynamic-bg):not(.music-dynamic-overlay) {
  position: relative !important;
  z-index: 2 !important;
}
#musicAppWin .music-mini-card,
#musicAppWin .music-app-playlist,
#musicAppWin #musicAppPlaylist {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#musicAppWin .music-app-track.on {
  background: rgba(255, 255, 255, 0.16) !important;
}
/* =========================================================
   뮤직 앱: 어두운 회색 테두리 + 곱하기 느낌
========================================================= */
#musicAppWin {
  border: 0 !important;
}
#musicAppWin::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 50 !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(38, 38, 44, 0.1),
    inset 0 1px 0 rgba(38, 38, 44, 0.1) !important;
  mix-blend-mode: multiply !important;
}
/* =========================================================
   뮤직 앱: 컨트롤 버튼 흰색 배경 제거
========================================================= */
#musicAppWin .music-controls-row {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#musicAppWin .music-control-btn,
#musicAppWin .music-main-btn,
#musicAppWin #musicPrevBtn,
#musicAppWin #musicPlayBtn,
#musicAppWin #musicNextBtn {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#musicAppWin .music-control-btn:hover,
#musicAppWin .music-main-btn:hover,
#musicAppWin #musicPrevBtn:hover,
#musicAppWin #musicPlayBtn:hover,
#musicAppWin #musicNextBtn:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
#musicAppWin .music-dynamic-bg {
  background-color: rgba(200, 200, 205, 0.18) !important;
  transition:
    opacity 0.22s ease,
    filter 0.22s ease,
    transform 0.22s ease !important;
}
/* =========================================================
   뮤직 앱: 반투명해진 배경 다시 불투명하게 보정
   - 커버 블러 배경은 유지
   - 뒤 창이 과하게 비치는 것 방지
========================================================= */
#musicAppWin::before {
  background: rgba(238, 238, 242, 0.78) !important;
  -webkit-backdrop-filter:
    blur(34px)
    saturate(0.92)
    brightness(1.04) !important;
  backdrop-filter:
    blur(34px)
    saturate(0.92)
    brightness(1.04) !important;
}
#musicAppWin .music-popup-body {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.48),
      rgba(235, 238, 242, 0.36)
    ) !important;
}
#musicAppWin .music-dynamic-bg {
  opacity: 0.42 !important;
  filter:
    blur(36px)
    saturate(1.25)
    brightness(0.96) !important;
}
#musicAppWin .music-dynamic-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.20)
    ) !important;
}
/* =========================================================
   드래그 중 커서 튐 방지
   - 커스텀 커서 사용 시 기본 grab/grabbing 커서가 튀어나오는 것 방지
========================================================= */
#musicAppWin #musicAppBar,
#musicAppWin .titlebar {
  cursor: inherit !important;
}
html.is-window-dragging,
html.is-window-dragging *,
html.is-window-dragging *:hover {
  cursor: none !important;
}
.window-dragging {
  pointer-events: auto !important;
}
/* =========================================================
   뮤직 앱: EQ 최종 정리본
   - 정지 중: 일자 ㅡ
   - 재생 중: 잔잔하게 움직임
   - 정지/재생 색상 통일
========================================================= */
#musicAppWin #musicVisualizer {
  position: absolute !important;
  top: 20px !important;
  right: 22px !important;
  width: 22px !important;
  height: 12px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
  z-index: 80 !important;
  pointer-events: none !important;
  opacity: 0.72 !important;
  mix-blend-mode: multiply !important;
}
#musicAppWin #musicVisualizer span,
#musicAppWin #musicVisualizer:not(.is-playing) span,
#musicAppWin #musicVisualizer.is-playing span {
  position: relative !important;
  width: 2px !important;
  height: 12px !important;
  display: block !important;
  background: transparent !important;
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  overflow: visible !important;
}
#musicAppWin #musicVisualizer span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  height: 2px;
  border-radius: 999px !important;
  background: rgba(24, 24, 30, 0.72) !important;
  opacity: 0.9 !important;
  transition:
    height 0.32s ease,
    opacity 0.32s ease !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span::before {
  height: 2px !important;
  animation: none !important;
}
#musicAppWin #musicVisualizer.is-pausing span::before {
  height: 2px !important;
  animation: none !important;
}
#musicAppWin #musicVisualizer.is-playing span::before {
  animation-name: musicEqSoftMove !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(1)::before {
  animation-duration: 0.82s !important;
  animation-delay: -0.12s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(2)::before {
  animation-duration: 0.68s !important;
  animation-delay: -0.26s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(3)::before {
  animation-duration: 0.92s !important;
  animation-delay: -0.18s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(4)::before {
  animation-duration: 0.74s !important;
  animation-delay: -0.34s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(5)::before {
  animation-duration: 0.96s !important;
  animation-delay: -0.22s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(6)::before {
  animation-duration: 0.72s !important;
  animation-delay: -0.30s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(7)::before {
  animation-duration: 0.86s !important;
  animation-delay: -0.08s !important;
}
@keyframes musicEqSoftMove {
  0% {
    height: 2px;
  }
  25% {
    height: 5px;
  }
  50% {
    height: 3px;
  }
  75% {
    height: 6px;
  }
  100% {
    height: 4px;
  }
}
/* =========================================================
   뮤직 앱: 작은 EQ 비주얼라이저 최종 보정
   - 더 작게
   - 정지 중에도 보임
   - 재생 중에는 확실히 움직임
========================================================= */
#musicAppWin #musicVisualizer {
  position: absolute !important;
  top: 20px !important;
  right: 22px !important;
  width: 24px !important;
  height: 14px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
  z-index: 80 !important;
  pointer-events: none !important;
  opacity: 0.62 !important;
  mix-blend-mode: multiply !important;
}
#musicAppWin #musicVisualizer span {
  display: block !important;
  width: 2px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: rgba(24, 24, 30, 0.50) !important;
  transform-origin: bottom center !important;
  transform: scaleY(0.32) !important;
  opacity: 0.45 !important;
  animation: none !important;
}
#musicAppWin #musicVisualizer span:nth-child(1) {
  transform: scaleY(0.28) !important;
}
#musicAppWin #musicVisualizer span:nth-child(2) {
  transform: scaleY(0.48) !important;
}
#musicAppWin #musicVisualizer span:nth-child(3) {
  transform: scaleY(0.34) !important;
}
#musicAppWin #musicVisualizer span:nth-child(4) {
  transform: scaleY(0.62) !important;
}
#musicAppWin #musicVisualizer span:nth-child(5) {
  transform: scaleY(0.40) !important;
}
#musicAppWin #musicVisualizer span:nth-child(6) {
  transform: scaleY(0.52) !important;
}
#musicAppWin #musicVisualizer span:nth-child(7) {
  transform: scaleY(0.30) !important;
}
#musicAppWin #musicVisualizer.is-playing span {
  animation-name: musicEqTinyBounce !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  opacity: 0.82 !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(1) {
  animation-duration: 0.46s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(2) {
  animation-duration: 0.32s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(3) {
  animation-duration: 0.54s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(4) {
  animation-duration: 0.38s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(5) {
  animation-duration: 0.49s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(6) {
  animation-duration: 0.29s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(7) {
  animation-duration: 0.43s !important;
}
@keyframes musicEqTinyBounce {
  0% {
    transform: scaleY(0.24);
  }
  45% {
    transform: scaleY(0.72);
  }
  100% {
    transform: scaleY(1.05);
  }
}
/* =========================================================
   뮤직 앱: EQ 비주얼라이저 최종 수정
   - 더 작게
   - 정지 중에도 보임
   - transform 충돌 피하고 clip-path로 움직임
========================================================= */
#musicAppWin #musicVisualizer {
  top: 20px !important;
  right: 22px !important;
  width: 20px !important;
  height: 12px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
  opacity: 0.58 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
}
#musicAppWin #musicVisualizer span {
  width: 2px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: rgba(24, 24, 30, 0.50) !important;
  transform: none !important;
  transform-origin: bottom center !important;
  display: block !important;
  opacity: 0.52 !important;
  animation: none !important;
}
#musicAppWin #musicVisualizer span:nth-child(1) {
  clip-path: inset(72% 0 0 0);
}
#musicAppWin #musicVisualizer span:nth-child(2) {
  clip-path: inset(48% 0 0 0);
}
#musicAppWin #musicVisualizer span:nth-child(3) {
  clip-path: inset(63% 0 0 0);
}
#musicAppWin #musicVisualizer span:nth-child(4) {
  clip-path: inset(35% 0 0 0);
}
#musicAppWin #musicVisualizer span:nth-child(5) {
  clip-path: inset(58% 0 0 0);
}
#musicAppWin #musicVisualizer span:nth-child(6) {
  clip-path: inset(44% 0 0 0);
}
#musicAppWin #musicVisualizer span:nth-child(7) {
  clip-path: inset(70% 0 0 0);
}
#musicAppWin #musicVisualizer.is-playing span {
  animation-name: musicEqClipBounce !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  opacity: 0.82 !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(1) {
  animation-duration: 0.44s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(2) {
  animation-duration: 0.31s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(3) {
  animation-duration: 0.52s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(4) {
  animation-duration: 0.36s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(5) {
  animation-duration: 0.48s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(7) {
  animation-duration: 0.41s !important;
}
@keyframes musicEqClipBounce {
  0% {
    clip-path: inset(78% 0 0 0);
  }
  45% {
    clip-path: inset(38% 0 0 0);
  }
  100% {
    clip-path: inset(8% 0 0 0);
  }
}
/* =========================================================
   뮤직 앱: 가짜 EQ 안정판
   - 재생 중 아닐 때는 멈춰 있음
   - 정지/재생 둘 다 진한 색으로 통일
========================================================= */
#musicAppWin #musicVisualizer {
  opacity: 0.78 !important;
  mix-blend-mode: multiply !important;
}
#musicAppWin #musicVisualizer span {
  width: 2px !important;
  height: 11px !important;
  background: rgba(24, 24, 30, 0.62) !important;
  opacity: 0.86 !important;
  animation: none !important;
  transform: none !important;
  clip-path: inset(50% 0 0 0) !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span:nth-child(1) {
  clip-path: inset(72% 0 0 0) !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span:nth-child(2) {
  clip-path: inset(46% 0 0 0) !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span:nth-child(3) {
  clip-path: inset(62% 0 0 0) !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span:nth-child(4) {
  clip-path: inset(34% 0 0 0) !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span:nth-child(5) {
  clip-path: inset(57% 0 0 0) !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span:nth-child(6) {
  clip-path: inset(42% 0 0 0) !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span:nth-child(7) {
  clip-path: inset(70% 0 0 0) !important;
}
#musicAppWin #musicVisualizer.is-playing span {
  background: rgba(24, 24, 30, 0.62) !important;
  opacity: 0.86 !important;
  animation-name: musicEqFakeStable !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}
@keyframes musicEqFakeStable {
  0% {
    clip-path: inset(78% 0 0 0);
  }
  45% {
    clip-path: inset(38% 0 0 0);
  }
  100% {
    clip-path: inset(8% 0 0 0);
  }
}
/* =========================================================
   뮤직 앱: EQ 진짜 최종 덮어쓰기
   - 정지/재생 색상 통일
   - 정지 중에는 완전 멈춤
   - 예전 opacity 0.34 코드 덮어쓰기
========================================================= */
#musicAppWin #musicVisualizer span,
#musicAppWin #musicVisualizer:not(.is-playing) span,
#musicAppWin #musicVisualizer.is-playing span {
  background: rgba(24, 24, 30, 0.68) !important;
  opacity: 0.88 !important;
  width: 2px !important;
  height: 11px !important;
  transform: none !important;
  clip-path: inset(50% 0 0 0) !important;
}
#musicAppWin #musicVisualizer:not(.is-playing) span {
  animation: none !important;
  animation-name: none !important;
  animation-duration: 0s !important;
  animation-play-state: paused !important;
}
#musicAppWin #musicVisualizer.is-playing span {
  animation-name: musicEqFakeStableFinal !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  animation-play-state: running !important;
}
@keyframes musicEqFakeStableFinal {
  0% {
    clip-path: inset(78% 0 0 0);
  }
  45% {
    clip-path: inset(38% 0 0 0);
  }
  100% {
    clip-path: inset(8% 0 0 0);
  }
}
/* =========================================================
   뮤직 앱: EQ 최종 안정판
   - 정지 중: 완전 일자 ㅡ 상태
   - 재생 중: 들쭉날쭉 크게 움직임
   - 기존 clip-path 충돌 회피용 ::before 방식
========================================================= */
#musicAppWin #musicVisualizer {
  width: 22px !important;
  height: 12px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
  opacity: 0.82 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
}
#musicAppWin #musicVisualizer span,
#musicAppWin #musicVisualizer:not(.is-playing) span,
#musicAppWin #musicVisualizer.is-playing span,
#musicAppWin #musicVisualizer:not(.is-playing) span:nth-child(n),
#musicAppWin #musicVisualizer.is-playing span:nth-child(n) {
  position: relative !important;
  width: 2px !important;
  height: 12px !important;
  display: block !important;
  background: transparent !important;
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  animation-name: none !important;
  overflow: visible !important;
}
#musicAppWin #musicVisualizer span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  height: 2px;
  border-radius: 999px !important;
  background: rgba(24, 24, 30, 0.72) !important;
  opacity: 0.9 !important;
}
#musicAppWin #musicVisualizer.is-playing span::before {
  animation-name: musicEqRealFakeMove !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(1)::before {
  animation-duration: 0.38s !important;
  animation-delay: -0.12s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(2)::before {
  animation-duration: 0.27s !important;
  animation-delay: -0.31s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(3)::before {
  animation-duration: 0.46s !important;
  animation-delay: -0.18s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(4)::before {
  animation-duration: 0.32s !important;
  animation-delay: -0.41s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(5)::before {
  animation-duration: 0.51s !important;
  animation-delay: -0.24s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(6)::before {
  animation-duration: 0.29s !important;
  animation-delay: -0.36s !important;
}
#musicAppWin #musicVisualizer.is-playing span:nth-child(7)::before {
  animation-duration: 0.43s !important;
  animation-delay: -0.08s !important;
}
@keyframes musicEqRealFakeMove {
  0% {
    height: 2px;
  }
  25% {
    height: 9px;
  }
  50% {
    height: 4px;
  }
  75% {
    height: 12px;
  }
  100% {
    height: 5px;
  }
}
/* =========================================================
   뮤직 앱: EQ 잔잔한 버전
   - 정지 중: ㅡ
   - 재생 중: 아주 살짝만 움직임
========================================================= */
#musicAppWin #musicVisualizer {
  opacity: 0.72 !important;
}
@keyframes musicEqRealFakeMove {
  0% {
    height: 2px;
  }
  25% {
    height: 5px;
  }
  50% {
    height: 3px;
  }
  75% {
    height: 7px;
  }
  100% {
    height: 4px;
  }
}
/* =========================================================
   뮤직 앱: EQ 재생/정지 전환 부드럽게
========================================================= */
#musicAppWin #musicVisualizer span::before {
  transition:
    height 0.26s ease,
    opacity 0.26s ease,
    transform 0.26s ease !important;
}
#musicAppWin #musicVisualizer.is-pausing span::before {
  animation: none !important;
  height: 2px !important;
  opacity: 0.9 !important;
}
#musicAppWin #musicVisualizer.is-playing span::before {
  transition:
    height 0.18s ease,
    opacity 0.18s ease !important;
}
/* =========================================================
   뮤직 앱: 제목/가수명 둘 다 긴 텍스트 흐르게
========================================================= */
#musicAppWin #musicSongTitle,
#musicAppWin #musicSongArtist {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  position: relative !important;
}
#musicAppWin #musicSongTitle .music-marquee-track,
#musicAppWin #musicSongArtist .music-marquee-track {
  display: inline-flex !important;
  align-items: center !important;
  gap: 28px !important;
  white-space: nowrap !important;
  max-width: none !important;
  will-change: transform !important;
}
#musicAppWin #musicSongTitle .music-marquee-item,
#musicAppWin #musicSongArtist .music-marquee-item {
  display: inline-block !important;
  white-space: nowrap !important;
}
#musicAppWin #musicSongTitle.is-marquee .music-marquee-track,
#musicAppWin #musicSongArtist.is-marquee .music-marquee-track {
  animation: musicTextMarquee 10s linear infinite !important;
}
#musicAppWin #musicSongTitle:not(.is-marquee) .music-marquee-item[aria-hidden="true"],
#musicAppWin #musicSongArtist:not(.is-marquee) .music-marquee-item[aria-hidden="true"] {
  display: none !important;
}
#musicAppWin #musicSongTitle:not(.is-marquee) .music-marquee-track,
#musicAppWin #musicSongArtist:not(.is-marquee) .music-marquee-track {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  animation: none !important;
  transform: none !important;
}
#musicAppWin #musicSongTitle.is-marquee .music-marquee-item[aria-hidden="true"],
#musicAppWin #musicSongArtist.is-marquee .music-marquee-item[aria-hidden="true"] {
  display: inline-block !important;
}
#musicAppWin #musicSongTitle .music-marquee-item {
  font-weight: 800 !important;
}
@keyframes musicTextMarquee {
  0% {
    transform: translateX(0);
  }
  16% {
    transform: translateX(0);
  }
  84% {
    transform: translateX(calc(-50% - 14px));
  }
  100% {
    transform: translateX(calc(-50% - 14px));
  }
}
/* =========================================================
   절대 바이러스 아닙니다 밈 아이콘 / 팝업
========================================================= */
.virus-meme-icon {
  width: 96px !important;
}
.virus-shortcut-art {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 4px !important;
  background:
    linear-gradient(135deg, #0b4fc5, #9ed9ff) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.42),
    2px 2px 0 rgba(40,40,60,0.22) !important;
  overflow: visible !important;
}
.virus-shortcut-mark {
  color: rgba(255,255,255,0.96) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.22) !important;
}
.virus-shortcut-arrow {
  position: absolute !important;
  left: -3px !important;
  bottom: -3px !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: #444 !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
.virus-meme-label {
  max-width: 86px !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
  word-break: keep-all !important;
}
.virus-popup {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 30;
  pointer-events: none !important;
}
.virus-popup.show {
  display: flex !important;
  pointer-events: none !important;
}
.virus-popup-card {
  pointer-events: auto !important;
}
.virus-popup-card.virus-window-close {
  animation: virusWindowClosePop 160ms cubic-bezier(.22, 1, .36, 1) both !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}
@keyframes virusWindowClosePop {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.965);
  }
}
.virus-popup-card {
  width: 270px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(70, 70, 80, 0.24) !important;
  border-radius: 14px !important;
  box-shadow:
    0 18px 44px rgba(40, 35, 55, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.7) !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  animation: virusPopIn 0.18s cubic-bezier(.22, 1.2, .36, 1) both !important;
}
@keyframes virusPopIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.virus-popup-bar {
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  background: rgba(245, 245, 247, 0.84) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.virus-popup-bar .traffic {
  display: flex !important;
  gap: 8px !important;
}
.virus-popup-bar .traffic i {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
}
.virus-popup-title {
  flex: 1 !important;
  text-align: center !important;
  font-size: 12px !important;
  color: rgba(40,40,46,0.72) !important;
  font-weight: 600 !important;
}
.virus-popup-spacer {
  width: 49px !important;
}
.virus-popup-body {
  padding: 18px 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.virus-char-box {
  width: 82px !important;
  height: 82px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 180, 210, 0.92), rgba(205, 232, 255, 0.92)) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.62),
    0 8px 18px rgba(80,70,100,0.16) !important;
}
.virus-char-box.has-img span {
  display: none !important;
}
#virusCharFallback {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: rgba(35,35,42,0.62) !important;
}
.virus-dialogue {
  width: 100% !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 14px !important;
  margin-bottom: 13px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(255,255,255,0.58) !important;
  color: rgba(32,32,38,0.84) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  cursor: pointer !important;
  user-select: none !important;
}
.virus-next {
  background: rgba(255, 150, 182, 0.82) !important;
  color: #fff !important;
}
.virus-next:hover {
  background: rgba(255, 132, 170, 0.92) !important;
}
/* =========================================================
   절대 바이러스 아닙니다: 미연시 대화창 UI
========================================================= */
.virus-popup-card {
  width: 300px !important;
  border-radius: 10px !important;
  background: rgba(250, 253, 255, 0.94) !important;
  overflow: hidden !important;
}
.virus-popup-bar {
  height: 38px !important;
  background: rgba(246, 250, 252, 0.92) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.virus-popup-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(40, 40, 46, 0.72) !important;
}
.virus-vn-body {
  position: relative !important;
  min-height: 232px !important;
  padding: 18px 18px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background:
    linear-gradient(
      180deg,
      rgba(248, 252, 255, 0.9),
      rgba(245, 250, 252, 0.92)
    ) !important;
}
.virus-vn-body .virus-char-box {
  width: 124px !important;
  height: 124px !important;
  margin: 0 auto 2px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 210, 236, 0.95),
      rgba(235, 241, 246, 0.7) 68%,
      rgba(255, 255, 255, 0) 70%
    ) !important;
  box-shadow: none !important;
}
.virus-vn-body .virus-char-box.has-img {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
}
#virusCharFallback {
  font-size: 40px !important;
  font-weight: 900 !important;
  color: rgba(40, 35, 45, 0.55) !important;
}
.virus-dialogue-box {
  position: relative !important;
  width: 100% !important;
  min-height: 58px !important;
  margin-top: -4px !important;
  padding: 14px 38px 13px 18px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(198, 198, 202, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 10px rgba(80, 80, 90, 0.08) !important;
  cursor: default !important;
}
.virus-dialogue-box::before {
  content: "" !important;
  position: absolute !important;
  left: 26px !important;
  top: -22px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-bottom: 24px solid rgba(198, 198, 202, 0.92) !important;
}
.virus-dialogue {
  width: 100% !important;
  min-height: auto !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(28, 28, 34, 0.88) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  cursor: default !important;
  user-select: none !important;
}
.virus-next-arrow {
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 8px solid rgba(20, 20, 24, 0.92) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: pointer !important;
  animation: virusArrowBlink 0.9s ease-in-out infinite !important;
}
.virus-next-arrow.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}
@keyframes virusArrowBlink {
  0% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(2px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
}
/* =========================================================
   Mac Dock 1단계
   - 기존 작업표시줄은 숨김
   - 중앙 하단 Dock
   - 우하단 유틸 트레이
========================================================= */
.taskbar {
  display: none !important;
}
.desktop {
  bottom: 78px !important;
}
.mac-dock-wrap {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 12px !important;
  height: 68px !important;
  z-index: 80 !important;
  pointer-events: none !important;
}
.mac-dock {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  min-width: 188px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 10px 6px !important;
  border-radius: 21px !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  background: rgba(245, 250, 255, 0.48) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
  box-shadow:
    0 12px 34px rgba(35, 45, 70, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  pointer-events: auto !important;
}
.mac-dock-apps {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 9px !important;
}
.mac-dock-item {
  position: relative !important;
  width: 44px !important;
  height: 50px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transform-origin: center bottom !important;
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    opacity 0.15s ease !important;
}
.mac-dock-item:hover {
  transform: translateY(-6px) scale(1.14) !important;
  filter: brightness(1.04) !important;
}
.mac-dock-item.is-minimized {
  opacity: 0.72 !important;
}
.mac-dock-icon {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow:
    0 6px 14px rgba(40, 40, 70, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  overflow: hidden !important;
}
.mac-dock-icon.is-main {
  background: linear-gradient(135deg, #6fc3ff, #4aa5ec) !important;
}
.mac-dock-icon.is-trash {
  background: linear-gradient(135deg, #b7c3ce, #eef4f8) !important;
  color: rgba(60, 70, 80, 0.82) !important;
}
.mac-dock-icon.is-guestbook {
  background: linear-gradient(135deg, #ffd67a, #93e6ff) !important;
}
.mac-dock-icon.is-admin {
  background: linear-gradient(135deg, #9aa7ff, #ffc0da) !important;
}
.mac-dock-dot {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(46, 50, 58, 0.52) !important;
  opacity: 0 !important;
  transition: opacity 0.14s ease !important;
}
.mac-dock-item.is-running .mac-dock-dot {
  opacity: 1 !important;
}
.mac-dock-label {
  position: absolute !important;
  left: 50% !important;
  bottom: 58px !important;
  transform: translateX(-50%) translateY(4px) !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: rgba(30, 32, 38, 0.78) !important;
  color: #fff !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease !important;
}
.mac-dock-item:hover .mac-dock-label {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
.mac-utility-tray {
  position: absolute !important;
  right: 14px !important;
  bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  background: rgba(245, 250, 255, 0.44) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
  backdrop-filter: blur(20px) saturate(1.16) !important;
  box-shadow:
    0 10px 26px rgba(35, 45, 70, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  pointer-events: auto !important;
}
.mac-tray-btn {
  height: 26px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 4px !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(62, 62, 72, 0.72) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}
.mac-tray-btn:hover {
  background: rgba(255, 255, 255, 0.48) !important;
  color: rgba(40, 40, 48, 0.86) !important;
}
.mac-tray-clock {
  min-width: 43px !important;
  font-variant-numeric: tabular-nums !important;
}
@media (max-width: 760px) {
  .mac-utility-tray {
    right: 8px !important;
    transform: scale(0.92) !important;
    transform-origin: right bottom !important;
  }
  .mac-dock {
    max-width: calc(100vw - 28px) !important;
  }
  .mac-dock-apps {
    gap: 6px !important;
  }
  .mac-dock-item {
    width: 40px !important;
  }
  .mac-dock-icon {
    width: 38px !important;
    height: 38px !important;
  }
}
/* =========================================================
   Mac Dock 클릭 시 아이콘만 부드럽게 통 튀기
   - hover transform과 충돌 안 나게 .mac-dock-icon에 적용
========================================================= */
.mac-dock-item.is-clicking .mac-dock-icon {
  animation: macDockIconClickBounce 0.26s cubic-bezier(.22, 1.35, .36, 1) both !important;
}
@keyframes macDockIconClickBounce {
  0% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-5px) scale(1.16);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
/* =========================================
   뮤직 앱 최소화 상태 - 최대화 UI 축소판 느낌
========================================= */
#musicAppWin.collapsed {
  width: 300px !important;
  height: 56px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: rgba(244, 220, 231, 0.92) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  border: 1px solid rgba(66, 58, 66, 0.28) !important;
  box-shadow:
    0 8px 24px rgba(90, 74, 88, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
#musicAppWin.collapsed .titlebar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: 0 !important;
}
#musicAppWin.collapsed .tb-title,
#musicAppWin.collapsed .tb-spacer {
  display: none !important;
}
#musicAppWin.collapsed .traffic {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}
#musicAppWin.collapsed .music-mini-bar {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#musicAppWin.collapsed .music-mini-controls {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  min-width: 116px !important;
}
#musicAppWin.collapsed .music-mini-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #34323a !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.14s ease, opacity 0.14s ease !important;
}
#musicAppWin.collapsed .music-mini-btn:hover {
  opacity: 0.82 !important;
  transform: scale(1.06) !important;
}
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniNext {
  width: 22px !important;
  height: 22px !important;
  font-size: 15px !important;
}
#musicAppWin.collapsed #musicMiniPlay {
  width: 30px !important;
  height: 30px !important;
  font-size: 18px !important;
  border-radius: 999px !important;
  color: #2e2c33 !important;
  background: rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 0 1px rgba(64, 57, 64, 0.14) !important;
}
/* =========================================================
   MUSIC APP: 현재 상태 기준 최종 보정
   - 큰 창은 기존 UI 유지
   - 최소화는 얇은 미니바
   - 하단 Dock/유틸과 절대 안 섞이게 함
   - 앨범커버 색감은 titlebar::before로만 사용
========================================================= */
#musicAppWin:not(.collapsed) .music-mini-bar {
  display: none !important;
}
#musicAppWin:not(.collapsed) .music-popup-body {
  display: flex !important;
}
#musicAppWin:not(.collapsed) .music-mini-card,
#musicAppWin:not(.collapsed) .music-progress-row,
#musicAppWin:not(.collapsed) .music-controls-row,
#musicAppWin:not(.collapsed) .music-volume-row,
#musicAppWin:not(.collapsed) #musicAppPlaylist {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#musicAppWin:not(.collapsed) .music-controls-row {
  justify-content: center !important;
  align-items: center !important;
  gap: 34px !important;
}
#musicAppWin:not(.collapsed) #musicPlayBtn,
#musicAppWin:not(.collapsed) #musicPrevBtn,
#musicAppWin:not(.collapsed) #musicNextBtn {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#musicAppWin.collapsed {
  width: 300px !important;
  height: 38px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#musicAppWin.collapsed .music-popup-body,
#musicAppWin.collapsed #musicAppResize,
#musicAppWin.collapsed .resize-handle {
  display: none !important;
}
#musicAppWin.collapsed #musicAppBar,
#musicAppWin.collapsed .titlebar {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(60, 52, 60, 0.22) !important;
  background: rgba(244, 220, 231, 0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  box-shadow:
    0 8px 22px rgba(70, 58, 68, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
#musicAppWin.collapsed #musicAppBar::before,
#musicAppWin.collapsed .titlebar::before {
  content: "" !important;
  position: absolute !important;
  inset: -24px !important;
  background-image: var(--music-cover-url, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: blur(20px) saturate(1.25) brightness(0.98) !important;
  transform: scale(1.18) !important;
  opacity: 0.48 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#musicAppWin.collapsed #musicAppBar::after,
#musicAppWin.collapsed .titlebar::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.28) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#musicAppWin.collapsed .traffic {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}
#musicAppWin.collapsed .music-mini-bar {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4 !important;
}
#musicAppWin.collapsed .music-mini-controls {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
}
#musicAppWin.collapsed .music-mini-btn,
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniPlay,
#musicAppWin.collapsed #musicMiniNext {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(42, 38, 44, 0.92) !important;
  line-height: 1 !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
}
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniNext {
  width: 19px !important;
  height: 18px !important;
  font-size: 15px !important;
}
#musicAppWin.collapsed #musicMiniPlay {
  width: 20px !important;
  height: 20px !important;
  font-size: 18px !important;
}
#musicMiniEq {
  display: none !important;
}
/* =========================================================
   MUSIC MINI TITLE
   - 최소화 상태에서 왼쪽에 곡 제목 표시
   - 길면 옆으로 흐르게
========================================================= */
/* =========================================================
   MUSIC MINI TITLE - 오른쪽 버튼 고정 / 제목 넓게 / 무한 흐름
========================================================= */
#musicAppWin.collapsed .music-mini-title {
  position: absolute !important;
  left: 28px !important;
  right: 104px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 18px !important;
  line-height: 18px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: rgba(42, 38, 44, 0.82) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 10%,
    #000 92%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 10%,
    #000 92%,
    transparent 100%
  ) !important;
}
#musicAppWin.collapsed .music-mini-title span {
  display: inline-block !important;
  white-space: nowrap !important;
  max-width: none !important;
  will-change: transform !important;
  padding-right: 36px !important;
}
#musicAppWin.collapsed .music-mini-title:not(.is-marquee) span {
  animation: none !important;
  transform: none !important;
}
#musicAppWin.collapsed .music-mini-title.is-marquee span {
  animation: musicMiniTitleLoop var(--mini-title-speed, 9s) linear infinite !important;
}
#musicAppWin.collapsed .music-mini-controls {
  position: absolute !important;
  right: 18px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  z-index: 7 !important;
}
#musicAppWin.collapsed .music-mini-btn,
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniPlay,
#musicAppWin.collapsed #musicMiniNext {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(42, 38, 44, 0.9) !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniNext {
  width: 18px !important;
  height: 18px !important;
  font-size: 14px !important;
}
#musicAppWin.collapsed #musicMiniPlay {
  width: 18px !important;
  height: 18px !important;
  font-size: 16px !important;
}
@keyframes musicMiniTitleLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--mini-title-shift, 60px)));
  }
}
#musicAppWin.collapsed .music-mini-title {
  left: 14px !important;
  right: 104px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  font-weight: 400 !important;
}
#musicAppWin.collapsed .music-mini-title span {
  padding-left: 0 !important;
  padding-right: 42px !important;
}
/* =========================================================
   MUSIC MINI TITLE - 끊김 없는 무한 흐름
========================================================= */
#musicAppWin.collapsed .music-mini-title {
  position: absolute !important;
  left: 10px !important;
  right: 100px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 18px !important;
  line-height: 18px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: rgba(42, 38, 44, 0.82) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
#musicAppWin.collapsed .music-mini-title-track {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  will-change: transform !important;
  transform: translateX(0);
}
#musicAppWin.collapsed .music-mini-title span {
  display: inline-block !important;
  white-space: nowrap !important;
  padding-right: var(--mini-title-gap, 44px) !important;
}
#musicAppWin.collapsed .music-mini-title:not(.is-marquee) .music-mini-title-track {
  animation: none !important;
  transform: translateX(0) !important;
}
#musicAppWin.collapsed .music-mini-title:not(.is-marquee) .music-mini-title-clone {
  display: none !important;
}
#musicAppWin.collapsed .music-mini-title.is-marquee .music-mini-title-track {
  animation: musicMiniTitleInfinite var(--mini-title-speed, 6s) linear infinite !important;
}
@keyframes musicMiniTitleInfinite {
  0% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--mini-title-shift, 120px)));
  }
}
#musicAppWin.collapsed .music-mini-controls {
  position: absolute !important;
  right: 14px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  z-index: 7 !important;
}
#musicAppWin.collapsed .mini-skip {
  display: inline-block !important;
  font-family: Arial, sans-serif !important;
  letter-spacing: -4px !important;
  transform: scaleX(0.92) !important;
  transform-origin: center !important;
}
#musicAppWin.collapsed .music-mini-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(42, 38, 44, 0.92) !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniNext {
  width: 20px !important;
  height: 18px !important;
  font-size: 15px !important;
}
/* =========================================================
   MUSIC MINI TITLE - 속도/멈춤/버튼 위치 보정
========================================================= */
#musicAppWin.collapsed .music-mini-title {
  left: 10px !important;
  right: 88px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
#musicAppWin.collapsed .music-mini-title-track {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  will-change: transform !important;
}
#musicAppWin.collapsed .music-mini-title span {
  padding-right: var(--mini-title-gap, 44px) !important;
}
#musicAppWin.collapsed .music-mini-title.is-marquee .music-mini-title-track {
  animation: musicMiniTitleInfinitePause var(--mini-title-speed, 8s) linear infinite !important;
}
@keyframes musicMiniTitleInfinitePause {
  0% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(0);
  }
  82% {
    transform: translateX(calc(-1 * var(--mini-title-shift, 120px)));
  }
  100% {
    transform: translateX(calc(-1 * var(--mini-title-shift, 120px)));
  }
}
#musicAppWin.collapsed .music-mini-controls {
  right: 10px !important;
  left: auto !important;
  top: 53% !important;
  transform: translateY(-50%) !important;
  gap: 9px !important;
}
#musicAppWin.collapsed #musicMiniPlay {
  position: relative !important;
  top: 1px !important;
}
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniNext {
  position: relative !important;
  top: 1px !important;
}
#musicAppWin.collapsed .mini-skip {
  display: inline-block !important;
  font-family: Arial, sans-serif !important;
  letter-spacing: -5px !important;
  transform: scaleX(0.92) !important;
  transform-origin: center !important;
}
/* =========================================================
   MUSIC MINI TITLE - 최종 강제판
   전체 제목 보임 → 잠깐 정지 → 왼쪽 흐름 → 다음 제목 정지
========================================================= */
#musicAppWin.collapsed .music-mini-title {
  left: 10px !important;
  right: 88px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
#musicAppWin.collapsed .music-mini-title.is-marquee .music-mini-title-track {
  animation-name: musicMiniTitleHoldScrollFinal !important;
  animation-duration: var(--mini-title-speed, 9s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
}
/*
  0~24%: 제목 전체 보이고 멈춤
  24~76%: 왼쪽으로 흐름
  76~100%: 복제 제목이 들어온 상태로 멈춤
*/
@keyframes musicMiniTitleHoldScrollFinal {
  0% {
    transform: translateX(0);
  }
  24% {
    transform: translateX(0);
  }
  76% {
    transform: translateX(calc(-1 * var(--mini-title-shift, 120px)));
  }
  100% {
    transform: translateX(calc(-1 * var(--mini-title-shift, 120px)));
  }
}
#musicAppWin.collapsed .music-mini-controls {
  right: 10px !important;
  left: auto !important;
  top: 54% !important;
  transform: translateY(-50%) !important;
  gap: 9px !important;
}
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniPlay,
#musicAppWin.collapsed #musicMiniNext {
  position: relative !important;
  top: 1px !important;
}
/* =========================================================
   MUSIC MINI TITLE - 3개 제목으로 자연스러운 무한 반복
========================================================= */
#musicAppWin.collapsed .music-mini-title {
  left: 10px !important;
  right: 78px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  font-weight: 400 !important;
}
#musicAppWin.collapsed .music-mini-title.is-marquee .music-mini-title-track {
  animation-name: musicMiniTitleTripleLoop !important;
  animation-duration: var(--mini-title-speed, 14s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
}
/*
  0~12%: 첫 제목 정지
  12~38%: 두 번째 제목까지 이동
  38~50%: 두 번째 제목 정지
  50~76%: 세 번째 제목까지 이동
  76~100%: 세 번째 제목 정지
  이후 0으로 리셋돼도 세 번째 제목 = 첫 제목이라 티 안 남
*/
@keyframes musicMiniTitleTripleLoop {
  0% {
    transform: translateX(0);
  }
  12% {
    transform: translateX(0);
  }
  38% {
    transform: translateX(calc(-1 * var(--mini-title-shift, 120px)));
  }
  50% {
    transform: translateX(calc(-1 * var(--mini-title-shift, 120px)));
  }
  76% {
    transform: translateX(calc(-2 * var(--mini-title-shift, 120px)));
  }
  100% {
    transform: translateX(calc(-2 * var(--mini-title-shift, 120px)));
  }
}
#musicAppWin.collapsed .music-mini-controls {
  right: 0px !important;
  left: auto !important;
  top: 59% !important;
  transform: translateY(-50%) !important;
  gap: 8px !important;
}
#musicAppWin.collapsed #musicMiniPrev,
#musicAppWin.collapsed #musicMiniPlay,
#musicAppWin.collapsed #musicMiniNext {
  position: relative !important;
  top: -2px !important;
}
#musicAppWin.collapsed #musicMiniPlay {
  position: relative !important;
  left: 3px !important;  
  top: -1px !important;   
}
/* =========================================================
   Mac Dock 클릭 애니메이션 보정
   - 클릭 후에도 hover 상태 유지
   - 최소화할 때도 같은 bounce
========================================================= */
.mac-dock-item:hover,
.mac-dock-item.is-hover-locked {
  transform: translateY(-6px) scale(1.14) !important;
  filter: brightness(1.04) !important;
}
.mac-dock-item.is-clicking .mac-dock-icon {
  animation: macDockIconPopKeep 0.28s cubic-bezier(.22, 1.35, .36, 1) both !important;
}
@keyframes macDockIconPopKeep {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-5px) scale(1.17);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.mac-dock-icon.is-virus {
  background: linear-gradient(135deg, #5aa8ef, #80cfff) !important;
  color: #fff !important;
}
/* =========================================================
FAKE BSOD - 가짜 블루스크린 연출
========================================================= */
.fake-bsod {
position: fixed !important;
inset: 0 !important;
z-index: 2147483600 !important;
display: none !important;
background: #0078d7 !important;
color: #fff !important;
font-family: "Segoe UI", "Pretendard Variable", sans-serif !important;
cursor: default !important;
}
.fake-bsod.show {
display: block !important;
animation: fakeBsodIn 0.16s steps(2, end) both !important;
}
@keyframes fakeBsodIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fake-bsod-inner {
position: absolute !important;
left: 10.8vw !important;
top: 16vh !important;
width: 78vw !important;
}
.fake-bsod-face {
font-size: 90px !important;
font-weight: 300 !important;
line-height: 1 !important;
margin-bottom: 34px !important;
letter-spacing: 2px !important;
}
.fake-bsod-text {
font-size: 31px !important;
font-weight: 300 !important;
line-height: 1.6 !important;
letter-spacing: 1.5px !important;
}
.fake-bsod-percent {
margin-top: 36px !important;
font-size: 28px !important;
font-weight: 300 !important;
letter-spacing: 1px !important;
}
.fake-bsod-bottom {
margin-top: 34px !important;
display: flex !important;
align-items: flex-start !important;
gap: 18px !important;
}
.fake-bsod-qr {
width: 98px !important;
height: 98px !important;
background:
linear-gradient(90deg, #fff 10px, transparent 10px) 0 0 / 20px 20px,
linear-gradient(#fff 10px, transparent 10px) 0 0 / 20px 20px,
#0078d7 !important;
border: 8px solid #fff !important;
box-shadow:
inset 18px 18px 0 #fff,
inset -18px -18px 0 #fff !important;
}
.fake-bsod-info {
padding-top: 2px !important;
font-size: 14px !important;
font-weight: 300 !important;
line-height: 1.55 !important;
letter-spacing: 0.4px !important;
opacity: 0.92 !important;
}
@media (max-width: 720px) {
.fake-bsod-inner {
left: 8vw !important;
top: 13vh !important;
width: 86vw !important;
}
.fake-bsod-face {
font-size: 66px !important;
}
.fake-bsod-text,
.fake-bsod-percent {
font-size: 21px !important;
}
.fake-bsod-info {
font-size: 11px !important;
}
}
/* =========================================================
히카루 바이러스 팝업 - 창/상단바/대사창 정리본
========================================================= */
:root {
--virus-titlebar-height: 44px;
--virus-titlebar-bg: #eeeeee;
--virus-titlebar-border: rgba(0, 0, 0, 0.08);
--virus-titlebar-text: rgba(60, 60, 60, 0.82);
}
.virus-popup-card {
background: rgba(248, 250, 252, 0.62) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
backdrop-filter: blur(18px) saturate(1.08) !important;
border: 1px solid rgba(70, 70, 80, 0.16) !important;
box-shadow:
0 18px 42px rgba(40, 45, 60, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
overflow: hidden !important;
}
.virus-popup-bar {
height: var(--virus-titlebar-height) !important;
min-height: var(--virus-titlebar-height) !important;
max-height: var(--virus-titlebar-height) !important;
display: flex !important;
align-items: center !important;
padding: 0 14px !important;
background: var(--virus-titlebar-bg) !important;
background-color: var(--virus-titlebar-bg) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-bottom: 1px solid var(--virus-titlebar-border) !important;
box-shadow: none !important;
}
.virus-popup-title {
flex: 1 !important;
text-align: center !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: -0.01em !important;
color: var(--virus-titlebar-text) !important;
}
.virus-popup-bar .traffic {
display: flex !important;
align-items: center !important;
gap: 8px !important;
height: 100% !important;
}
.virus-popup-bar .traffic i,
.virus-popup-bar .traffic .r,
.virus-popup-bar .traffic .y,
.virus-popup-bar .traffic .g {
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
min-height: 12px !important;
border-radius: 999px !important;
}
.virus-popup-body,
.virus-vn-body {
background: transparent !important;
}
.virus-char-box {
width: 170px !important;
height: 142px !important;
}
#virusCharBox.has-img {
background-repeat: no-repeat !important;
background-position: center bottom !important;
background-size: 135% auto !important;
}
#virusCharBox.has-img #virusCharFallback {
display: none !important;
}
.virus-dialogue-box::before,
.virus-dialogue-box::after {
content: none !important;
display: none !important;
}
.virus-dialogue-box {
position: relative !important;
top: 16px !important;
padding: 14px 18px !important;
background: rgba(255, 255, 255, 0.68) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
backdrop-filter: blur(12px) saturate(1.05) !important;
border: 1px solid rgba(255, 255, 255, 0.38) !important;
box-shadow:
0 8px 18px rgba(60, 65, 75, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}
.virus-dialogue {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
letter-spacing: -0.01em !important;
color: rgba(36, 35, 40, 0.82) !important;
}
/* =========================================================
   Window Pop Inner 구조
   .explorer = 위치/크기 담당
   .window-pop-inner = 실제 창 화면 + 퐁 애니메이션 담당
========================================================= */
.explorer.has-pop-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}
.explorer.has-pop-inner > .window-pop-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: var(--win, rgba(255,255,255,0.92)) !important;
  border: 1px solid rgba(70, 70, 80, 0.16) !important;
  box-shadow:
    0 18px 42px rgba(40, 45, 60, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
  transform-origin: center 18% !important;
}
.explorer.has-pop-inner > .window-pop-inner.is-window-popping {
  animation: windowInnerPopLikeVirus 0.18s cubic-bezier(.22, 1.2, .36, 1) both !important;
}
@keyframes windowInnerPopLikeVirus {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.explorer.has-pop-inner.maximized {
  overflow: hidden !important;
}
.explorer.has-pop-inner.collapsed > .window-pop-inner {
  overflow: hidden !important;
}
/* =========================================================
   window-pop-inner 적용 후 메모장 사이드바 블러 복구
   핵심: inner 배경을 투명하게 만들어야 backdrop-filter가 살아남
========================================================= */
/* =========================================================
   window-pop-inner 퐁 효과 수정
   - 처음 뜰 때 투명해지는 문제 해결
   - opacity 건드리지 않고 위치/크기만 움직임
========================================================= */
.explorer.has-pop-inner > .window-pop-inner {
  opacity: 1 !important;
}
.explorer.has-pop-inner > .window-pop-inner.is-window-popping {
  opacity: 1 !important;
  animation: windowInnerPopNoFade 0.18s cubic-bezier(.22, 1.2, .36, 1) both !important;
  transform-origin: center 18% !important;
}
@keyframes windowInnerPopNoFade {
  0% {
    opacity: 1;
    transform: translateY(8px) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translateY(-1px) scale(1.006);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* =========================================================
   window-pop-inner 퐁 약화판
   - 너무 세게 튀는 문제 수정
   - opacity 건드리지 않음
========================================================= */
.explorer.has-pop-inner > .window-pop-inner {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
  transform-origin: center 18% !important;
}
.explorer.has-pop-inner > .window-pop-inner.is-window-popping {
  animation: windowInnerPopSoftTiny 0.16s cubic-bezier(.22, 1.04, .36, 1) both !important;
}
@keyframes windowInnerPopSoftTiny {
  0% {
    opacity: 1;
    transform: translateY(4px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* =========================================================
   블러 창 퐁 중에도 유리효과 유지
   - 퐁 중 backdrop-filter를 끄지 않음
   - 브라우저가 첫 프레임 늦게 그려도 비슷한 유리색으로 버팀
========================================================= */
/* =========================================================
   Inner wrapper 창 퐁 효과
   - 실제 .explorer는 transform 안 함
   - .window-pop-inner만 살짝 움직임
========================================================= */
.explorer.has-pop-inner {
  transform: none !important;
  overflow: hidden !important;
}
.explorer.has-pop-inner > .window-pop-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  transform-origin: center 18% !important;
  opacity: 1 !important;
}
.explorer.has-pop-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.explorer.has-pop-inner > .window-pop-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: var(--win, rgba(255,255,255,0.92)) !important;
  border: 1px solid rgba(70, 70, 80, 0.16) !important;
  box-shadow:
    0 18px 42px rgba(40, 45, 60, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
  transform-origin: center 18% !important;
  opacity: 1 !important;
}
/* =========================================================
   window-pop-inner 퐁 효과 범위 확장
   - explorer가 아닌 방명록 창도 퐁 적용
========================================================= */
.has-pop-inner > .window-pop-inner {
  transform-origin: center 18% !important;
  opacity: 1 !important;
}
.has-pop-inner > .window-pop-inner.window-inner-pop {
  animation: windowInnerPopTiny 0.16s cubic-bezier(.22, 1.04, .36, 1) both !important;
}
@keyframes windowInnerPopTiny {
  0% {
    transform: translateY(3px) scale(0.992);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.has-pop-inner,
.explorer.has-pop-inner {
  animation: none !important;
}
.has-pop-inner > .window-pop-inner {
  transform-origin: center 18%;
  opacity: 1;
}
.explorer.has-pop-inner > .window-pop-inner {
  opacity: 1 !important;
  transform: scale(1);
  transform-origin: center center !important;
  will-change: transform;
}
.explorer.has-pop-inner > .window-pop-inner.window-inner-pop {
  animation: windowInnerPopFinal 190ms cubic-bezier(.22, 1, .36, 1) both !important;
}
@keyframes windowInnerPopFinal {
  0% {
    opacity: 0.96;
    transform: scale(0.965);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.explorer.has-pop-inner > .window-pop-inner.window-inner-close {
  animation: windowInnerCloseFinal 160ms cubic-bezier(.22, 1, .36, 1) both !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}
@keyframes windowInnerCloseFinal {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.965);
  }
}
#mainWin.has-pop-inner > .window-pop-inner,
#guestbookAppWin.has-pop-inner > .window-pop-inner {
  background: transparent !important;
}
#mainWin .sidebar,
#mainWin.window-inner-pop .sidebar,
#mainWin.is-window-popping-now .sidebar,
#mainWin.has-pop-inner .sidebar {
  background: rgba(242, 242, 242, 0.52) !important;
  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.12) !important;
  backdrop-filter:
    blur(18px)
    saturate(1.12) !important;
  transform: translateZ(0);
  will-change: backdrop-filter, -webkit-backdrop-filter;
}
#mainWin.blur-pop-prewarm .sidebar {
    transform: translateZ(0);
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}
/* =========================================================
   Mac Dock 라벨 유지
   - 클릭해서 updateTaskbar()로 독이 다시 그려져도
   - JS가 붙여둔 is-hover-locked 상태면 이름 계속 표시
========================================================= */
.mac-dock-item:hover .mac-dock-label,
.mac-dock-item.is-hover-locked .mac-dock-label {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
/* =========================================================
   FINAL: 하단 Dock / 우측 트레이 구버전 심플 UI
   - 최신 글래스 느낌 줄이기
   - 탐색기 창의 연회색/흰색 UI와 맞추기
========================================================= */
.mac-dock {
  min-width: 154px !important;
  min-height: 50px !important;
  padding: 6px 9px 5px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(210, 214, 218, 0.92) !important;
  background: rgba(250, 250, 250, 0.88) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
  backdrop-filter: blur(6px) saturate(1.02) !important;
  box-shadow:
    0 4px 12px rgba(80, 90, 105, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
.mac-dock-apps {
  gap: 8px !important;
}
.mac-dock-item {
  width: 42px !important;
  height: 44px !important;
  transition:
    transform 0.13s ease,
    filter 0.13s ease,
    opacity 0.13s ease !important;
}
.mac-dock-item:hover,
.mac-dock-item.is-hover-locked {
  transform: translateY(-3px) scale(1.05) !important;
  filter: brightness(1.02) !important;
}
.mac-dock-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  box-shadow:
    0 3px 7px rgba(55, 60, 75, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
}
.mac-dock-dot {
  bottom: -1px !important;
  width: 4px !important;
  height: 4px !important;
  background: rgba(95, 98, 108, 0.48) !important;
}
.mac-dock-label {
  bottom: 52px !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: rgba(70, 70, 78, 0.92) !important;
  border: 1px solid rgba(205, 208, 214, 0.82) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 8px rgba(70, 80, 95, 0.10) !important;
}
.mac-utility-tray {
  right: 12px !important;
  bottom: 8px !important;
  height: 34px !important;
  padding: 0 9px !important;
  gap: 6px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(210, 214, 218, 0.92) !important;
  background: rgba(250, 250, 250, 0.88) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
  backdrop-filter: blur(6px) saturate(1.02) !important;
  box-shadow:
    0 4px 12px rgba(80, 90, 105, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
.mac-tray-btn {
  height: 24px !important;
  padding: 0 4px !important;
  border-radius: 6px !important;
  color: rgba(85, 88, 96, 0.72) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.mac-tray-btn:hover {
  background: rgba(235, 237, 240, 0.92) !important;
  color: rgba(55, 58, 66, 0.9) !important;
}
.mac-tray-clock {
  color: rgba(75, 78, 86, 0.78) !important;
  font-weight: 700 !important;
}
/* =========================================================
   FINAL: Dock / 트레이 더 투명하게
   - 최신 글래스처럼 번쩍이진 않게
   - 배경은 더 잘 비치게
========================================================= */
.mac-dock {
  background: rgba(250, 250, 250, 0.70) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.02) !important;
  backdrop-filter: blur(5px) saturate(1.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  box-shadow:
    0 4px 10px rgba(80, 90, 105, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
.mac-utility-tray {
  background: rgba(250, 250, 250, 0.70) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.02) !important;
  backdrop-filter: blur(5px) saturate(1.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  box-shadow:
    0 4px 10px rgba(80, 90, 105, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
/* =========================================================
   FINAL: Dock 크게 + 아이콘 확대 + 휴지통 구분선
========================================================= */
.mac-dock {
  min-width: 224px !important;
  min-height: 72px !important;
  padding: 8px 13px 7px !important;
  border-radius: 22px !important;
  background: rgba(250, 250, 250, 0.54) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.04) !important;
  backdrop-filter: blur(6px) saturate(1.04) !important;
  box-shadow:
    0 7px 18px rgba(70, 80, 100, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}
.mac-dock-apps {
  gap: 11px !important;
  align-items: flex-end !important;
}
.mac-dock-item {
  width: 58px !important;
  height: 64px !important;
}
.mac-dock-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 13px !important;
  font-size: 27px !important;
  box-shadow:
    0 5px 12px rgba(40, 45, 65, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
.mac-dock-item:hover,
.mac-dock-item.is-hover-locked {
  transform: translateY(-5px) scale(1.08) !important;
  filter: brightness(1.03) !important;
}
.mac-dock-dot {
  bottom: 0 !important;
  width: 5px !important;
  height: 5px !important;
}
.mac-dock-label {
  bottom: 72px !important;
}
.mac-dock-separator {
  display: block !important;
  width: 1px !important;
  height: 42px !important;
  margin: 0 2px 5px 1px !important;
  background: rgba(80, 85, 95, 0.22) !important;
  border-radius: 999px !important;
  flex: 0 0 1px !important;
}
.mac-dock-icon.is-trash svg {
  width: 31px !important;
  height: 31px !important;
  display: block !important;
}
/* =========================================================
   FINAL: Dock 휴지통 구분선 길이/정렬 보정
========================================================= */
.mac-dock-apps {
  align-items: center !important;
}
.mac-dock-separator {
  display: block !important;
  width: 1px !important;
  height: 54px !important;
  align-self: center !important;
  margin: 0 5px !important;
  background: rgba(80, 85, 95, 0.24) !important;
  border-radius: 999px !important;
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.36) !important;
  transform: translateY(-1px) !important;
  flex: 0 0 1px !important;
}
.mac-dock-separator {
  width: 2px !important;
  flex: 0 0 2px !important;
  height: 54px !important;
  align-self: center !important;
  margin: 0 6px !important;
  background: rgba(80, 85, 95, 0.15) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  transform: translateY(-1px) !important;
}
.explorer.closed,
.explorer.has-pop-inner.closed,
#mainWin.closed,
#mainWin.has-pop-inner.closed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* =========================================================
   FINAL: Mac 트레이 / 알림센터 / 위젯 / HKRK 알림 통합본
========================================================= */
.mac-utility-tray {
  height: 34px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 12px !important;
  gap: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 15px !important;
}
.mac-tray-btn,
.mac-tray-status {
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(65, 68, 76, 0.78) !important;
  line-height: 1 !important;
}
.mac-tray-mode {
  min-width: 23px !important;
  padding: 0 3px !important;
  font-size: 13px !important;
}
.mac-tray-status {
  width: 25px !important;
  padding: 0 !important;
  opacity: 0.88 !important;
  pointer-events: none !important;
}
.mac-tray-status svg {
  width: 22px !important;
  height: 16px !important;
  display: block !important;
}
.mac-tray-clock {
  position: relative !important;
  overflow: visible !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 3px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  color: rgba(55, 58, 66, 0.82) !important;
  font-variant-numeric: tabular-nums !important;
}
.mac-tray-clock:hover {
  background: rgba(255, 255, 255, 0.42) !important;
}
.mac-nc-badge {
  position: absolute !important;
  top: -10px !important;
  right: -12px !important;
  z-index: 50 !important;
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  box-sizing: border-box !important;
  padding: 0 1px 2px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ff3b30 !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.mac-nc-badge[hidden] {
  display: none !important;
}
.mac-notification-center {
  position: fixed;
  top: 7px !important;
  right: 14px !important;
  bottom: 65px !important;
  width: 320px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 66px) !important;
  height: auto !important;
  z-index: 70;
  padding: 16px;
  overflow-y: auto !important;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: rgba(245, 247, 250, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  box-shadow:
    0 18px 42px rgba(60, 70, 90, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(.22, 1, .36, 1),
    opacity 0.22s ease;
}
.mac-notification-center.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.mac-nc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mac-nc-date {
  font-size: 12px;
  font-weight: 700;
  color: rgba(70, 74, 84, 0.62);
}
.mac-nc-title {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(45, 48, 56, 0.88);
}
.mac-nc-close {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: rgba(70, 74, 84, 0.72);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.mac-nc-close:hover {
  background: rgba(255, 255, 255, 0.78);
}
.mac-widget-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}
.mac-widget {
  position: relative;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.02) !important;
  backdrop-filter: blur(12px) saturate(1.02) !important;
  box-shadow:
    0 8px 18px rgba(70, 80, 100, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}
.mac-widget-small,
.mac-widget-dday,
.mac-widget-weather,
.mac-widget-tamagotchi,
.mac-widget-fortune {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  padding: 14px !important;
}
.mac-widget-wide,
.mac-widget-calendar {
  grid-column: 1 / -1 !important;
}
.mac-widget-label {
  margin-bottom: 8px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  color: rgba(86, 92, 104, 0.55) !important;
}
.mac-widget-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  color: rgba(45, 48, 56, 0.9) !important;
}
.mac-widget-text {
  margin-top: 7px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(80, 84, 94, 0.68) !important;
}
.mac-widget-fortune .mac-widget-title,
.mac-widget-fortune .mac-widget-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.mac-widget-fortune .mac-widget-title {
  -webkit-line-clamp: 2 !important;
}
.mac-widget-fortune .mac-widget-text {
  -webkit-line-clamp: 3 !important;
}
.mac-widget-calendar {
  width: 100% !important;
  aspect-ratio: 2 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.62) !important;
}
.mac-calendar-split {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 50% 50% !important;
  background: transparent !important;
  overflow: hidden !important;
}
.mac-cal-left {
  position: relative !important;
  padding: 11px 8px 10px 13px !important;
  background: transparent !important;
  border-right: 0 !important;
  overflow: hidden !important;
}
.mac-cal-weekday {
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 65, 95, 0.9) !important;
}
.mac-cal-daynum {
  margin-top: 2px !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.05em !important;
  color: rgba(35, 38, 46, 0.92) !important;
}
.mac-cal-events {
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.mac-cal-event {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 23px !important;
  padding: 3px 7px 3px 9px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}
.mac-cal-event::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  bottom: 3px !important;
  width: 3px !important;
  border-radius: 999px !important;
}
.mac-cal-event span {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
}
.mac-cal-event small {
  margin-top: 1px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  opacity: 0.72 !important;
}
.event-yellow {
  background: rgba(255, 230, 128, 0.24) !important;
  color: rgba(130, 100, 0, 0.92) !important;
}
.event-yellow::before {
  background: rgba(245, 195, 40, 0.72) !important;
}
.event-red {
  background: rgba(255, 160, 170, 0.20) !important;
  color: rgba(150, 45, 60, 0.92) !important;
}
.event-red::before {
  background: rgba(255, 75, 95, 0.72) !important;
}
.mac-cal-right {
  padding: 9px 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  overflow: hidden !important;
}
.mac-mini-month-head {
  width: 118px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
}
.mac-mini-month-head span {
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 105, 145, 0.9) !important;
}
.mac-mini-month-head small {
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: rgba(90, 96, 108, 0.42) !important;
}
.mac-mini-calendar {
  width: 118px !important;
  height: 100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 2px 3px !important;
  padding-top: 3px !important;
  background: transparent !important;
  text-align: center !important;
}
.mac-mini-calendar span,
.mac-mini-calendar b {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}
.mac-mini-calendar span {
  font-weight: 900 !important;
  color: rgba(90, 96, 108, 0.38) !important;
}
.mac-mini-calendar b {
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  color: rgba(55, 60, 70, 0.72) !important;
}
.mac-mini-calendar b.muted {
  opacity: 0.16 !important;
}
.mac-mini-calendar b.today {
  width: 15px !important;
  height: 15px !important;
  align-self: center !important;
  justify-self: center !important;
  background: rgba(255, 95, 135, 0.86) !important;
  color: #fff !important;
}
.mac-widget-love-day {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.love-day-main {
  margin-top: -3px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  color: rgba(45, 48, 56, 0.9) !important;
}
.love-day-main #loveDayCount {
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  font-variant-numeric: tabular-nums !important;
}
.love-day-unit {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: rgba(45, 48, 56, 0.74) !important;
}
.love-day-sub {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(80, 84, 94, 0.68) !important;
}
.love-day-heart {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.love-day-hearts {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
.mac-widget-weather {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 11px 9px 12px !important;
  color: rgba(255, 255, 255, 0.96) !important;
  transition:
    background 0.35s ease,
    color 0.25s ease !important;
}
.mac-widget-weather > * {
  position: relative !important;
  z-index: 2 !important;
}
.mac-widget-weather::before {
  content: '' !important;
  position: absolute !important;
  inset: -30% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.62 !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.55), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.24), transparent 38%) !important;
}
.mac-widget-weather .mac-widget-label{
  display: none !important;
}
.mac-weather-city {
  margin-left: 3px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 3px rgba(20, 30, 45, 0.18) !important;
}
.mac-weather-temp-wrap {
  margin-top: 4px !important;
  margin-left: -3px !important;
}
.mac-weather-temp {
  display: block !important;
  margin: 0 !important;
  font-size: 46px !important;
  font-weight: 300 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.09em !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 3px rgba(20, 30, 45, 0.16) !important;
}
.mac-weather-desc {
  margin-top: 30px !important;
  margin-left: 3px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: 0 1px 3px rgba(20, 30, 45, 0.16) !important;
}
.mac-weather-range {
  margin-top: 2px !important;
  margin-left: 3px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 3px rgba(20, 30, 45, 0.14) !important;
}
.mac-widget-weather.weather-clear {
  background: linear-gradient(145deg, rgba(91, 187, 255, 0.88), rgba(255, 196, 97, 0.82)) !important;
}
.mac-widget-weather.weather-partly {
  background: linear-gradient(145deg, rgba(96, 174, 235, 0.86), rgba(187, 215, 230, 0.78)) !important;
}
.mac-widget-weather.weather-cloudy {
  background: linear-gradient(145deg, rgba(126, 148, 170, 0.84), rgba(205, 214, 222, 0.76)) !important;
}
.mac-widget-weather.weather-rain {
  background: linear-gradient(145deg, rgba(71, 102, 143, 0.90), rgba(117, 150, 180, 0.78)) !important;
}
.mac-widget-weather.weather-thunder {
  background: linear-gradient(145deg, rgba(54, 50, 88, 0.92), rgba(104, 91, 145, 0.82)) !important;
}
.mac-widget-weather.weather-fog {
  background: linear-gradient(145deg, rgba(174, 185, 193, 0.82), rgba(230, 232, 233, 0.76)) !important;
}
.mac-widget-weather.weather-snow {
  background: linear-gradient(145deg, rgba(152, 198, 225, 0.82), rgba(240, 247, 250, 0.78)) !important;
}
.mac-widget-weather.weather-fog .mac-weather-city,
.mac-widget-weather.weather-fog .mac-weather-temp,
.mac-widget-weather.weather-fog .mac-weather-desc,
.mac-widget-weather.weather-fog .mac-weather-range,
.mac-widget-weather.weather-snow .mac-weather-city,
.mac-widget-weather.weather-snow .mac-weather-temp,
.mac-widget-weather.weather-snow .mac-weather-desc,
.mac-widget-weather.weather-snow .mac-weather-range {
  color: rgba(55, 65, 78, 0.86) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.36) !important;
}
.mac-widget-weather.weather-night {
  background: linear-gradient(145deg, rgba(27, 37, 77, 0.94), rgba(78, 83, 130, 0.82)) !important;
}
.mac-widget-weather.weather-night::before {
  opacity: 0.42 !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.65), transparent 8%),
    radial-gradient(circle at 28% 72%, rgba(165, 180, 255, 0.26), transparent 34%) !important;
}
.mac-widget-tamagotchi {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.tama-box {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.tama-img {
  max-width: 72px;
  max-height: 72px;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 8px rgba(45, 48, 56, 0.18));
}
.tama-caption {
  width: 100%;
  margin-top: auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: rgba(80, 84, 94, 0.52);
}
.hkrk-line-stack {
  position: fixed;
  top: 22px;
  right: 18px;
  width: 318px;
  max-width: calc(100vw - 32px);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.hkrk-line-noti {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: rgba(250, 252, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
  box-shadow:
    0 12px 28px rgba(50, 60, 80, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  overflow: hidden;
  pointer-events: auto;
  transform: translateX(24px) scale(0.985);
  opacity: 0;
  animation: hkrkLineIn 260ms cubic-bezier(.22, 1, .36, 1) forwards;
}
.hkrk-line-noti.is-leaving {
  animation: hkrkLineOut 190ms ease forwards;
}
@keyframes hkrkLineIn {
  from {
    opacity: 0;
    transform: translateX(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes hkrkLineOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(18px) scale(0.985);
  }
}
.hkrk-line-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(60, 58, 76, 0.96), rgba(28, 27, 36, 0.94));
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  font-weight: 800;
  box-shadow:
    0 5px 10px rgba(30, 34, 50, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.hkrk-line-noti.from-riko .hkrk-line-avatar {
  background: linear-gradient(145deg, rgba(255, 178, 205, 0.94), rgba(255, 121, 169, 0.86)) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}
.hkrk-line-noti.from-hikaru .hkrk-line-avatar {
  background: linear-gradient(145deg, rgba(60, 58, 76, 0.96), rgba(28, 27, 36, 0.94)) !important;
  color: rgba(255, 255, 255, 0.94) !important;
}
.hkrk-line-content {
  min-width: 0;
}
.hkrk-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.hkrk-line-app {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(80, 88, 98, 0.48);
}
.hkrk-line-time {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  color: rgba(80, 88, 98, 0.42);
}
.hkrk-line-name {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(38, 42, 50, 0.88);
}
.hkrk-line-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(55, 60, 70, 0.76);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hkrk-line-noti.is-soft {
  background: linear-gradient(145deg, rgba(255, 248, 252, 0.78), rgba(246, 250, 255, 0.66));
}
.hkrk-line-noti.is-dark {
  background: linear-gradient(145deg, rgba(52, 50, 66, 0.84), rgba(32, 32, 42, 0.78));
  border-color: rgba(255, 255, 255, 0.18);
}
.hkrk-line-noti.is-dark .hkrk-line-app,
.hkrk-line-noti.is-dark .hkrk-line-time {
  color: rgba(255, 255, 255, 0.42);
}
.hkrk-line-noti.is-dark .hkrk-line-name {
  color: rgba(255, 255, 255, 0.92);
}
.hkrk-line-noti.is-dark .hkrk-line-text {
  color: rgba(255, 255, 255, 0.74);
}
.mac-nc-line-history {
  margin-bottom: 14px;
}
.mac-nc-section-title {
  margin: 0 0 7px 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(70, 76, 86, 0.58);
}
.mac-nc-line-item {
  position: relative;
  display: block;
  padding: 9px 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  backdrop-filter: blur(14px) saturate(1.04);
  box-shadow:
    0 7px 16px rgba(60, 70, 90, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
  overflow: hidden;
}
.mac-nc-line-main {
  min-width: 0;
}
.mac-nc-line-top {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mac-nc-line-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mac-nc-line-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #49d66d, #20b84e);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  box-shadow:
    0 3px 7px rgba(30, 120, 60, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.mac-nc-line-item.from-riko .mac-nc-line-icon {
  background: linear-gradient(145deg, #ff9fc5, #ff6fa8);
}
.mac-nc-line-item.from-hikaru .mac-nc-line-icon {
  background: linear-gradient(145deg, #5b586d, #262530);
}
.mac-nc-line-app {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(65, 70, 80, 0.62);
}
.mac-nc-line-time {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  color: rgba(65, 70, 80, 0.42);
}
.mac-nc-line-name {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: rgba(38, 42, 50, 0.88);
}
.mac-nc-line-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.32;
  color: rgba(55, 60, 70, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mac-nc-line-empty {
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.38);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: rgba(80, 86, 98, 0.44);
}
/* =========================================================
   초기 창 위치/크기 기본값
   - 페이지 처음 켰을 때만 JS가 이 값을 참고함
========================================================= */
#mainWin {
  --init-left: calc((100vw - 720px) / 2);
  --init-top: 12px;
  --init-width: 720px;
  --init-height: min(900px, calc(100vh - 70px));
}
#musicAppWin {
  --init-left: 114px;
  --init-top: calc(100vh - 200px);
  --init-width: 288px;
  --init-height: 238px;
}
/* =========================================================
   FINAL FIX: 앱 아이콘 이미지 교체
   - 바탕화면 기존 CSS 아이콘 완전 제거
   - Dock 기존 아이콘/글자 완전 제거
   - Cloudflare 이미지로 통일
========================================================= */
:root {
  --app-icon-toolbox: url("https://broken-credit-a9c1.28rnm.workers.dev/icon/folder.png");
  --app-icon-music: url("https://broken-credit-a9c1.28rnm.workers.dev/icon/music.png");
  --app-icon-trash: url("https://broken-credit-a9c1.28rnm.workers.dev/icon/trash.png");
  --app-icon-guestbook: url("https://broken-credit-a9c1.28rnm.workers.dev/icon/message.png");
  --app-icon-virus: url("https://broken-credit-a9c1.28rnm.workers.dev/icon/hikaru.png");
}
/* =========================================================
   1. 바탕화면 아이콘 공통
========================================================= */
#deskIconArt,
#decoMusicApp,
#decoTrash,
#decoGuestbook,
#virusMemeIcon .virus-shortcut-art {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}
#deskIconArt::before,
#deskIconArt::after,
#decoMusicApp::before,
#decoMusicApp::after,
#decoTrash::before,
#decoTrash::after,
#decoGuestbook::before,
#decoGuestbook::after,
#virusMemeIcon .virus-shortcut-art::before,
#virusMemeIcon .virus-shortcut-art::after {
  content: none !important;
  display: none !important;
}
#deskIconArt > *,
#decoMusicApp > *,
#decoTrash > *,
#decoGuestbook > *,
#virusMemeIcon .virus-shortcut-art > * {
  display: none !important;
}
#deskIconArt::marker,
#decoMusicApp::marker,
#decoTrash::marker,
#decoGuestbook::marker {
  display: none !important;
}
#deskIconArt {
  background: var(--app-icon-toolbox) center / contain no-repeat !important;
}
#decoMusicApp {
  background: var(--app-icon-music) center / contain no-repeat !important;
}
#decoTrash {
  background: var(--app-icon-trash) center / contain no-repeat !important;
}
#decoGuestbook {
  background: var(--app-icon-guestbook) center / contain no-repeat !important;
}
#virusMemeIcon .virus-shortcut-art {
  background: var(--app-icon-virus) center / contain no-repeat !important;
}
/* =========================================================
   2. Dock 아이콘 공통
   - 기존 아이콘을 숨기고 ::before에 이미지 출력
========================================================= */
.mac-dock-icon {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
}
.mac-dock-icon > *,
.mac-dock-icon svg,
.mac-dock-icon img {
  display: none !important;
}
.mac-dock-icon::before {
  content: "" !important;
  width: 48px !important;
  height: 48px !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  image-rendering: auto !important;
}
/* =========================================================
   3. Dock 아이콘별 이미지
   - class 방식 + data 방식 둘 다 잡음
========================================================= */
.mac-dock-icon.is-main::before,
.mac-dock-icon.is-toolbox::before,
.mac-dock-item[data-target="mainWin"] .mac-dock-icon::before,
.mac-dock-item[data-win="mainWin"] .mac-dock-icon::before,
.mac-dock-item[data-app="mainWin"] .mac-dock-icon::before {
  background-image: var(--app-icon-toolbox) !important;
}
.mac-dock-icon.is-music::before,
.mac-dock-icon.is-musicApp::before,
.mac-dock-item[data-target="musicAppWin"] .mac-dock-icon::before,
.mac-dock-item[data-win="musicAppWin"] .mac-dock-icon::before,
.mac-dock-item[data-app="musicAppWin"] .mac-dock-icon::before {
  background-image: var(--app-icon-music) !important;
}
.mac-dock-icon.is-trash::before,
.mac-dock-icon.is-bin::before,
.mac-dock-item[data-target="trashWin"] .mac-dock-icon::before,
.mac-dock-item[data-win="trashWin"] .mac-dock-icon::before,
.mac-dock-item[data-app="trashWin"] .mac-dock-icon::before{
  background-image: var(--app-icon-trash) !important;
}
.mac-dock-icon.is-guestbook::before,
.mac-dock-item[data-target="guestbookAppWin"] .mac-dock-icon::before,
.mac-dock-item[data-win="guestbookAppWin"] .mac-dock-icon::before,
.mac-dock-item[data-app="guestbookAppWin"] .mac-dock-icon::before {
  background-image: var(--app-icon-guestbook) !important;
}
.mac-dock-icon.is-virus::before,
.mac-dock-icon.is-virusMeme::before,
.mac-dock-item[data-target="virusPopup"] .mac-dock-icon::before,
.mac-dock-item[data-win="virusPopup"] .mac-dock-icon::before,
.mac-dock-item[data-app="virusPopup"] .mac-dock-icon::before {
  background-image: var(--app-icon-virus) !important;
}
/* =========================================================
   FINAL FIX 2: Dock 아이콘 배경/잘림/기존 아이콘 제거
   - 기존 gradient 배경 완전 제거
   - ::before 방식 중지
   - span 자체에 Cloudflare 이미지 직접 적용
========================================================= */
.mac-dock-item {
  width: 50px !important;
  height: 52px !important;
  overflow: visible !important;
}
.mac-dock-icon {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
}
.mac-dock-icon::before,
.mac-dock-icon::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
.mac-dock-icon > *,
.mac-dock-icon svg,
.mac-dock-icon img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.mac-dock-icon.is-main {
  background: var(--app-icon-toolbox) center center / contain no-repeat transparent !important;
}
.mac-dock-icon.is-music {
  background: var(--app-icon-music) center center / contain no-repeat transparent !important;
}
.mac-dock-icon.is-guestbook {
  background: var(--app-icon-guestbook) center center / contain no-repeat transparent !important;
}
.mac-dock-icon.is-virus {
  background: var(--app-icon-virus) center center / contain no-repeat transparent !important;
}
.mac-dock-icon.is-trash {
  background: var(--app-icon-trash) center center / 50px 50px no-repeat transparent !important;
}
.mac-dock-icon.is-photo,
.mac-dock-icon.is-admin {
  background-color: transparent !important;
  box-shadow: none !important;
}
.mac-dock-dot {
  bottom: 1px !important;
}
/* =========================================================
   FINAL TWEAK: 바탕화면 아이콘 축소 / 간격 압축 / 그림자
   - 히카루 바이러스 아이콘은 제외
========================================================= */
.desk-icon:not(#virusMemeIcon) {
  width: 72px !important;
  padding: 6px 4px !important;
  border-radius: 8px !important;
}
.desk-icon:not(#virusMemeIcon) .di-art,
#deskIconArt,
#decoMusicApp,
#decoTrash,
#decoGuestbook {
  width: 47px !important;
  height: 47px !important;
  margin-bottom: 4px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter:
    drop-shadow(0 4px 6px rgba(40, 45, 55, 0.22))
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.35)) !important;
}
.desk-icon:not(#virusMemeIcon) .di-label {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  padding: 1px 5px !important;
}
#deskIcon {
  top: 18px !important;
  left: 18px !important;
}
#guestbookIcon {
  top: 174px !important;
  left: 18px !important;
}
.desk-icon[data-app="musicApp"] {
  top: 252px !important;
  left: 18px !important;
}
#trashIcon {
  left: 18px !important;
  bottom: 18px !important;
}
#virusMemeIcon,
#virusMemeIcon .virus-shortcut-art {
  filter:
    drop-shadow(0 4px 7px rgba(40, 45, 55, 0.20)) !important;
}
/* =========================================================
   FINAL TWEAK: Dock 아이콘 그림자 / 도구함만 위로
========================================================= */
.mac-dock-icon {
  filter:
    drop-shadow(0 5px 7px rgba(35, 42, 55, 0.20))
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.35)) !important;
}
.mac-dock-icon.is-main {
  transform: translateY(-3px) !important;
}
.mac-dock-item:hover .mac-dock-icon.is-main {
  transform: translateY(-5px) scale(1.06) !important;
}
/* =========================================================
   FINAL: 바탕화면 아이콘 배경판 제거
   - 독처럼 배경 없이 아이콘 자체만 보이게
   - 히카루 제외 기존 아이콘 전부 적용
========================================================= */
.desk-icon:not(#virusMemeIcon) {
  width: 72px !important;
  padding: 4px 2px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.desk-icon:not(#virusMemeIcon):hover,
.desk-icon:not(#virusMemeIcon).sel,
.desk-icon:not(#virusMemeIcon).selected,
.desk-icon:not(#virusMemeIcon):focus,
.desk-icon:not(#virusMemeIcon):active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.desk-icon:not(#virusMemeIcon) .di-art,
#deskIconArt,
#decoMusicApp,
#decoTrash,
#decoGuestbook {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#deskIconArt,
#decoMusicApp,
#decoTrash,
#decoGuestbook {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 4px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 4px 6px rgba(40, 45, 55, 0.20)) !important;
}
.desk-icon:not(#virusMemeIcon) .di-label {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
}
.desk-icon:not(#virusMemeIcon).sel .di-label,
.desk-icon:not(#virusMemeIcon):hover .di-label {
  background: rgba(255, 255, 255, 0.72) !important;
  border-radius: 6px !important;
  padding: 1px 4px !important;
}
/* =========================================================
   FIX: 히카루 팝업이 화면 전체 클릭 막는 문제 해결
   - 바깥 투명 영역은 클릭 통과
   - 실제 카드만 클릭 가능
========================================================= */
.virus-popup {
  pointer-events: none !important;
}
.virus-popup.show {
  pointer-events: none !important;
}
/* =========================================================
   히카루 창 최소화 상태
   - show는 유지
   - 본문만 숨기고 타이틀바만 남김
   - Dock 아이콘은 유지됨
========================================================= */
.virus-popup-card.virus-minimized .virus-popup-body {
  display: none !important;
}
.virus-popup-card.virus-minimized .virus-popup-bar {
  border-bottom: 0 !important;
}
.virus-popup-card.virus-minimized {
  pointer-events: auto !important;
}
/* =========================================================
   히카루 창 최소화
   - 위치/폭은 JS가 잡은 그대로 유지
   - 신호등 바 위치 안 움직임
========================================================= */
.virus-popup-card.virus-minimized {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   히카루 창 흔들림 반응
========================================================= */
.virus-popup-card.virus-dizzy {
  animation: virusDizzyWobble 0.34s ease-in-out 0s 2;
}
@keyframes virusDizzyWobble {
  0% { rotate: 0deg; }
  20% { rotate: -1.4deg; }
  45% { rotate: 1.6deg; }
  70% { rotate: -1deg; }
  100% { rotate: 0deg; }
}
/* =========================================================
   히카루 바이러스 창 크기 축소
========================================================= */
.virus-popup-card {
  width: 250px !important;
  max-width: calc(100vw - 28px) !important;
}
.virus-popup-bar {
  height: 30px !important;
}
.virus-popup-title {
  font-size: 12px !important;
}
.virus-vn-body,
.virus-popup-body {
  padding: 10px 12px 12px !important;
}
.virus-char-box {
  height: 10px !important;
  min-height: 10px !important;
}
.virus-dialogue-box {
  min-height: 72px !important;
  padding: 10px 34px 10px 12px !important;
}
.virus-dialogue {
  font-size: 12px !important;
  line-height: 1.45 !important;
}
.virus-next-arrow {
  right: 11px !important;
  bottom: 10px !important;
}
/* =========================================================
   히카루 바이러스 창 글씨 / 이름표 / 휴지통 숨김
========================================================= */
.virus-dialogue {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.virus-dialogue-box {
  position: relative !important;
  padding-top: 25px !important;
}
.virus-dialogue {
  margin-top: 0 !important;
}
#trashIcon {
  display: none !important;
}
/* =========================================================
   히카루 대사창 이름표
========================================================= */
.virus-dialogue-box {
  position: relative !important;
  display: block !important;
  padding: 9px 34px 11px 12px !important;
}
.virus-speaker-name {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: rgba(45, 48, 58, 0.62) !important;
  pointer-events: none !important;
}
.virus-dialogue {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
/* =========================================================
   히카루 대사 텍스트 위치 위로 올리기
========================================================= */
.virus-dialogue-box {
  padding-top: 7px !important;
  padding-bottom: 9px !important;
}
.virus-speaker-name {
  margin-bottom: 2px !important;
}
.virus-dialogue {
  margin-top: -1px !important;
}
/* =========================================================
   LINE 첫 안내 팝업
========================================================= */
.hkrk-line-boot-noti .hkrk-line-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: #06c755 !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-indent: 0 !important;
}
.hkrk-line-boot-noti .hkrk-line-name {
  font-weight: 700 !important;
}
/* =========================================================
   LINE 알림센터: 3개 이상이면 스택처럼 접기
========================================================= */
#hkrkNoticeHistoryList {
  position: relative !important;
}
.mac-nc-line-stack {
  position: relative !important;
  cursor: pointer !important;
  margin-bottom: 20px !important;
  padding-bottom: 18px !important;
}
.mac-nc-line-stack::before,
.mac-nc-line-stack::after {
  content: '' !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  height: 72px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.56) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 6px 14px rgba(70, 80, 100, 0.08) !important;
  pointer-events: none !important;
}
.mac-nc-line-stack::before {
  top: 9px !important;
  z-index: 1 !important;
  opacity: 0.72 !important;
}
.mac-nc-line-stack::after {
  top: 18px !important;
  z-index: 0 !important;
  opacity: 0.42 !important;
}
.mac-nc-line-stack > .mac-nc-line-item {
  position: relative !important;
  z-index: 3 !important;
  margin-bottom: 0 !important;
}
.mac-nc-line-stack-count {
  position: absolute !important;
  z-index: 4 !important;
  top: -8px !important;
  left: 44px !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: rgba(45, 48, 56, 0.86) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(40, 45, 55, 0.12) !important;
  pointer-events: none !important;
}
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-item {
  margin-bottom: 7px !important;
}
.mac-nc-line-fold-btn {
  width: 100% !important;
  height: 30px !important;
  margin-top: 4px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.48) !important;
  color: rgba(70, 76, 88, 0.62) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.mac-nc-line-fold-btn:hover {
  background: rgba(255, 255, 255, 0.68) !important;
}
/* =========================================================
   알림센터: 스크롤바 숨김 + 최상단 레이어
========================================================= */
.mac-notification-center {
  z-index: 2147483000 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.mac-notification-center::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
#hkrkNoticeHistoryList,
.mac-nc-line-stack,
.mac-widget-grid {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#hkrkNoticeHistoryList::-webkit-scrollbar,
.mac-nc-line-stack::-webkit-scrollbar,
.mac-widget-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
/* =========================================================
   LINE 알림 펼침 애니메이션
   - 가벼운 opacity + transform만 사용
========================================================= */
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-item {
  animation: hkrkLineExpandIn 0.28s ease-out both;
  will-change: transform, opacity;
}
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-item:nth-child(1) { animation-delay: 0ms; }
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-item:nth-child(2) { animation-delay: 28ms; }
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-item:nth-child(3) { animation-delay: 56ms; }
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-item:nth-child(4) { animation-delay: 84ms; }
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-item:nth-child(5) { animation-delay: 112ms; }
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-item:nth-child(n+6) { animation-delay: 130ms; }
@keyframes hkrkLineExpandIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.mac-nc-line-stack {
  transition: transform 0.16s ease, opacity 0.16s ease !important;
}
.mac-nc-line-stack:active {
  transform: scale(0.985) translateY(1px) !important;
}
#hkrkNoticeHistoryList.is-expanded .mac-nc-line-fold-btn {
  animation: hkrkLineFoldBtnIn 0.22s ease-out both;
  animation-delay: 140ms;
}
@keyframes hkrkLineFoldBtnIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   LINE 섹션 헤더 / X → 모두 지우기 버튼
========================================================= */
.mac-nc-line-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 8px 2px 7px !important;
}
.mac-nc-line-section-head .mac-nc-section-title {
  margin: 0 !important;
}
.mac-nc-line-clear {
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  color: rgba(60, 64, 72, 0.58) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition:
    width 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    transform 0.14s ease,
    opacity 0.14s ease !important;
}
.mac-nc-line-clear:hover {
  background: rgba(255, 255, 255, 0.72) !important;
  color: rgba(45, 48, 56, 0.78) !important;
}
.mac-nc-line-clear:active {
  transform: scale(0.96) !important;
}
.mac-nc-line-clear.is-confirm {
  min-width: 78px !important;
  background: rgba(255, 108, 132, 0.18) !important;
  color: rgba(220, 65, 92, 0.92) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
/* =========================================================
   LINE 알림 접기 애니메이션
========================================================= */
#hkrkNoticeHistoryList.is-collapsing .mac-nc-line-item {
  animation: hkrkLineCollapseOut 0.22s ease-in both !important;
}
#hkrkNoticeHistoryList.is-collapsing .mac-nc-line-item:nth-child(1) { animation-delay: 0ms !important; }
#hkrkNoticeHistoryList.is-collapsing .mac-nc-line-item:nth-child(2) { animation-delay: 16ms !important; }
#hkrkNoticeHistoryList.is-collapsing .mac-nc-line-item:nth-child(3) { animation-delay: 32ms !important; }
#hkrkNoticeHistoryList.is-collapsing .mac-nc-line-item:nth-child(4) { animation-delay: 48ms !important; }
#hkrkNoticeHistoryList.is-collapsing .mac-nc-line-item:nth-child(n+5) { animation-delay: 58ms !important; }
@keyframes hkrkLineCollapseOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
}
#hkrkNoticeHistoryList.is-collapsing .mac-nc-line-fold-btn {
  animation: hkrkLineFoldBtnOut 0.16s ease-in both !important;
}
@keyframes hkrkLineFoldBtnOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}
#hkrkNoticeHistoryList.is-clearing {
  animation: hkrkLineClearAll 0.18s ease-in both !important;
}
@keyframes hkrkLineClearAll {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* =========================================================
   알림센터 X 숨김 / LINE 지우기 버튼 크기 조정
========================================================= */
#macNcClose,
.mac-nc-close {
  display: none !important;
}
.mac-nc-line-clear {
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  font-size: 14px !important;
}
.mac-nc-line-clear.is-confirm {
  min-width: 48px !important;
  height: 22px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}
.hkrk-line-stack {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 2147482999 !important;
  width: min(340px, calc(100vw - 28px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  pointer-events: none !important;
}
.hkrk-line-noti {
  pointer-events: auto !important;
}
.virus-popup {
  z-index: 30;
}
/* =========================================================
   알림센터 얇은 방문자 카운터 카드
========================================================= */
.mac-visitor-card {
  width: calc(100% - 4px) !important;
  min-height: 42px !important;
  margin: 8px 2px 12px !important;
  padding: 9px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    0 10px 24px rgba(60, 70, 90, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
  overflow: hidden !important;
}
.mac-visitor-left {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.mac-visitor-label {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  color: rgba(72, 76, 88, 0.58) !important;
}
.mac-visitor-sub {
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: rgba(88, 92, 104, 0.38) !important;
}
.mac-visitor-count {
  min-width: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: rgba(55, 58, 68, 0.72) !important;
  font-variant-numeric: tabular-nums !important;
}
.mac-visitor-count img {
  display: inline-block !important;
  max-width: 90px !important;
  height: auto !important;
  vertical-align: middle !important;
  image-rendering: auto !important;
}
.mac-visitor-card {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  width: calc(100% - 4px) !important;
  min-height: 42px !important;
  margin: 12px 2px 2px !important;
  padding: 9px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    0 10px 24px rgba(60, 70, 90, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
}
.mac-visitor-count {
  min-width: 74px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.mac-visitor-count img {
  display: inline-block !important;
  max-width: 110px !important;
  height: auto !important;
  vertical-align: middle !important;
}
/* =========================================================
   FC2 방문자 카운터 카드 위치/폭/간격 최종 보정
========================================================= */
.mac-widget-grid > .mac-visitor-card,
.mac-visitor-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow:
    0 10px 24px rgba(60, 70, 90, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}
.mac-widget-grid > .mac-visitor-card {
  margin-top: -2px !important;
}
.mac-visitor-count,
.mac-visitor-count * {
  pointer-events: none !important;
}
.mac-visitor-count {
  min-width: 110px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}
.mac-visitor-count img {
  display: inline-block !important;
  max-width: 120px !important;
  height: auto !important;
  vertical-align: middle !important;
  image-rendering: auto !important;
}
/* =========================================================
   LINE 접기 후 빈 공간 방지
========================================================= */
#hkrkNoticeHistoryBox,
.mac-nc-line-history {
  height: auto !important;
  min-height: 0 !important;
}
#hkrkNoticeHistoryList {
  min-height: 0 !important;
}
#hkrkNoticeHistoryList.is-collapsed {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
}
#hkrkNoticeHistoryList.is-collapsing {
  overflow: hidden !important;
}
/* =========================================================
   TAMAGOTCHI 위젯 위치 보정
   - 다마고치 이미지와 밥주기 문구 간격 정리
========================================================= */
#tamagotchiWidget {
  padding: 13px 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
#tamagotchiWidget .mac-widget-label {
  margin-bottom: 3px !important;
}
#tamagotchiWidget .tama-box {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1px !important;
  text-decoration: none !important;
}
#tamagotchiWidget .tama-img {
  display: block !important;
  width: 76px !important;
  max-width: 82% !important;
  height: auto !important;
  transform: translateY(-2px) !important;
  image-rendering: pixelated !important;
}
#tamagotchiWidget .tama-caption {
  margin-top: -3px !important;
  margin-bottom: 1px !important;
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: rgba(92, 96, 108, 0.48) !important;
}
/* =========================================================
   TAMAGOTCHI 픽셀 깨짐/가로 늘어남 방지
========================================================= */
#tamagotchiWidget .tama-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}
#tamagotchiWidget .tama-img,
#tamagotchiWidget img.tama-img {
  width: auto !important;
  height: 66px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  transform: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}
#tamagotchiWidget .tama-caption {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  color: rgba(92, 96, 108, 0.48) !important;
}
#tamagotchiWidget .tama-box {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  text-decoration: none !important;
}
#tamagotchiWidget .tama-img,
#tamagotchiWidget img.tama-img {
  width: auto !important;
  height: 68px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  transform: none !important;
  image-rendering: auto !important;
}
#tamagotchiWidget .tama-caption {
  display: block !important;
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  color: rgba(92, 96, 108, 0.48) !important;
}
/* =========================================================
   TAMAGOTCHI hover float
   - 마우스 올리면 살짝 떠오르고, 내리면 부드럽게 복귀
========================================================= */
#tamagotchiWidget .tama-box {
  transition:
    transform 0.18s cubic-bezier(.22, 1, .36, 1),
    filter 0.18s ease !important;
  transform: translateY(0) !important;
  will-change: transform !important;
}
#tamagotchiWidget .tama-box:hover {
  transform: translateY(-5px) !important;
  filter: drop-shadow(0 7px 10px rgba(255, 120, 170, 0.22)) !important;
}
#tamagotchiWidget .tama-box:active {
  transform: translateY(-2px) scale(0.98) !important;
}
/* =========================================================
   TAMAGOTCHI hover 수정
   - 이미지만 살짝 떠오름
   - 밥주기 문구는 고정 + 살짝 아래로
========================================================= */
#tamagotchiWidget .tama-box,
#tamagotchiWidget .tama-box:hover,
#tamagotchiWidget .tama-box:active {
  transform: none !important;
  filter: none !important;
}
#tamagotchiWidget .tama-img {
  transition:
    transform 0.18s cubic-bezier(.22, 1, .36, 1),
    filter 0.18s ease !important;
  transform: translateY(0) !important;
  will-change: transform !important;
}
#tamagotchiWidget .tama-box:hover .tama-img {
  transform: translateY(-5px) !important;
  filter: drop-shadow(0 7px 10px rgba(255, 120, 170, 0.22)) !important;
}
#tamagotchiWidget .tama-box:active .tama-img {
  transform: translateY(-2px) scale(0.98) !important;
}
#tamagotchiWidget .tama-caption {
  margin-top: 4px !important;
  transform: none !important;
}
/* =========================================================
   바탕화면 아이콘 원형 프레임
   - 도구함 / 메모 / 방명록 / 뮤직만 적용
   - 히카루, 쓰레기통 제외
========================================================= */
#deskIcon .di-art,
#guestbookIcon .di-art {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.55) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 5px 12px rgba(45, 55, 75, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
#deskIcon .di-art img,
#guestbookIcon .di-art img,
#deskIcon .di-art svg,
#guestbookIcon .di-art svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.deco-icon[data-app="musicApp"] .music-note-mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 30px !important;
  line-height: 1 !important;
}
#virusMemeIcon .di-art,
#trashIcon .di-art {
  border-radius: initial !important;
  overflow: visible !important;
}
/* =========================================================
   FINAL FINAL: 바탕화면 아이콘 원형 마스크
   - 도구함 / 메모 / 방명록 / 뮤직만 적용
   - 히카루 / 쓰레기통 제외
========================================================= */
#deskIcon #deskIconArt,
.desk-icon[data-app="note"] #decoNote,
#guestbookIcon #decoGuestbook,
.desk-icon[data-app="musicApp"] #decoMusicApp {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  clip-path: circle(50% at 50% 50%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 5px 10px rgba(40, 45, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  filter: drop-shadow(0 4px 6px rgba(40, 45, 55, 0.16)) !important;
}
#deskIcon #deskIconArt {
  background: var(--app-icon-toolbox) center / cover no-repeat !important;
}
#guestbookIcon #decoGuestbook {
  background: var(--app-icon-guestbook) center / cover no-repeat !important;
}
.desk-icon[data-app="musicApp"] #decoMusicApp {
  background: var(--app-icon-music) center / cover no-repeat !important;
}
#virusMemeIcon .virus-shortcut-art,
#trashIcon #decoTrash {
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
}
/* =========================================================
   FINAL: Dock 아이콘도 원형 마스크
   - 도구함 / 메모 / 방명록 / 뮤직만 적용
   - 히카루 / 쓰레기통 제외
========================================================= */
.mac-dock-icon.is-main,
.mac-dock-icon.is-guestbook,
.mac-dock-icon.is-music {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  clip-path: circle(50% at 50% 50%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 5px 10px rgba(40, 45, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  filter: drop-shadow(0 4px 6px rgba(40, 45, 55, 0.14)) !important;
}
.mac-dock-icon.is-main::before,
.mac-dock-icon.is-guestbook::before,
.mac-dock-icon.is-music::before {
  content: none !important;
  display: none !important;
}
.mac-dock-icon.is-main {
  background: var(--app-icon-toolbox) center / cover no-repeat transparent !important;
}
.mac-dock-icon.is-guestbook {
  background: var(--app-icon-guestbook) center / cover no-repeat transparent !important;
}
.mac-dock-icon.is-music {
  background: var(--app-icon-music) center / cover no-repeat transparent !important;
}
.mac-dock-icon.is-virus,
.mac-dock-icon.is-trash {
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.mac-dock-icon.is-virus {
  background: var(--app-icon-virus) center / contain no-repeat transparent !important;
}
.mac-dock-icon.is-trash {
  background: var(--app-icon-trash) center / contain no-repeat transparent !important;
}
/* =========================================================
   Dock 아이콘 세로 위치 보정
   - 도구함 / 쓰레기통 제외
   - 뮤직 / 메모 / 방명록 / 히카루만 살짝 위로
========================================================= */
.mac-dock-icon:not(.is-main):not(.is-trash) {
  position: relative !important;
  top: -3px !important;
}
/* =========================================================
   FINAL: 아이콘 그림자 더 부드럽게 퍼지게
   - 바탕화면 / Dock
   - 히카루, 쓰레기통 제외
========================================================= */
#deskIcon #deskIconArt,
.desk-icon[data-app="note"] #decoNote,
#guestbookIcon #decoGuestbook,
.desk-icon[data-app="musicApp"] #decoMusicApp {
  box-shadow:
    0 14px 30px rgba(35, 45, 65, 0.24),
    0 6px 16px rgba(35, 45, 65, 0.14),
    0 2px 5px rgba(35, 45, 65, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  filter:
    drop-shadow(0 12px 18px rgba(35, 45, 65, 0.22))
    drop-shadow(0 4px 8px rgba(35, 45, 65, 0.14)) !important;
}
.mac-dock-icon.is-main,
.mac-dock-icon.is-guestbook,
.mac-dock-icon.is-music {
  box-shadow:
    0 14px 30px rgba(35, 45, 65, 0.24),
    0 6px 16px rgba(35, 45, 65, 0.14),
    0 2px 5px rgba(35, 45, 65, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  filter:
    drop-shadow(0 12px 18px rgba(35, 45, 65, 0.22))
    drop-shadow(0 4px 8px rgba(35, 45, 65, 0.14)) !important;
}
#deskIcon:hover #deskIconArt,
.desk-icon[data-app="note"]:hover #decoNote,
#guestbookIcon:hover #decoGuestbook,
.desk-icon[data-app="musicApp"]:hover #decoMusicApp,
.mac-dock-icon.is-main:hover,
.mac-dock-icon.is-note:hover,
.mac-dock-icon.is-guestbook:hover,
.mac-dock-icon.is-music:hover {
  filter:
    drop-shadow(0 16px 24px rgba(35, 45, 65, 0.24))
    drop-shadow(0 6px 12px rgba(35, 45, 65, 0.14)) !important;
}
#virusMemeIcon .di-art,
#trashIcon .di-art,
.mac-dock-icon.is-virus,
.mac-dock-icon.is-trash {
}
/* =========================================================
   FINAL: 히카루처럼 넓고 부드러운 아이콘 그림자
   - 아이콘 뒤에 별도 블러 그림자 레이어 생성
   - 히카루 / 쓰레기통 제외
========================================================= */
#deskIcon,
.desk-icon[data-app="note"],
#guestbookIcon,
.desk-icon[data-app="musicApp"] {
  position: absolute !important;
}
#deskIcon .di-art,
.desk-icon[data-app="note"] .di-art,
#guestbookIcon .di-art,
.desk-icon[data-app="musicApp"] .di-art {
  position: relative !important;
  z-index: 2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  filter: none !important;
}
#deskIcon::before,
.desk-icon[data-app="note"]::before,
#guestbookIcon::before,
.desk-icon[data-app="musicApp"]::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 13px !important;
  width: 58px !important;
  height: 58px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: rgba(25, 30, 45, 0.30) !important;
  filter: blur(10px) !important;
  opacity: 0.72 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
#deskIcon:hover::before,
.desk-icon[data-app="note"]:hover::before,
#guestbookIcon:hover::before,
.desk-icon[data-app="musicApp"]:hover::before {
  top: 10px !important;
  width: 64px !important;
  height: 64px !important;
  filter: blur(17px) !important;
  opacity: 0.82 !important;
}
/* =========================================================
   아이콘 그림자 최종 조정
   - 더 연하게
   - 그림자 위치 더 위로
========================================================= */
#deskIcon::before,
.desk-icon[data-app="note"]::before,
#guestbookIcon::before,
.desk-icon[data-app="musicApp"]::before {
  top: 6px !important;
  width: 58px !important;
  height: 58px !important;
  background: rgba(25, 30, 45, 0.18) !important;
  filter: blur(10px) !important;
  opacity: 1 !important;
}
#deskIcon:hover::before,
.desk-icon[data-app="note"]:hover::before,
#guestbookIcon:hover::before,
.desk-icon[data-app="musicApp"]:hover::before {
  top: 4px !important;
  width: 62px !important;
  height: 62px !important;
  background: rgba(25, 30, 45, 0.20) !important;
  filter: blur(18px) !important;
  opacity: 0.58 !important;
}
.mac-dock-icon.is-main,
.mac-dock-icon.is-note,
.mac-dock-icon.is-guestbook,
.mac-dock-icon.is-music {
  box-shadow:
    0 10px 24px rgba(25, 30, 45, 0.16),
    0 4px 12px rgba(25, 30, 45, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}
.mac-dock-icon.is-main:hover,
.mac-dock-icon.is-note:hover,
.mac-dock-icon.is-guestbook:hover,
.mac-dock-icon.is-music:hover {
  box-shadow:
    0 14px 30px rgba(25, 30, 45, 0.18),
    0 5px 14px rgba(25, 30, 45, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}
/* =========================================================
   Dock 아이콘 그림자
   - 바탕화면 아이콘 그림자 느낌에 맞춤
   - 히카루 / 쓰레기통 제외
========================================================= */
.mac-dock-icon.is-main,
.mac-dock-icon.is-note,
.mac-dock-icon.is-guestbook,
.mac-dock-icon.is-music {
  box-shadow:
    0 6px 10px rgba(25, 30, 45, 0.22),
    0 2px 5px rgba(25, 30, 45, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}
.mac-dock-icon.is-main:hover,
.mac-dock-icon.is-note:hover,
.mac-dock-icon.is-guestbook:hover,
.mac-dock-icon.is-music:hover {
  box-shadow:
    0 8px 12px rgba(25, 30, 45, 0.25),
    0 3px 6px rgba(25, 30, 45, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}
.mac-dock-icon.is-virus,
.mac-dock-icon.is-trash {
  box-shadow: none !important;
}
/* =========================================================
   FINAL: Dock 아이콘 뒤 블러 그림자 레이어
   - 도구함 / 메모 / 방명록 / 뮤직만
   - 히카루 / 쓰레기통 제외
   - blur 10px, opacity 1 기준
========================================================= */
.mac-dock-item[data-dock-key="main"],
.mac-dock-item[data-dock-key="guestbook"],
.mac-dock-item[data-dock-key="music"] {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.mac-dock-item[data-dock-key="main"]::before,
.mac-dock-item[data-dock-key="guestbook"]::before,
.mac-dock-item[data-dock-key="music"]::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 4px !important;
  width: 46px !important;
  height: 46px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: rgba(25, 30, 45, 0.20) !important;
  filter: blur(10px) !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.mac-dock-item[data-dock-key="main"] .mac-dock-icon,
.mac-dock-item[data-dock-key="guestbook"] .mac-dock-icon,
.mac-dock-item[data-dock-key="music"] .mac-dock-icon {
  position: relative !important;
  z-index: 2 !important;
}
.mac-dock-item[data-dock-key="main"] .mac-dock-dot,
.mac-dock-item[data-dock-key="guestbook"] .mac-dock-dot,
.mac-dock-item[data-dock-key="music"] .mac-dock-dot {
  z-index: 3 !important;
}
/* =========================================================
   바탕화면 아이콘 원형 프레임
   - 도구함 / 메모 / 방명록 / 뮤직만 적용
   - 히카루, 쓰레기통 제외
========================================================= */
#deskIcon .di-art,
.deco-icon[data-app="note"] .di-art,
#guestbookIcon .di-art,
.deco-icon[data-app="musicApp"] .di-art {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.55) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 5px 12px rgba(45, 55, 75, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
.mac-dock-item[data-dock-key="main"]:hover::before,
.mac-dock-item[data-dock-key="guestbook"]:hover::before,
.mac-dock-item[data-dock-key="music"]:hover::before,
.mac-dock-item[data-dock-key="main"].is-hover-locked::before,
.mac-dock-item[data-dock-key="guestbook"].is-hover-locked::before,
.mac-dock-item[data-dock-key="music"].is-hover-locked::before {
  top: 1px !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(25, 30, 45, 0.22) !important;
  filter: blur(10px) !important;
  opacity: 1 !important;
}-dock-key="main"] .mac-dock-dot,
.mac-dock-item[data-dock-key="guestbook"] .mac-dock-dot,
.mac-dock-item[data-dock-key="music"] .mac-dock-dot {
  z-index: 3 !important;
}
/* =========================================================
   바탕화면 아이콘 + 글씨만 살짝 확대
   - Dock 건드리지 않음
   - 히카루 / 쓰레기통 제외
========================================================= */
#deskIcon,
.desk-icon[data-app="note"],
#guestbookIcon,
.desk-icon[data-app="musicApp"] {
  width: 104px !important;
  padding-top: 12px !important;
  padding-bottom: 9px !important;
}
#deskIcon #deskIconArt,
.desk-icon[data-app="note"] #decoNote,
#guestbookIcon #decoGuestbook,
.desk-icon[data-app="musicApp"] #decoMusicApp {
  width: 56px !important;
  height: 56px !important;
}
#deskIcon::before,
.desk-icon[data-app="note"]::before,
#guestbookIcon::before,
.desk-icon[data-app="musicApp"]::before {
  top: 5px !important;
  width: 66px !important;
  height: 66px !important;
  filter: blur(10px) !important;
  opacity: 1 !important;
}
#deskIcon:hover::before,
.desk-icon[data-app="note"]:hover::before,
#guestbookIcon:hover::before,
.desk-icon[data-app="musicApp"]:hover::before {
  top: 3px !important;
  width: 70px !important;
  height: 70px !important;
  filter: blur(10px) !important;
  opacity: 1 !important;
}
#deskIcon .di-label,
.desk-icon[data-app="note"] .di-label,
#guestbookIcon .di-label,
.desk-icon[data-app="musicApp"] .di-label {
  margin-top: 3px !important;
  font-size: 12.5px !important;
  line-height: 1.32 !important;
  padding: 2px 6px !important;
}
#virusMemeIcon,
#trashIcon {
}
/* =========================================================
   바탕화면 앱 아이콘 간격 더더 좁히기
   - 히카루 제외
========================================================= */
#deskIcon {
  top: 26px !important;
  left: 26px !important;
}
#guestbookIcon {
  top: 214px !important;
  left: 26px !important;
}
.desk-icon[data-app="musicApp"] {
  top: 308px !important;
  left: 26px !important;
}
/* =========================================================
   Twitter 바탕화면 아이콘 + 확인창
========================================================= */
:root {
  --app-icon-twitter: url("https://broken-credit-a9c1.28rnm.workers.dev/icon/twt.png");
}
#twitterIcon {
  position: absolute !important;
  top: 402px !important;
  left: 26px !important;
  width: 104px !important;
  padding-top: 12px !important;
  padding-bottom: 9px !important;
  text-align: center !important;
  cursor: default !important;
  z-index: 5 !important;
}
#twitterIcon #decoTwitter {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  clip-path: circle(50% at 50% 50%) !important;
  background: var(--app-icon-twitter) center / cover no-repeat !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  filter: none !important;
}
#twitterIcon::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 5px !important;
  width: 66px !important;
  height: 66px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: rgba(25, 30, 45, 0.18) !important;
  filter: blur(10px) !important;
  opacity: 1 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
#twitterIcon:hover::before {
  top: 3px !important;
  width: 70px !important;
  height: 70px !important;
  background: rgba(25, 30, 45, 0.20) !important;
}
#twitterIcon .di-label {
  margin-top: 3px !important;
  font-size: 12.5px !important;
  line-height: 1.32 !important;
  padding: 2px 6px !important;
}
#twitterYesBtn {
  background: rgba(75, 145, 255, 0.92) !important;
  color: white !important;
}
@keyframes twitterConfirmPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* =========================================================
   방명록 입력/마우스 조작 복구
   - 비로그인 이름 / 비번 / 홈페이지 / 비밀글 표시
   - iframe 안 마우스 클릭/스크롤 가능
========================================================= */
#guestbookAppWin,
#guestbookAppWin .app-body,
#guestbookAppWin .guestbook-frame,
#guestbookFrame,
#guestbookAppWin iframe {
  pointer-events: auto !important;
}
#guestbookAppWin .app-body {
  cursor: auto !important;
}
#guestbookFrame,
#guestbookAppWin iframe {
  user-select: auto !important;
}
body.guestbook-iframe-mode,
body.guestbook-iframe-mode * {
  pointer-events: auto !important;
}
body.guestbook-iframe-mode input,
body.guestbook-iframe-mode textarea,
body.guestbook-iframe-mode button,
body.guestbook-iframe-mode label,
body.guestbook-iframe-mode a {
  pointer-events: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 8px 0 6px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-user-name,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_txt_user,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-input-helper,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label-text {
  display: initial !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write input[name*="name"],
body.guestbook-iframe-mode .gb-body .tt-area-write input[name*="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write input[name*="homepage"] {
  display: inline-flex !important;
  width: 100% !important;
  height: 28px !important;
  padding: 5px 9px !important;
  border: 1.5px solid #f4a8c7 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 11.5px !important;
  font-family: var(--font) !important;
  line-height: 1.2 !important;
  outline: none !important;
  box-shadow: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-name {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write input[type="checkbox"] {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  accent-color: #ff4fa3 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: fit-content !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(40, 40, 45, 0.68) !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt_wrap_write {
  width: 100% !important;
}
body.guestbook-iframe-mode .gb-body .tt_wrap_write {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* =========================================================
   방명록 iframe 안에서는 기본 마우스 커서 보이게
========================================================= */
#guestbookFrame,
#guestbookAppWin iframe {
  cursor: auto !important;
}
body.guestbook-iframe-mode,
body.guestbook-iframe-mode *,
body.guestbook-iframe-mode *:hover {
  cursor: auto !important;
}
body.guestbook-iframe-mode input,
body.guestbook-iframe-mode textarea {
  cursor: text !important;
}
body.guestbook-iframe-mode button,
body.guestbook-iframe-mode a,
body.guestbook-iframe-mode label {
  cursor: pointer !important;
}
body.guestbook-iframe-mode #fakeCursor,
body.guestbook-iframe-mode #trailLayer {
  display: none !important;
  visibility: hidden !important;
}
/* =========================================================
   GUESTBOOK CHAT FINAL - compact + real scroll
   - JS가 .gb-write-login / .gb-write-guest 클래스를 붙임
   - 작성폼은 하단 고정
   - 스크롤은 .tt-comment-cont가 담당
   - 채팅 UI 전체 축소
========================================================= */
body.guestbook-iframe-mode,
body.guestbook-iframe-mode html {
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--gb-bg) !important;
}
body.guestbook-iframe-mode #guestbookSource,
body.guestbook-iframe-mode .gb-wrap,
body.guestbook-iframe-mode .gb-body {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--gb-bg) !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 10px 14px 58px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--gb-bg) !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment,
body.guestbook-iframe-mode .gb-body .tt-comment-cont > ul.tt-list-reply,
body.guestbook-iframe-mode .gb-body .tt-comment-cont > ul.tt-list-reply-comment,
body.guestbook-iframe-mode .gb-body li.tt-item-reply ul.tt-list-reply-comment {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
  list-style: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply::before,
body.guestbook-iframe-mode .gb-body .tt-list-reply::after,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment::before,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment::after,
body.guestbook-iframe-mode .gb-body .tt-item-reply::before,
body.guestbook-iframe-mode .gb-body .tt-item-reply::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body li.tt-item-reply ul.tt-list-reply-comment {
  margin-top: 2px !important;
  padding-left: 0 !important;
}
body.guestbook-iframe-mode .gb-body li.tt-item-reply ul.tt-list-reply-comment > li.tt-item-reply {
  margin-bottom: 3px !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner {
  align-items: stretch !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble > .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner > .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-wrap-cmt {
  align-items: flex-end !important;
}
body.guestbook-iframe-mode .gb-body .tt_desc {
  display: inline-block !important;
  max-width: 72% !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 13px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  background: var(--gb-other, #e9e9eb) !important;
  color: #222 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt_desc,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt_desc {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  background: var(--gb-my, #62e96d) !important;
  color: #fff !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-user-name,
body.guestbook-iframe-mode .gb-body .tt_txt_user {
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,0.65) !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-info {
  margin-top: 3px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  color: var(--gb-meta) !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-mine-bubble .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-owner .tt-box-meta {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt_date,
body.guestbook-iframe-mode .gb-body .tt-link-comment,
body.guestbook-iframe-mode .gb-body .tt-link-comment .tt_txt_g {
  color: var(--gb-meta) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-thumbnail,
body.guestbook-iframe-mode .gb-body .tt_thumb {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 5px 0 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-thumb img,
body.guestbook-iframe-mode .gb-body .tt-thumbnail img,
body.guestbook-iframe-mode .gb-body .tt_thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form {
  position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 6px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 14px 26px !important;
  column-gap: 4px !important;
  row-gap: 4px !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login {
  grid-template-rows: 28px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest {
  grid-template-rows: 25px 28px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-name {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-user-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt_txt_user,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-nickname {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="name"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="password"] {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  flex: 0 0 68px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1.4px solid #f4a8c7 !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-family: var(--font) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write input[name*="homepage"],
body.guestbook-iframe-mode .gb-body .tt-area-write input[name*="url"],
body.guestbook-iframe-mode .gb-body .tt-area-write input[name*="website"] {
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_wrap_write {
  display: contents !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: initial !important;
  gap: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-editor {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-editor {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-cmt,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  resize: none !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1.4px solid #f4a8c7 !important;
  border-radius: 14px !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-family: var(--font) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-secret {
  grid-column: 2 !important;
  grid-row: 2 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-secret {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-secret {
  width: 14px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write input[type="checkbox"] {
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  accent-color: #ff4fa3 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label span,
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label .tt-xe-label-text,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label-text {
  display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-write {
  grid-column: 3 !important;
  grid-row: 2 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-write {
  grid-column: 3 !important;
  grid-row: 1 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-write {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  flex: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--gb-my) !important;
  color: #fff !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"]::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn::before {
  content: '↑' !important;
  display: block !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  transform: translateY(0) !important;
}
/* =========================================================
GUESTBOOK UI SLIGHT SCALE UP
* 방명록 UI 아주 조금만 키우기
* 현재 작아진 상태에서 미세 확대
  ========================================================= */
body.guestbook-iframe-mode .gb-body .tt_desc {
max-width: 74% !important;
padding: 7px 11px !important;
border-radius: 14px !important;
font-size: 11.6px !important;
line-height: 1.4 !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-user-name,
body.guestbook-iframe-mode .gb-body .tt_txt_user {
font-size: 10.6px !important;
line-height: 1.2 !important;
margin-bottom: 3px !important;
}
body.guestbook-iframe-mode .gb-body .tt-wrap-info,
body.guestbook-iframe-mode .gb-body .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-info,
body.guestbook-iframe-mode .gb-body .tt_date,
body.guestbook-iframe-mode .gb-body .tt-link-comment,
body.guestbook-iframe-mode .gb-body .tt-link-comment .tt_txt_g {
font-size: 9.6px !important;
line-height: 1.1 !important;
}
body.guestbook-iframe-mode .gb-body .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-thumbnail,
body.guestbook-iframe-mode .gb-body .tt_thumb {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
margin-right: 6px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply {
margin-bottom: 6px !important;
}
body.guestbook-iframe-mode .gb-body li.tt-item-reply ul.tt-list-reply-comment > li.tt-item-reply {
margin-bottom: 4px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write {
grid-template-columns: minmax(0, 1fr) 15px 27px !important;
column-gap: 5px !important;
row-gap: 5px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login {
grid-template-rows: 29px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest {
grid-template-rows: 26px 29px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="name"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="password"] {
width: 70px !important;
min-width: 70px !important;
max-width: 70px !important;
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
flex: 0 0 70px !important;
font-size: 10.8px !important;
padding: 4px 8px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor {
height: 29px !important;
min-height: 29px !important;
max-height: 29px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-cmt,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor input[type="text"] {
height: 29px !important;
min-height: 29px !important;
max-height: 29px !important;
font-size: 11.4px !important;
padding: 5px 10px !important;
border-radius: 14px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-secret {
width: 15px !important;
height: 29px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write input[type="checkbox"] {
width: 13px !important;
height: 13px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-write {
width: 27px !important;
min-width: 27px !important;
max-width: 27px !important;
height: 27px !important;
min-height: 27px !important;
max-height: 27px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn {
width: 27px !important;
min-width: 27px !important;
max-width: 27px !important;
height: 27px !important;
min-height: 27px !important;
max-height: 27px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"]::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn::before {
font-size: 17px !important;
line-height: 27px !important;
}
/* =========================================================
방명록 방문자 말풍선만 오른쪽으로 이동
* 프사는 그대로
* 회색 꼬리가 프사 침범하지 않게
  ========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_desc {
margin-left: 5px !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-desc {
margin-left: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-wrap-info {
margin-left: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt-user-name,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-guest-bubble .tt_txt_user {
  margin-left: 5px !important;
}
/* =========================================================
   GUESTBOOK WRITE FORM LAYOUT FIX
   - 로그인: 이름 숨김 / 글쓰기 + 비밀글 + 전송 한 줄
   - 비로그인: 이름+비번 위 / 글쓰기 + 비밀글 + 전송 아래
   - 입력창 짤림 방지
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form {
  bottom: 16px !important;
  left: 14px !important;
  right: 14px !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  padding-bottom: 86px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px 32px !important;
  column-gap: 6px !important;
  row-gap: 6px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login {
  grid-template-areas:
    "text secret submit" !important;
  grid-template-rows: 34px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest {
  grid-template-areas:
    "account account account"
    "text secret submit" !important;
  grid-template-rows: 30px 34px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-user-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt_txt_user,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-nickname {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-name {
  grid-area: account !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="name"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="password"] {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 78px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  border: 1.4px solid #f4a8c7 !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-family: var(--font) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor {
  grid-area: text !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-cmt,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  resize: none !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1.4px solid #f4a8c7 !important;
  border-radius: 14px !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-family: var(--font) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-secret {
  grid-area: secret !important;
  width: 18px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  accent-color: #ff4fa3 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-write {
  grid-area: submit !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  flex: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--gb-my) !important;
  color: #fff !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"]::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn::before {
  content: '↑' !important;
  display: block !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 32px !important;
  font-weight: 600 !important;
  transform: translateY(0) !important;
}
/* =========================================================
GUESTBOOK WRITE FORM SMALL FIX
* 기존 compact 최종본은 유지
* 28mm 이름 숨김
* 입력창 / 체크박스 / 전송버튼만 정렬
  ========================================================= */
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form {
bottom: 14px !important;
left: 14px !important;
right: 14px !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
padding-bottom: 72px !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form .tt-user-name,
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form .tt_txt_user,
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form .tt-name,
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form .tt-nickname {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 16px 28px !important;
column-gap: 5px !important;
row-gap: 5px !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login {
grid-template-areas:
"text secret submit" !important;
grid-template-rows: 30px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest {
grid-template-areas:
"account account account"
"text secret submit" !important;
grid-template-rows: 27px 30px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-name {
grid-area: account !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 7px !important;
width: max-content !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="name"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="password"] {
width: 74px !important;
min-width: 74px !important;
max-width: 74px !important;
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
flex: 0 0 74px !important;
margin: 0 !important;
padding: 4px 8px !important;
font-size: 10.8px !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor {
grid-area: text !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
display: block !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-cmt,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor input[type="text"] {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
margin: 0 !important;
padding: 6px 11px !important;
font-size: 11.2px !important;
line-height: 1.25 !important;
box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write label:has(input[type="checkbox"]),
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label:has(input[type="checkbox"]),
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-secret {
grid-area: secret !important;
width: 16px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
place-items: center !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write input[type="checkbox"] {
width: 13px !important;
height: 13px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
accent-color: #ff4fa3 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label span,
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label .tt-xe-label-text,
body.guestbook-iframe-mode .gb-body .tt-area-write label:has(input[type="checkbox"]) span,
body.guestbook-iframe-mode .gb-body .tt-area-write label:has(input[type="checkbox"]) .tt-xe-label-text,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label-text {
display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-write {
grid-area: submit !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn {
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"]::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn::before {
font-size: 18px !important;
line-height: 28px !important;
transform: translateY(0) !important;
}
/* =========================================================
   GUESTBOOK WRITE FORM HARD OVERRIDE
   - 로그인/비로그인 공통: 입력창 왼쪽 끝
   - 전송버튼 오른쪽 끝
   - 비밀글 체크박스는 전송버튼 왼쪽
   - grid 충돌 무시하고 absolute로 강제 배치
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form {
  position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  z-index: 99999 !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  padding-bottom: 76px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login {
  height: 32px !important;
  min-height: 32px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest {
  height: 66px !important;
  min-height: 66px !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form .tt-box-meta,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-user-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt_txt_user,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-name,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login .tt-nickname {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-name {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="name"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest input[name*="password"] {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  flex: 0 0 74px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1.4px solid #f4a8c7 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 10.8px !important;
  line-height: 1.2 !important;
  font-family: var(--font) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_wrap_write {
  display: contents !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor {
  position: absolute !important;
  left: 0 !important;
  right: 54px !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-cmt,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-textarea input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-content input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-editor input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  margin: 0 !important;
  padding: 6px 11px !important;
  resize: none !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1.4px solid #f4a8c7 !important;
  border-radius: 14px !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 11.2px !important;
  line-height: 1.25 !important;
  font-family: var(--font) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write label:has(input[type="checkbox"]),
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-xe-label:has(input[type="checkbox"]),
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-secret {
  position: absolute !important;
  right: 34px !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  width: 16px !important;
  height: 31px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-box-write {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"],
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn {
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--gb-my) !important;
  color: #fff !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn_register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write button[type="submit"]::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt-btn-register::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .tt_btn_write::before,
body.guestbook-iframe-mode .gb-body .tt-area-write .write_btn::before {
  content: '↑' !important;
  color: #fff !important;
  font-size: 19px !important;
  line-height: 31px !important;
  font-weight: 600 !important;
  transform: translateY(0) !important;
}
/* =========================================================
   비로그인 방명록 이름/비밀번호 줄만 위로 올리기
   - 로그인 상태는 건드리지 않음
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest {
  height: 76px !important;
  min-height: 76px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-name {
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  transform: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  padding-bottom: 92px !important;
}
/* =========================================================
   GUESTBOOK GUEST ACCOUNT ROW FORCE UP
   - 로그인 작성폼은 그대로
   - 비로그인 이름/비번 줄만 입력창 위로 강제 이동
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) {
  position: relative !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-name,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-account,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-wrap-account,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-name {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 39px !important;
  width: auto !important;
  max-width: calc(100% - 54px) !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-account input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-account input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-wrap-account input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-wrap-account input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-name input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-name input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-account input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-account input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-wrap-account input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-wrap-account input[type="password"],
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-name input[type="text"],
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-name input[type="password"] {
  display: inline-flex !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  flex: 0 0 74px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1.4px solid #f4a8c7 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 10.8px !important;
  line-height: 1.2 !important;
  font-family: var(--font) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-editor,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-textarea,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-editor {
  bottom: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest label:has(input[type="checkbox"]),
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-xe-label:has(input[type="checkbox"]),
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-xe-label.gb-secret-label,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) label:has(input[type="checkbox"]),
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-xe-label:has(input[type="checkbox"]),
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .secret,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-secret,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-guest .tt-box-write,
body.guestbook-iframe-mode .gb-body .tt-area-write:has(input[type="password"]) .tt-box-write {
  bottom: 0 !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  padding-bottom: 98px !important;
}
/* =========================================================
   GUESTBOOK BOTTOM WHITE PANEL FINAL v2
   - 메시지 위에 흰 하단 박스/그라데이션
   - 입력창/체크박스/전송버튼은 무조건 그 위
   - tt-comment-cont를 낮은 z-index로 가두지 않음
========================================================= */
body.guestbook-iframe-mode {
  position: relative !important;
}
body.guestbook-iframe-mode::after {
  content: '' !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 86px !important;
  background: #fff !important;
  z-index: 8000 !important;
  pointer-events: none !important;
}
body.guestbook-iframe-mode::before {
  content: '' !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 86px !important;
  height: 44px !important;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.74) 36%,
    rgba(255,255,255,0.34) 72%,
    rgba(255,255,255,0) 100%
  ) !important;
  z-index: 7999 !important;
  pointer-events: none !important;
}
body.guestbook-iframe-mode .gb-body,
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  position: relative !important;
  z-index: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-list-reply,
body.guestbook-iframe-mode .gb-body .tt-list-reply-comment,
body.guestbook-iframe-mode .gb-body .tt-item-reply,
body.guestbook-iframe-mode .gb-body .tt-wrap-cmt {
  position: relative !important;
  z-index: 1 !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont > form {
  position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  z-index: 20000 !important;
  pointer-events: auto !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write,
body.guestbook-iframe-mode .gb-body .tt-area-write * {
  z-index: 20001 !important;
}
body.guestbook-iframe-mode .gb-body .tt-comment-cont {
  padding-bottom: 112px !important;
}
/* =========================================================
   로그인 상태 방명록 하단 흰 박스 / 여백 축소
   - 로그인 상태(이름/비번 없는 1줄 폼)만 적용
========================================================= */
body.guestbook-iframe-mode:has(.tt-area-write.gb-write-login)::after {
  height: 40px !important;
}
body.guestbook-iframe-mode:has(.tt-area-write.gb-write-login)::before {
  bottom: 66px !important;
  height: 30px !important;
}
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login,
body.guestbook-iframe-mode .gb-body .tt-area-write.gb-write-login + * {
  z-index: 10001 !important;
}
body.guestbook-iframe-mode:has(.tt-area-write.gb-write-login) .gb-body .tt-comment-cont > form {
  bottom: 10px !important;
}
body.guestbook-iframe-mode:has(.tt-area-write.gb-write-login) .gb-body .tt-comment-cont {
  padding-bottom: 50px !important;
}
/* =========================================================
   로그인/비로그인 하단 흰 박스 높이 분리
   - JS가 body에 gb-mode-login / gb-mode-guest 붙임
========================================================= */
body.guestbook-iframe-mode::after {
  height: 86px !important;
}
body.guestbook-iframe-mode::before {
  bottom: 86px !important;
  height: 44px !important;
}
body.guestbook-iframe-mode.gb-mode-login::after {
  height: 50px !important;
}
body.guestbook-iframe-mode.gb-mode-login::before {
  bottom: 50px !important;
  height: 18px !important;
}
body.guestbook-iframe-mode.gb-mode-login .gb-body .tt-comment-cont {
  padding-bottom: 64px !important;
}
body.guestbook-iframe-mode.gb-mode-login .gb-body .tt-comment-cont > form {
  bottom: 10px !important;
}
body.guestbook-iframe-mode.gb-mode-guest::after {
  height: 86px !important;
}
body.guestbook-iframe-mode.gb-mode-guest::before {
  bottom: 86px !important;
  height: 44px !important;
}
body.guestbook-iframe-mode.gb-mode-guest .gb-body .tt-comment-cont {
  padding-bottom: 112px !important;
}
/* =========================================================
   도구함 왼쪽 사이드바 폭 줄이기
========================================================= */
.explorer .sidebar,
.explorer .sidebar-glass {
  width: 150px !important;
}
.explorer .sidebar {
  padding-left: 8px !important;
  padding-right: 7px !important;
}
.explorer .sidebar .side-item,
.explorer .sidebar .cat-box a {
  padding-left: 7px !important;
  padding-right: 7px !important;
}
/* =========================================================
   메인 홈 전용 추가 영역
========================================================= */
body:not(#tt-body-index) .home-only-extra {
  display: none !important;
}
/* =========================================================
   메인 추가 영역: 왼쪽 포털 슬라이드
========================================================= */
.portal-slide-slot {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: var(--side);
}
.portal-slide-slot .cover-slide {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  box-shadow: none !important;
}
.portal-slide-slot .cover-slide::after {
  display: none !important;
}
.portal-slide-slot .cslide-dots {
  bottom: 10px;
}
.portal-slide-slot,
.portal-slide-slot .cover-slide,
.portal-slide-slot .cslide-track,
.portal-slide-slot .cslide,
.portal-slide-slot .file-thumb{
  border-radius: 13px !important;
  overflow: hidden !important;
}
.portal-slide-slot .cslide {
  cursor: pointer;
}
.home-only-extra > tbody > tr > td:first-child > table {
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.home-only-extra > tbody > tr > td:first-child > table:hover {
  transform: translateY(-3px);
  border-color: var(--sky-l) !important;
  box-shadow: 0 12px 30px rgba(120,120,150,0.16) !important;
}
.home-only-extra table[border="1"] {
  border: 1px solid var(--line2) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.58) !important;
  box-shadow: 0 8px 24px rgba(120,120,140,0.10) !important;
}
.home-only-extra table[border="1"] td {
  border: 0 !important;
}
/* 현재 HTML 기준:
   <button class="music-lyrics-btn music-lyrics-top" id="musicLyricsBtn" ...>
*/
#musicAppWin .music-mini-card {
  position: relative !important;
}
#musicAppWin .music-info {
  position: static !important;
  padding-right: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
}
#musicAppWin .music-song-title,
#musicAppWin .music-song-artist {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
}
#musicAppWin .music-mini-card {
  position: relative !important;
  overflow: visible !important;
}
#musicAppWin .music-info {
  position: static !important;
  padding-right: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
#musicAppWin #musicLyricsBtn.music-lyrics-top {
  position: absolute !important;
  top: -10px !important;
  right: 40px !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 20px !important;
  min-width: 42px !important;
  min-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-align: center !important;
  color: rgba(45, 40, 50, 0.78) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 6px rgba(0,0,0,0.06) !important;
  cursor: pointer !important;
  transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#musicAppWin #musicLyricsBtn.music-lyrics-top:hover {
  background: rgba(255, 255, 255, 0.66) !important;
  color: rgba(20, 18, 24, 0.94) !important;
  transform: none !important;
}
#musicAppWin #musicLyricsBtn.music-lyrics-top:disabled {
  opacity: 0.38 !important;
  cursor: default !important;
  transform: none !important;
}
#musicAppWin .music-dynamic-bg,
#musicAppWin .music-dynamic-overlay {
  pointer-events: none !important;
}
.portal-copy-toast {
  position: fixed;
  left: 50%;
  bottom: 95px;
  transform: translateX(-50%) translateY(10px);
  z-index: 999999;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  border: 0;
  outline: 0;
  box-shadow: 0 8px 20px rgba(120,100,130,0.16);
  color: #4a4651;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.portal-copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body#tt-body-index .home-only-extra {
  margin-top: 4px !important;
}
/* =========================================================
   포털 슬라이드: hover 좌우 화살표
========================================================= */
#portalSlideSlot [data-cover-slide] {
  position: relative !important;
}
/* =========================================================
   포털 슬라이드: hover 좌우 화살표 — 맥 유리 버튼
========================================================= */
#portalSlideSlot .portal-slide-arrow {
  position: absolute !important;
  top: 50% !important;
  z-index: 60 !important;
  width: 24px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.48) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    0 5px 14px rgba(130, 120, 150, 0.14) !important;
  font-family: var(--font) !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: rgba(120, 112, 132, 0.72) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.96) !important;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease;
}
#portalSlideSlot:hover .portal-slide-arrow {
  opacity: 1 !important;
  pointer-events: auto !important;
}
#portalSlideSlot .portal-slide-arrow:hover {
  color: var(--pink-d) !important;
  background: rgba(255, 255, 255, 0.68) !important;
  border-color: rgba(255, 179, 202, 0.7) !important;
  transform: translateY(-50%) scale(1.06) !important;
}
#portalSlideSlot .portal-slide-prev {
  left: 6px !important;
  padding-right: 2px !important;
}
#portalSlideSlot .portal-slide-next {
  right: 6px !important;
  padding-left: 2px !important;
}
/* =========================================================
   FINAL: Dock 하단 고정 + 위쪽만 라운드
   - 아래 모서리 라운드 제거
   - 사이트 하단에 딱 붙임
========================================================= */
.mac-dock-wrap {
  bottom: 0 !important;
  height: 74px !important;
  z-index: 90 !important;
}
.mac-dock {
  bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  border-bottom: 0 !important;
  box-shadow:
    0 -2px 16px rgba(70, 80, 100, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}
.mac-dock-apps {
  padding-bottom: 4px !important;
}
.mac-dock-separator {
  transform: translateY(-3px) !important;
}
.mac-dock-wrap {
  bottom: -4px !important;
}
.mac-dock {
  bottom: -4px !important;
}
.post-body,
.post-title,
.post-meta,
.post-tags,
.post-comments {
  user-select: text;
}
::selection {
  background: rgba(255, 150, 182, 0.55);
  color: #4a2f3c;
}
::-moz-selection {
  background: rgba(255, 150, 182, 0.55);
  color: #4a2f3c;
}
::selection {
  background: rgba(255, 218, 232, 0.72);
  color: #5a3445;
}
::-moz-selection {
  background: rgba(255, 218, 232, 0.72);
  color: #5a3445;
}
/* =========================================================
   FINAL: Dock 말풍선 + 홈 SD 캐릭터 말풍선 정리본
========================================================= */
/* =========================================================
   1) 홈 SD 아이콘: 핑크 네모/테두리 제거
   - 마우스오버 시 캐릭터만 떠오르게
========================================================= */
body#tt-body-index .cover-area .icon-grid .file,
body#tt-body-index .cover-area .icon-grid .file:hover,
body#tt-body-index .cover-area .icon-grid .file:focus,
body#tt-body-index .cover-area .icon-grid .file.active,
body#tt-body-index .cover-area .icon-grid .file.on,
body#tt-body-index .cover-area .icon-grid .file.selected {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body#tt-body-index .cover-area .icon-grid .file-ic,
body#tt-body-index .cover-area .icon-grid .file:hover .file-ic,
body#tt-body-index .cover-area .icon-grid .file:focus .file-ic,
body#tt-body-index .cover-area .icon-grid .file.selected .file-ic {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body#tt-body-index .cover-area .icon-grid .file-thumb,
body#tt-body-index .cover-area .icon-grid .file-ic img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body#tt-body-index .cover-area .icon-grid .file:hover .file-ic {
  transform: translateY(-3px) !important;
}
/* =========================================================
   2) 홈 SD 캐릭터 말풍선
   - 짙은 회색
   - 흰 글씨
   - 테두리 없음
   - 삼각형 꼬리
========================================================= */
body#tt-body-index .cover-area,
body#tt-body-index .cover-area .cover-block,
body#tt-body-index .cover-area .icon-grid,
body#tt-body-index .cover-area .icon-grid .file {
  overflow: visible !important;
}
body#tt-body-index .cover-area,
body#tt-body-index .cover-area .cover-block,
body#tt-body-index .cover-area .icon-grid {
  position: relative !important;
  z-index: 20 !important;
}
body#tt-body-index .cover-area .icon-grid .file {
  position: relative !important;
}
body#tt-body-index .cover-area .icon-grid .file:hover {
  z-index: 9999 !important;
}
body#tt-body-index .cover-area .icon-grid .file[data-speech]::before {
  content: attr(data-speech) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 9px) !important;
  z-index: 10000 !important;
  min-width: 68px !important;
  max-width: 116px !important;
  padding: 4px 8px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 6px !important;
  background: rgb(122, 122, 126) !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 5px 12px rgba(50, 50, 60, 0.16) !important;
  font-family: var(--font) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  white-space: pre-line !important;
  word-break: keep-all !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(5px) scale(0.98) !important;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}
body#tt-body-index .cover-area .icon-grid .file[data-speech]::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 3px) !important;
  z-index: 9999 !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid rgb(122, 122, 126) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(5px) !important;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}
body#tt-body-index .cover-area .icon-grid .file[data-speech]:hover::before {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}
body#tt-body-index .cover-area .icon-grid .file[data-speech]:hover::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
/* =========================================================
   3) Dock 말풍선
   - 모든 창 위로
   - 불투명 흰색
   - 테두리 없음
   - 꼬리 붙임
========================================================= */
.mac-dock-wrap {
  z-index: 2147483000 !important;
  overflow: visible !important;
}
.mac-dock,
.mac-dock-apps,
.mac-dock-item {
  overflow: visible !important;
}
.mac-dock-item {
  position: relative !important;
}
.mac-dock-label {
  position: absolute !important;
  left: 50% !important;
  bottom: 72px !important;
  z-index: 2147483001 !important;
  padding: 4px 8px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 8px !important;
  background: rgb(255, 255, 255) !important;
  color: rgba(70, 70, 78, 0.92) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 5px 12px rgba(70, 80, 95, 0.12) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  transform: translateX(-50%) translateY(4px) !important;
}
.mac-dock-label::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -4px !important;
  width: 9px !important;
  height: 9px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  background: rgb(255, 255, 255) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}
/* =========================================================
   게시글/갤러리 썸네일 화질 복구
   - 일반 일러스트에는 pixelated 금지
========================================================= */
.postlist .file-thumb,
.postlist .file-ic img,
.postlist.view-gallery .file-thumb,
.postlist.view-photo .file-thumb,
.postlist.view-card .file-thumb,
.postlist.view-magazine .file-thumb,
.list-wrap .postlist .file-thumb,
.list-wrap .postlist .file-ic img,
.idx-grid.postlist .file-thumb,
.idx-grid.postlist .file-ic img,
.chscroll .file-thumb,
.chscroll .file-ic img,
.cover-slide .file-thumb,
.cslide .file-thumb {
  image-rendering: auto !important;
  image-rendering: smooth !important;
}
/* =========================================================
   MAIN WINDOW ONLY: mac sidebar-top layout v3
   - 왼쪽 사이드바는 창 맨 위까지
   - 신호등 버튼은 사이드바 위
   - 오른쪽 본문 위에만 뒤로/앞으로/이름/검색
========================================================= */
#mainWin {
  border-radius: 13px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden !important;
}
#mainWin.has-pop-inner > .window-pop-inner {
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#mainWin .titlebar {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 112px !important;
  height: 43px !important;
min-height: 43px !important;
  z-index: 6 !important;
  padding: 0 0 0 16px !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#mainWin .titlebar .tb-title,
#mainWin .titlebar .tb-spacer {
  display: none !important;
}
#mainWin .titlebar .traffic {
  gap: 8px !important;
  margin: 0 !important;
}
#mainWin .titlebar .traffic i {
  width: 12px !important;
  height: 12px !important;
}
#mainWin .toolbar {
  position: absolute !important;
  left: 158px !important;
  right: 0 !important;
  top: 0 !important;
  height: 48px !important;
min-height: 48px !important;
  z-index: 7 !important;
padding: 0 16px 0 0 !important;
  display: flex !important;
  align-items: center !important;
gap: 2px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.055) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
}
#mainWin .toolbar .nav-btn {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(80, 82, 88, 0.36) !important;
}
#mainWin .toolbar .nav-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.8 !important;
}
#mainWin .toolbar .nav-btn.active:hover {
  background: rgba(0, 0, 0, 0.045) !important;
  color: rgba(20, 22, 26, 0.86) !important;
}
#mainWin .toolbar .addressbar {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 34px !important;
padding: 0 !important;
margin-left: -2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: rgba(20, 22, 26, 0.78) !important;
}
#mainWin .toolbar .addressbar .hideable {
  display: none !important;
}
#mainWin .toolbar .addressbar .sep {
  color: rgba(20, 22, 26, 0.28) !important;
  font-size: 15px !important;
}
#mainWin .toolbar .addressbar .crumb,
#mainWin .toolbar .addressbar .here {
  color: rgba(20, 22, 26, 0.72) !important;
}
#mainWin .toolbar .side-toggle {
  display: none !important;
}
#mainWin .toolbar .searchbox {
  flex: 0 0 124px !important;
  width: 124px !important;
  height: 30px !important;
  padding: 0 9px !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(20, 22, 26, 0.18) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
#mainWin .toolbar .searchbox svg {
  width: 14px !important;
  height: 14px !important;
  color: rgba(20, 22, 26, 0.62) !important;
}
#mainWin .toolbar .searchbox input {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(20, 22, 26, 0.72) !important;
}
#mainWin .toolbar .searchbox input::placeholder {
  color: rgba(20, 22, 26, 0.5) !important;
}
#mainWin .body {
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}
#mainWin .sidebar {
  padding-top: 60px !important;
}
#mainWin .sidebar-glass {
  top: 0 !important;
  bottom: 0 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.10) !important;
}
#mainWin .content {
  padding-top: 60px !important;
}
#mainWin.collapsed .titlebar {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  background: rgba(247, 247, 248, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
#mainWin.collapsed .titlebar .tb-title,
#mainWin.collapsed .titlebar .tb-spacer {
  display: flex !important;
}
#mainWin.collapsed .toolbar {
  display: none !important;
}
#mainWin .toolbar .nav-btn:first-of-type {
  margin-left: -4px !important;
}
#mainWin .toolbar .addressbar .crumb-part {
  display: inline-block !important;
}
#mainWin .toolbar .addressbar .crumb-inner-sep {
  display: inline-block !important;
  margin: 0 6px !important;
  color: rgba(20, 22, 26, 0.34) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#mainWin .toolbar .addressbar .crumb-count {
  display: inline-block !important;
  margin-left: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(20, 22, 26, 0.34) !important;
  transform: translateY(-1px);
}
/* 목록 상단의 cms/RK · 글 15개 텍스트만 숨김
   흰색 여백과 보기 전환 버튼은 그대로 둠 */
#mainWin .list-wrap > .content-head h2,
#mainWin .list-wrap > .content-head .sub {
  visibility: hidden !important;
}
/* =========================================================
   MAIN WINDOW breadcrumb compact
   - win... 처럼 글자 말줄임 금지
   - 좁아지면 왼쪽 경로부터 통째로 숨김
========================================================= */
#mainWin .toolbar .addressbar {
  container-type: inline-size !important;
  container-name: mainCrumb !important;
}
#mainWin .toolbar .addressbar .crumb,
#mainWin .toolbar .addressbar .here,
#mainWin .toolbar .addressbar .crumb-part,
#mainWin .toolbar .addressbar .crumb-inner-sep,
#mainWin .toolbar .addressbar .crumb-count {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}
#mainWin .toolbar .addressbar #crumbMid {
  flex: 0 0 auto !important;
  min-width: auto !important;
}
#mainWin .toolbar .addressbar #crumbHere {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#mainWin .toolbar .addressbar::before {
  content: '…';
  display: none;
  flex: 0 0 auto;
  margin-right: 7px;
  color: rgba(20, 22, 26, 0.28);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
@container mainCrumb (max-width: 260px) {
  #mainWin .toolbar .addressbar::before {
    display: inline-block !important;
  }
  #mainWin .toolbar .addressbar #crumbMid,
  #mainWin .toolbar .addressbar #crumbMid + .sep {
    display: none !important;
  }
}
@container mainCrumb (max-width: 200px) {
  #mainWin .toolbar .addressbar #crumbHere .crumb-part:first-child,
  #mainWin .toolbar .addressbar #crumbHere .crumb-part:first-child + .crumb-inner-sep {
    display: none !important;
  }
}
@container mainCrumb (max-width: 150px) {
  #mainWin .toolbar .addressbar #crumbHere .crumb-part:nth-of-type(3),
  #mainWin .toolbar .addressbar #crumbHere .crumb-part:nth-of-type(3) + .crumb-inner-sep {
    display: none !important;
  }
}
@container mainCrumb (max-width: 130px) {
  #mainWin .toolbar .addressbar .crumb-count {
    display: none !important;
  }
}
/* =========================================================
   PATCH: mainWin topbar drag area
   - 메인창 상단 전체를 드래그 가능하게
   - 뒤/앞 버튼, 검색창은 클릭 가능 유지
========================================================= */
#mainWin .titlebar {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  z-index: 6 !important;
  pointer-events: auto !important;
}
#mainWin .toolbar {
  z-index: 7 !important;
  pointer-events: none !important;
}
#mainWin .toolbar .nav-btn,
#mainWin .toolbar .searchbox,
#mainWin .toolbar .searchbox *,
#mainWin .toolbar button,
#mainWin .toolbar input {
  pointer-events: auto !important;
}
#mainWin .toolbar .addressbar,
#mainWin .toolbar .addressbar * {
  pointer-events: none !important;
}
#mainWin .toolbar .addressbar a.crumb-link,
#mainWin .toolbar .addressbar a#crumbMid {
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
}
#mainWin .toolbar .addressbar a.crumb-link:hover,
#mainWin .toolbar .addressbar a#crumbMid:hover {
  color: rgba(20, 22, 26, 0.95) !important;
}
/* =========================================================
   BOOT VEIL
   - 새로고침 때 코드/기본 배경 번쩍임 가리기
========================================================= */
#bootVeil {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: block;
  pointer-events: none !important;
  background-color: var(--boot-bg, var(--desktop-bg, #e6f1fb)) !important;
  background-image: var(--boot-bg-image, none) !important;
  background-size: var(--boot-bg-size, cover) !important;
  background-repeat: var(--boot-bg-repeat, no-repeat) !important;
  background-position: var(--boot-bg-position, center) !important;
  opacity: 1;
  transition: opacity 0.22s ease;
}
html.skin-ready #bootVeil {
  opacity: 0;
}
.content .file-ic:has(.file-thumb) .file-doc {
  display: none !important;
}
.content .file-ic:has(.file-thumb) {
  background-color: #fff !important;
  background-image:
  linear-gradient(45deg, #eeeeee 25%, transparent 25%),
  linear-gradient(-45deg, #eeeeee 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #eeeeee 75%),
  linear-gradient(-45deg, transparent 75%, #eeeeee 75%) !important;
background-size: 20px 20px !important;
background-position:
  0 0,
  0 10px,
  10px -10px,
  -10px 0px !important;
}
.content .file .file-ext {
  display: none !important;
}
#portalSlideSlot,
#portalSlideSlot .cover-slide,
#portalSlideSlot .cslide,
#portalSlideSlot .cslide-bg {
  background-color: #fff !important;
  background-image:
  linear-gradient(45deg, #eeeeee 25%, transparent 25%),
  linear-gradient(-45deg, #eeeeee 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #eeeeee 75%),
  linear-gradient(-45deg, transparent 75%, #eeeeee 75%) !important;
background-size: 20px 20px !important;
background-position:
  0 0,
  0 10px,
  10px -10px,
  -10px 0px !important;
}
.content .file-ic:has(.file-thumb) .file-thumb,
#portalSlideSlot img,
#portalSlideSlot .file-thumb{
  filter: drop-shadow(0 5px 4px rgba(70, 60, 80, 0.18)) !important;
}
#mainWin .idx-grid.postlist {
  margin-bottom: 14px !important;
}
#mainWin .idx-grid.postlist .file {
  padding-bottom: 10px !important;
}
#mainWin .home-only-extra {
  margin-top: 16px !important;
}
#guestbookIcon {
  top: 120px !important;
  left: 26px !important;
}
.desk-icon[data-app="musicApp"] {
  top: 214px !important;
  left: 26px !important;
}
#twitterIcon {
  top: 308px !important;
  left: 26px !important;
}
.finder-tag-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 8px 0 10px !important;
  padding: 0 9px !important;
}
.finder-tag-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 24px !important;
  padding: 3px 7px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(50, 52, 58, 0.86) !important;
  text-decoration: none !important;
}
.finder-tag-item:hover {
  background: rgba(255, 255, 255, 0.58) !important;
}
.finder-tag-dot {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
  box-shadow: none !important;
}
.finder-tag-item.tag-hkr .finder-tag-dot {
  background: #40484f !important;
}
.finder-tag-item.tag-rk .finder-tag-dot {
  background: #ffb3ca !important;
}
.finder-tag-item.tag-pm .finder-tag-dot {
  background: #5d9cff !important;
}
.finder-tag-item.tag-gm .finder-tag-dot {
  background: #ff6fbd !important;
}
#mainWin .sidebar #navTaglog {
  display: block !important;
  margin-top: 22px !important;
  margin-bottom: 8px !important;
  padding: 0 9px !important;
  min-height: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  color: var(--ink-faint) !important;
  cursor: default !important;
  pointer-events: none !important;
}
#mainWin .sidebar #navTaglog svg {
  display: none !important;
}
#mainWin .sidebar #navTaglog:hover {
  background: transparent !important;
  color: var(--ink-faint) !important;
}
#mainWin .sidebar .finder-tag-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 0 12px !important;
  padding: 0 9px !important;
}
#mainWin .sidebar .finder-tag-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 22px !important;
  padding: 2px 7px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(50, 52, 58, 0.86) !important;
  text-decoration: none !important;
}
#mainWin .sidebar .finder-tag-item:hover {
  background: rgba(255, 255, 255, 0.58) !important;
}
#mainWin .sidebar .finder-tag-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}
#mainWin .sidebar #navTaglog {
  color: rgba(70, 74, 82, 0.62) !important;
  opacity: 1 !important;
}
#mainWin .sidebar #navTaglog:hover {
  color: rgba(70, 74, 82, 0.62) !important;
}
#mainWin .sidebar #homeLink > svg {
  display: none !important;
}
#mainWin .sidebar #homeLink {
  position: relative !important;
  padding-left: 30px !important;
}
#mainWin .sidebar #homeLink::before {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-58%) !important;
  width: 16px !important;
  height: 16px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='none' stroke='%23535a61' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 3.8l2.1 4.3c.2.5.7.8 1.2.9l4.8.7-3.5 3.4c-.4.4-.5.9-.4 1.4l.8 4.8-4.3-2.3c-.5-.2-1-.2-1.5 0l-4.3 2.3.8-4.8c.1-.5-.1-1-.4-1.4L3.9 9.7l4.8-.7c.5-.1 1-.4 1.2-.9L12 3.8z'/>\
</svg>") !important;
}
#mainWin .sidebar .finder-tag-list {
  padding: 0 9px !important;
  margin: 0 0 12px !important;
  gap: 4px !important;
}
#mainWin .sidebar .finder-tag-item {
  padding: 2px 0 !important;
  gap: 14px !important;
  min-height: 22px !important;
  font-weight: 550 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}
#mainWin .sidebar .finder-tag-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  margin-left: 0 !important;
  transform: translateX(5px) !important;
  box-shadow: none !important;
}
/* =========================================================
   PATCH: gallery / photo 보기 정리본
   - gallery: Finder 미리보기식 사진 프레임
   - 3열 고정
   - 제목/글수는 숨기고 정렬 버튼만 유지
   - 좁은 창에서는 썸네일/글씨 간격 압축
========================================================= */
/* =========================================================
   1. 보기 버튼 정리
========================================================= */
#mainWin .view-switch .vsw[data-view="card"],
#mainWin .view-switch .vsw[data-view="magazine"],
#mainWin .view-switch .vsw[data-view="list"],
#mainWin .view-switch .vsw[data-view="compact"] {
  display: none !important;
}
/* =========================================================
   2. 페이지별 목록 중복 방지
========================================================= */
body#tt-body-category #mainWin .idx-grid.postlist,
body#tt-body-tag #mainWin .idx-grid.postlist,
body#tt-body-search #mainWin .idx-grid.postlist,
body#tt-body-archive #mainWin .idx-grid.postlist {
  display: none !important;
}
body#tt-body-index #mainWin .list-wrap,
body#tt-body-page #mainWin .list-wrap {
  display: none !important;
}
/* =========================================================
   3. gallery 상단줄
   - window xp / 최근 항목 / 글 n개 숨김
   - 정렬 버튼만 오른쪽에 유지
========================================================= */
#mainWin .content:has(.postlist.view-gallery) {
  container-type: inline-size;
  container-name: galleryContent;
  padding: 8px 18px 18px !important;
}
#mainWin .content:has(.postlist.view-gallery) .content-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 0 6px !important;
  padding: 0 8px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}
#mainWin .content:has(.postlist.view-gallery) .content-head h2,
#mainWin .content:has(.postlist.view-gallery) .content-head .sub {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#mainWin .content:has(.postlist.view-gallery) .view-switch {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  top: 3px !important;
  left: 8px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 20 !important;
}
/* =========================================================
   4. gallery = Finder 미리보기
========================================================= */
#mainWin .content .postlist.view-gallery {
  --thumb-frame-size: 6px;
  --thumb-area-height: 220px;
  --thumb-img-max-height: 202px;
  --file-name-row: 30px;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px 8px !important;
  align-content: start !important;
  padding: 4px 8px 16px !important;
  margin: 0 !important;
  overflow: visible !important;
}
#mainWin .content .postlist.view-gallery .file,
#mainWin .content .postlist.view-gallery .file:hover {
  display: grid !important;
  grid-template-rows: var(--thumb-area-height) var(--file-name-row) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  height: calc(var(--thumb-area-height) + var(--file-name-row)) !important;
  min-height: calc(var(--thumb-area-height) + var(--file-name-row)) !important;
  max-height: calc(var(--thumb-area-height) + var(--file-name-row)) !important;
  align-items: stretch !important;
  justify-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}
#mainWin .content .postlist.view-gallery .file-ic,
#mainWin .content .postlist.view-gallery .file-ic:has(.file-thumb),
#mainWin .content .postlist.view-gallery .file:hover .file-ic,
#mainWin .content .postlist.view-gallery .file:hover .file-ic:has(.file-thumb) {
  grid-row: 1 !important;
  grid-column: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  place-items: center !important;
  width: 100% !important;
  height: var(--thumb-area-height) !important;
  min-height: var(--thumb-area-height) !important;
  max-height: var(--thumb-area-height) !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}
#mainWin .content .postlist.view-gallery .file-ic::before,
#mainWin .content .postlist.view-gallery .file-ic::after {
  content: none !important;
  display: none !important;
}
#mainWin .content .postlist.view-gallery .file-ic:has(.file-thumb) .file-doc {
  display: none !important;
}
/* =========================================================
   5. Finder식 사진 프레임
   - 흰 테두리
   - 바깥 그림자
   - 투명 PNG 체크무늬 배경
   - 사진 영역 안쪽 그림자
========================================================= */
#mainWin .content .postlist.view-gallery .thumb-frame,
#mainWin .content .postlist.view-gallery .file:hover .thumb-frame {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  max-width: 72% !important;
  max-height: none !important;
  padding: var(--thumb-frame-size) !important;
  margin: auto !important;
  background: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.22),
    0 5px 9px rgba(0,0,0,0.18),
    0 12px 18px rgba(0,0,0,0.08) !important;
  transform: none !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
}
#mainWin .content .postlist.view-gallery .thumb-frame::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: var(--thumb-frame-size) !important;
  right: var(--thumb-frame-size) !important;
  top: var(--thumb-frame-size) !important;
  bottom: var(--thumb-frame-size) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
    linear-gradient(-45deg, transparent 75%, #e8e8e8 75%) !important;
  background-size: 18px 18px !important;
  background-position:
    0 0,
    0 9px,
    9px -9px,
    -9px 0 !important;
  box-shadow:
    inset 0 0 4px rgba(0,0,0,0.10),
    inset 0 1px 2px rgba(0,0,0,0.08) !important;
}
#mainWin .content .postlist.view-gallery .thumb-frame::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: var(--thumb-frame-size) !important;
  right: var(--thumb-frame-size) !important;
  top: var(--thumb-frame-size) !important;
  bottom: var(--thumb-frame-size) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  box-shadow:
    inset 0 0 6px rgba(0,0,0,0.20),
    inset 0 1px 3px rgba(0,0,0,0.18) !important;
}
#mainWin .content .postlist.view-gallery .thumb-frame .file-thumb,
#mainWin .content .postlist.view-gallery .file:hover .thumb-frame .file-thumb {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 2px) !important;
  max-height: var(--thumb-img-max-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#mainWin .content .postlist.view-gallery .file:hover .thumb-frame {
  transform: translateY(-4px) !important;
  box-shadow:
    0 2px 3px rgba(0,0,0,0.26),
    0 7px 12px rgba(0,0,0,0.22),
    0 15px 22px rgba(0,0,0,0.12) !important;
}
/* =========================================================
   6. 파일명
========================================================= */
#mainWin .content .postlist.view-gallery .file-body {
  grid-row: 2 !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: var(--file-name-row) !important;
  min-height: var(--file-name-row) !important;
  max-height: var(--file-name-row) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 3px 2px 0 !important;
  position: static !important;
  background: transparent !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  align-self: end !important;
}
#mainWin .content .postlist.view-gallery .file-name,
#mainWin .content .postlist.view-gallery .file:hover .file-name {
  display: block !important;
  width: auto !important;
  max-width: calc(100% - 8px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: rgba(55,58,64,0.88) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border-radius: 0 !important;
  transform: none !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}
#mainWin .content .postlist.view-gallery .file:hover .file-name {
  padding: 1px 6px !important;
  max-width: calc(100% - 8px) !important;
  line-height: 16px !important;
  border-radius: 4px !important;
  background: #0a84ff !important;
  color: #fff !important;
}
/* =========================================================
   7. gallery 부가정보 숨김
========================================================= */
#mainWin .content .postlist.view-gallery .file-cat,
#mainWin .content .postlist.view-gallery .file-sum,
#mainWin .content .postlist.view-gallery .file-ext {
  display: none !important;
}
/* =========================================================
   8. 좁은 창에서 썸네일/글씨 간격 압축
========================================================= */
@container galleryContent (max-width: 620px) {
  #mainWin .content .postlist.view-gallery {
    --thumb-area-height: 122px;
    --thumb-img-max-height: 104px;
    --file-name-row: 28px;
    row-gap: 14px !important;
    column-gap: 6px !important;
  }
  #mainWin .content .postlist.view-gallery .file-body {
    padding: 0 2px !important;
  }
  #mainWin .content .postlist.view-gallery .thumb-frame,
  #mainWin .content .postlist.view-gallery .file:hover .thumb-frame {
    max-height: 116px !important;
  }
}
@container galleryContent (max-width: 460px) {
  #mainWin .content .postlist.view-gallery {
    --thumb-area-height: 104px;
    --thumb-img-max-height: 88px;
    --file-name-row: 26px;
    row-gap: 10px !important;
    column-gap: 5px !important;
  }
  #mainWin .content .postlist.view-gallery .thumb-frame,
  #mainWin .content .postlist.view-gallery .file:hover .thumb-frame {
    max-height: 98px !important;
  }
}
/* =========================================================
   Finder style: text 보기 개조
   - 텍스트 보기 버튼(data-view="text") 전용
   - 작은 썸네일 / 이름 / 종류 / 작성일
   - 회색/흰색 줄무늬
   - hover 시 파란 선택줄
========================================================= */
#mainWin .content .postlist.view-text {
  --text-row-h: 34px;
  --text-thumb: 24px;
  --text-icon-col: 34px;
  --text-kind-w: 104px;
  --text-date-w: 190px;
  --text-thumb-y: 5px;
  --text-title-y: 5px;
  --text-kind-y: -15px;
  --text-date-y: 5px;
  --text-info-x: -24px;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 16px !important;
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  overflow: visible !important;
}
#mainWin .content .postlist.view-text .file,
#mainWin .content .postlist.view-text .file:hover {
  display: grid !important;
  grid-template-columns: var(--text-icon-col) minmax(0, 1fr) var(--text-kind-w) var(--text-date-w) !important;
  column-gap: 10px !important;
  align-items: center !important;
  width: calc(100% - 12px) !important;
  height: var(--text-row-h) !important;
  min-height: var(--text-row-h) !important;
  max-height: var(--text-row-h) !important;
  margin: 0 6px 2px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}
#mainWin .content .postlist.view-text .file:nth-child(odd) {
  background: #f3f3f3 !important;
}
#mainWin .content .postlist.view-text .file:nth-child(even) {
  background: #fff !important;
}
#mainWin .content .postlist.view-text .file:hover {
  background: #0a84ff !important;
}
#mainWin .content .postlist.view-text .file-ic,
#mainWin .content .postlist.view-text .file:hover .file-ic {
  grid-column: 1 !important;
  position: relative !important;
  top: var(--text-thumb-y) !important;
  width: var(--text-thumb) !important;
  height: var(--text-thumb) !important;
  min-width: var(--text-thumb) !important;
  min-height: var(--text-thumb) !important;
  max-width: var(--text-thumb) !important;
  max-height: var(--text-thumb) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}
#mainWin .content .postlist.view-text .thumb-frame,
#mainWin .content .postlist.view-text .file:hover .thumb-frame {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--text-thumb) !important;
  height: var(--text-thumb) !important;
  min-width: var(--text-thumb) !important;
  min-height: var(--text-thumb) !important;
  max-width: var(--text-thumb) !important;
  max-height: var(--text-thumb) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}
#mainWin .content .postlist.view-text .thumb-frame::before,
#mainWin .content .postlist.view-text .thumb-frame::after {
  content: none !important;
  display: none !important;
}
#mainWin .content .postlist.view-text .file-thumb,
#mainWin .content .postlist.view-text .thumb-frame .file-thumb,
#mainWin .content .postlist.view-text .file:hover .file-thumb,
#mainWin .content .postlist.view-text .file:hover .thumb-frame .file-thumb {
  position: static !important;
  display: block !important;
  width: var(--text-thumb) !important;
  height: var(--text-thumb) !important;
  max-width: var(--text-thumb) !important;
  max-height: var(--text-thumb) !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#mainWin .content .postlist.view-text .file-ic:has(.file-thumb) .file-doc {
  display: none !important;
}
#mainWin .content .postlist.view-text .file-doc {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--text-thumb) !important;
  height: var(--text-thumb) !important;
  font-size: 15px !important;
  line-height: var(--text-thumb) !important;
  filter: none !important;
}
#mainWin .content .postlist.view-text .file-body {
  display: contents !important;
}
#mainWin .content .postlist.view-text .file-name,
#mainWin .content .postlist.view-text .file:hover .file-name {
  grid-column: 2 !important;
  position: relative !important;
  top: var(--text-title-y) !important;
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(45,48,56,0.86) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: var(--text-row-h) !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border-radius: 0 !important;
}
#mainWin .content .postlist.view-text .file::after {
  content: attr(data-kind-label) !important;
  grid-column: 3 !important;
  position: relative !important;
  top: var(--text-kind-y) !important;
  left: var(--text-info-x) !important;
  display: block !important;
  color: rgba(80,84,92,0.62) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: var(--text-row-h) !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#mainWin .content .postlist.view-text .file-ext {
  grid-column: 4 !important;
  position: relative !important;
  top: var(--text-date-y) !important;
  left: var(--text-info-x) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(80,84,92,0.62) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: var(--text-row-h) !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#mainWin .content .postlist.view-text .file-ext .fx-date {
  display: inline !important;
}
#mainWin .content .postlist.view-text .file-ext .fx-cmt {
  display: none !important;
}
#mainWin .content .postlist.view-text .file-cat,
#mainWin .content .postlist.view-text .file-sum {
  display: none !important;
}
#mainWin .content .postlist.view-text .file:hover .file-name,
#mainWin .content .postlist.view-text .file:hover::after,
#mainWin .content .postlist.view-text .file:hover .file-ext {
  color: #fff !important;
}
@media (max-width: 680px) {
  #mainWin .content .postlist.view-text .file,
  #mainWin .content .postlist.view-text .file:hover {
    grid-template-columns: var(--text-icon-col) minmax(0, 1fr) 160px !important;
    column-gap: 7px !important;
    padding: 0 10px !important;
  }
  #mainWin .content .postlist.view-text .file::after {
    display: none !important;
  }
  #mainWin .content .postlist.view-text .file-ext {
    grid-column: 3 !important;
  }
}
#mainWin .content:has(.postlist.view-text) {
  container-type: inline-size;
  container-name: textViewContent;
}
#mainWin .content .postlist.view-text {
  --text-info-x: 0px;
}
#mainWin .content .postlist.view-text .file::after {
  justify-self: start !important;
  text-align: left !important;
  left: var(--text-info-x) !important;
}
#mainWin .content .postlist.view-text .file-ext {
  justify-self: end !important;
  text-align: right !important;
  left: var(--text-info-x) !important;
}
@container textViewContent (max-width: 620px) {
  #mainWin .content .postlist.view-text {
    --text-info-x: 8px;
    --text-kind-y: -15px;
    --text-date-y: 5px;
  }
  #mainWin .content .postlist.view-text .file,
  #mainWin .content .postlist.view-text .file:hover {
    grid-template-columns: 34px minmax(0, 1fr) 86px 116px !important;
    column-gap: 8px !important;
  }
  #mainWin .content .postlist.view-text .file-name,
  #mainWin .content .postlist.view-text .file:hover .file-name {
    max-width: 100% !important;
    padding-right: 4px !important;
  }
  #mainWin .content .postlist.view-text .file::after {
    display: block !important;
    grid-column: 3 !important;
    width: 86px !important;
    max-width: 86px !important;
  }
  #mainWin .content .postlist.view-text .file-ext {
    grid-column: 4 !important;
    width: 116px !important;
    max-width: 116px !important;
  }
}
@container textViewContent (max-width: 500px) {
  #mainWin .content .postlist.view-text {
    --text-info-x: 10px;
  }
  #mainWin .content .postlist.view-text .file,
  #mainWin .content .postlist.view-text .file:hover {
    grid-template-columns: 30px minmax(0, 1fr) 76px 98px !important;
    column-gap: 6px !important;
    padding: 0 8px !important;
  }
  #mainWin .content .postlist.view-text .file::after {
    width: 76px !important;
    max-width: 76px !important;
    font-size: 12px !important;
  }
  #mainWin .content .postlist.view-text .file-ext {
    width: 98px !important;
    max-width: 98px !important;
    font-size: 12px !important;
  }
  #mainWin .content .postlist.view-text .file-name,
  #mainWin .content .postlist.view-text .file:hover .file-name {
    font-size: 12px !important;
  }
}
/* =========================================================
   즐겨찾기: 최근 항목 별 아이콘
========================================================= */
#mainWin .sidebar #recentAllLink {
  padding-left: 13px !important;
}
#mainWin .sidebar #recentAllLink > svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  margin-right: 7px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  color: #6f7478 !important;
  opacity: 0.9 !important;
}
/* =========================================================
   OLD 하단 작업표시줄 / 시작 메뉴 / 시계 달력 비활성화
   - 맥 Dock / 알림센터 / 맥 디데이는 건드리지 않음
========================================================= */
.taskbar,
.start-menu,
.calendar-pop {
  display: none !important;
}
#adminScreen,
#adminWin,
#admPwOverlay,
#admDataOverlay {
  display: none !important;
}
/* =========================================================
   배너탭 사이트 이름 말풍선
========================================================= */
.portal-banner-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  pointer-events: none;
  max-width: 180px;
  padding: 5px 9px;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.35;
  color: #4a4651;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: none !important;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
}
.portal-banner-tip.show {
  opacity: 1;
  transform: translateY(0);
}
/* =========================================================
   profile.exe / Twitter profile window
========================================================= */
#twitterWin{
  width:340px!important;min-width:340px!important;max-width:340px!important;
  height:740px!important;min-height:740px!important;max-height:calc(100vh - 40px)!important;
}
#twitterWin .app-body,
#twitterWin .twitter-profile-app{
  width:100%!important;height:100%!important;min-height:0!important;
  overflow:hidden!important;background:#fff!important;color:#0f1419!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
#twitterWin .twitter-profile-app{
  display:flex!important;flex-direction:column!important;position:relative!important;
}
#twitterWin .tw-top-actions{
  position:relative!important;width:100%!important;
  height:113px!important;min-height:113px!important;max-height:113px!important;
  padding:0!important;margin:0!important;overflow:visible!important;display:block!important;
  border-bottom:1px solid #eff3f4!important;background:#f7f9f9!important;
}
#twitterWin .tw-header-img{
  display:block!important;width:100%!important;height:113px!important;
  object-fit:contain!important;object-position:center center!important;
  background:#f7f9f9!important;
}
#twitterWin .tw-link-btn{
  position:absolute!important;right:16px!important;bottom:-46px!important;z-index:20!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;padding:7px 14px!important;
  border:1px solid #cfd9de!important;border-radius:999px!important;
  background:#fff!important;color:#0f1419!important;text-decoration:none!important;
  font-size:13px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;
}
#twitterWin .tw-link-btn:hover{background:#f7f9f9!important;}
#twitterWin .tw-profile-main{
  position:relative!important;
  padding:50px 132px 12px 16px!important;
  border-bottom:1px solid #eff3f4!important;
}
#twitterWin .tw-profile-avatar{
  position:absolute!important;left:16px!important;top:-38px!important;z-index:12!important;
  width:76px!important;height:76px!important;
  border:4px solid #fff!important;border-radius:999px!important;
  overflow:hidden!important;background:#ddd!important;box-sizing:border-box!important;
}
#twitterWin .tw-profile-avatar img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;
}
#twitterWin .tw-display-name{
  margin:0!important;font-size:20px!important;font-weight:800!important;
  line-height:1.2!important;color:#0f1419!important;
}
#twitterWin .tw-handle{margin-top:2px!important;font-size:13px!important;color:#536471!important;}
#twitterWin .tw-bio{
  margin-top:12px!important;font-size:14px!important;line-height:1.55!important;
  color:#0f1419!important;word-break:keep-all!important;
}
#twitterWin .tw-follow{
  display:flex!important;gap:14px!important;margin-top:12px!important;
  font-size:13px!important;color:#536471!important;
}
#twitterWin .tw-follow b{color:#0f1419!important;font-weight:700!important;}
#twitterWin .tw-tabs{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  border-bottom:1px solid #eff3f4!important;background:#fff!important;
}
#twitterWin .tw-tabs button{
  position:relative!important;height:48px!important;border:0!important;background:#fff!important;
  color:#536471!important;font-size:14px!important;font-weight:700!important;cursor:default!important;
}
#twitterWin .tw-tabs button.on{color:#0f1419!important;}
#twitterWin .tw-tabs button.on::after{
  content:""!important;position:absolute!important;left:18px!important;right:18px!important;bottom:0!important;
  height:4px!important;border-radius:999px!important;background:#1d9bf0!important;
}
#twitterWin .tw-post-list{
  flex:1 1 auto!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;background:#fff!important;
}
#twitterWin .tw-post{
  padding:10px 16px 8px!important;
  border-bottom:1px solid #eff3f4!important;background:#fff!important;
}
#twitterWin .tw-post-top{
  display:flex!important;align-items:center!important;gap:6px!important;
  margin:5px 0 2px 38px!important;
  color:#536471!important;font-size:12px!important;font-weight:700!important;line-height:1.2!important;
}
#twitterWin .tw-pin-svg{display:block!important;width:13px!important;height:13px!important;}
#twitterWin .tw-post-head{
  display:flex!important;align-items:flex-start!important;gap:10px!important;
}
#twitterWin .tw-mini-avatar,
#twitterWin .tw-mini-avatar.cat{
  width:38px!important;height:38px!important;flex:0 0 38px!important;
  border-radius:999px!important;
  background:url("https://broken-credit-a9c1.28rnm.workers.dev/twt/_VNtq9SK_400x400%20(1).png") center center / cover no-repeat!important;
}
#twitterWin .tw-post-user{
  display:block!important;min-width:0!important;padding-top:1px!important;
  transform:translateY(1px)!important;
  font-size:14px!important;line-height:1.35!important;color:#536471!important;
}
#twitterWin .tw-post-user .name{
  margin-right:4px!important;color:#0f1419!important;font-weight:800!important;
}
#twitterWin .tw-post-user .id,
#twitterWin .tw-post-user .date{
  color:#536471!important;font-weight:400!important;
}
#twitterWin .tw-post-body{
  width:auto!important;max-width:none!important;
  margin:4px -30px 4px 48px!important;padding:0!important;box-sizing:border-box!important;
  color:#0f1419!important;font-size:14px!important;line-height:1.45!important;
  word-break:keep-all!important;white-space:normal!important;
  transform:translateY(-17px)!important;
}
#twitterWin .tw-post-actions{
  margin:-20px 0 0 42px!important;padding:0 18px 0 0!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;color:#536471!important;
}
#twitterWin .tw-action{
  appearance:none!important;width:30px!important;height:30px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;
  background:transparent!important;box-shadow:none!important;outline:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
  color:#536471!important;font:inherit!important;cursor:default!important;
}
#twitterWin .tw-action svg{display:block!important;width:17px!important;height:17px!important;}
#twitterWin .tw-action span{font-size:12px!important;line-height:1!important;}
#twitterWin .tw-reply:hover,
#twitterWin .tw-share:hover{
  color:#1d9bf0!important;background:rgba(29,155,240,.12)!important;
}
#twitterWin .tw-retweet:hover{
  color:#00ba7c!important;background:rgba(0,186,124,.12)!important;
}
#twitterWin .tw-like:hover{
  color:#f91880!important;background:rgba(249,24,128,.12)!important;
}
#twitterWin.maximized .twitter-profile-app{
  max-width:520px!important;width:100%!important;margin:0 auto!important;
}
#twitterWin.collapsed{
  height:auto!important;min-height:0!important;max-height:none!important;
}
#twitterWin.collapsed .app-body,
#twitterWin.collapsed .twitter-profile-app,
#twitterWin.collapsed .resize-handle{
  display:none!important;
}
.mac-dock-icon.is-twitter{
  background:var(--app-icon-twitter) center center / cover no-repeat!important;
  color:transparent!important;font-size:0!important;
  border-radius:50%!important;overflow:hidden!important;
  box-shadow:
    0 10px 18px rgba(50,120,190,.18),
    inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.mac-dock-icon.is-twitter::before,
.mac-dock-icon.is-twitter::after{
  content:none!important;display:none!important;
}
/* =========================================================
   HKRK LINE 프사 이미지 교체
   - hkrk-line-avatar: 화면에 뜨는 LINE 팝업
   - mac-nc-line-icon: 알림센터 최근 LINE 목록
========================================================= */
:root {
  --hkrk-line-avatar-hikaru: url("https://broken-credit-a9c1.28rnm.workers.dev/twt/default_profile.png");
  --hkrk-line-avatar-riko: url("https://broken-credit-a9c1.28rnm.workers.dev/twt/a2de4a40bfdb83f9838676779dc5037a.jpg");
}
.hkrk-line-noti.from-hikaru .hkrk-line-avatar,
.hkrk-line-noti.from-riko .hkrk-line-avatar {
  font-size: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}
.hkrk-line-noti.from-hikaru .hkrk-line-avatar {
  background-image: var(--hkrk-line-avatar-hikaru) !important;
}
.hkrk-line-noti.from-riko .hkrk-line-avatar {
  background-image: var(--hkrk-line-avatar-riko) !important;
}
.mac-nc-line-item.from-hikaru .mac-nc-line-icon,
.mac-nc-line-item.from-riko .mac-nc-line-icon {
  font-size: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}
.mac-nc-line-item.from-hikaru .mac-nc-line-icon {
  background-image: var(--hkrk-line-avatar-hikaru) !important;
}
.mac-nc-line-item.from-riko .mac-nc-line-icon {
  background-image: var(--hkrk-line-avatar-riko) !important;
}
/* =========================================================
   포털 왼쪽 큰 이미지칸 고정 복구
   - 이미지 비율 유지
   - 박스 밖으로 튀거나 잘리지 않게
   - 공지판과 분리 유지
========================================================= */
#mainWin .portal-main-cell {
  vertical-align: top !important;
  padding: 0 !important;
}
#mainWin .portal-main-cell > table {
  width: 100% !important;
  height: 300px !important;
  table-layout: fixed !important;
}
#mainWin #portalSlideSlot {
  width: 100% !important;
  height: 300px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
/* =========================================================
   포털 홈 레이아웃 고정
   - 왼쪽 이미지가 오른쪽 배너 영역을 침범하지 않게
   - 창 줄여도 오른쪽 배너탭이 밀려나지 않게
========================================================= */
#mainWin .home-only-extra {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
#mainWin .home-only-extra > tbody > tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 12px 220px !important;
  width: 100% !important;
  align-items: start !important;
}
#mainWin .home-only-extra > tbody > tr > td {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#mainWin .portal-main-cell,
#mainWin .home-only-extra > tbody > tr > td:first-child {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
#mainWin .portal-main-cell > table,
#mainWin .home-only-extra > tbody > tr > td:first-child > table {
  width: 100% !important;
  max-width: 100% !important;
  height: 300px !important;
  table-layout: fixed !important;
}
#mainWin #portalSlideSlot {
  width: 100% !important;
  max-width: 100% !important;
  height: 300px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
}
/* =========================================================
   FINAL: MAC STYLE BANNER TAB
   - 접힌 종이 효과 없음
   - 흰색/연회색 라운드 박스
   - 부드러운 맥 느낌
========================================================= */
#mainWin .home-only-extra > tbody > tr {
  grid-template-columns: minmax(0, 1fr) 12px 242px !important;
}
#mainWin .content .portal-side-cell {
  --portal-side-w: 242px;
  --portal-card-w: 220px;
  --portal-inner-w: 200px;
  --portal-my-banner-h: 40px;
  --portal-my-banner-gap: 10px;
  --portal-card-h: 320px;
  width: var(--portal-side-w) !important;
  min-width: var(--portal-side-w) !important;
  max-width: var(--portal-side-w) !important;
  height: calc(
    var(--portal-my-banner-h)
    + var(--portal-my-banner-gap)
    + var(--portal-card-h)
    + 14px
  ) !important;
  margin: 0 !important;
  padding: 0 11px 14px !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#mainWin .content .portal-side-cell::before,
#mainWin .content .portal-side-cell::after,
#mainWin .content .portal-side-box::before,
#mainWin .content .portal-side-box::after,
#mainWin .content .portal-inner-box::before,
#mainWin .content .portal-inner-box::after{
  content: none !important;
  display: none !important;
}
#mainWin .content .portal-my-banner-box {
  width: 200px !important;
  height: var(--portal-my-banner-h) !important;
  margin: 0 auto var(--portal-my-banner-gap) !important;
  padding: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#mainWin .content .portal-my-banner-box::before,
#mainWin .content .portal-my-banner-box::after {
  content: none !important;
  display: none !important;
}
#mainWin .content .portal-my-banner-link,
#mainWin .content .portal-my-banner-link img {
  display: block !important;
  width: 200px !important;
  height: 40px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
#mainWin .content .portal-side-box,
#mainWin .content .portal-side-box tbody,
#mainWin .content .portal-side-box tr,
#mainWin .content .portal-side-box td,
#mainWin .content .portal-inner-box {
  display: block !important;
  width: var(--portal-card-w) !important;
  min-width: var(--portal-card-w) !important;
  max-width: var(--portal-card-w) !important;
  height: var(--portal-card-h) !important;
  min-height: var(--portal-card-h) !important;
  max-height: var(--portal-card-h) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#mainWin .content .banner-tab-bg {
  position: relative !important;
  z-index: 1 !important;
  width: var(--portal-card-w) !important;
  min-width: var(--portal-card-w) !important;
  max-width: var(--portal-card-w) !important;
  height: var(--portal-card-h) !important;
  min-height: var(--portal-card-h) !important;
  max-height: var(--portal-card-h) !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(
    180deg,
    #fbfbfb 0%,
    #f4f4f4 100%
  ) !important;
border: 1px solid rgba(180, 180, 180, 0.50) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 8px 18px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
#mainWin .content .banner-tab-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.55) 0px,
      rgba(255, 255, 255, 0.18) 52px,
      rgba(255, 255, 255, 0) 110px
    ) !important;
}
#mainWin .content .banner-tab-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}
#mainWin .content .banner-scroll-inner {
  position: relative !important;
  z-index: 4 !important;
  width: var(--portal-inner-w) !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#mainWin .content .banner-scroll-inner::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#mainWin .content .portal-link-banners {
  width: var(--portal-inner-w) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 0 !important;
}
#mainWin .content .portal-link-banners .mini-banner-row {
  width: var(--portal-inner-w) !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 0 !important;
}
#mainWin .content .portal-link-banners .mini-banner-row a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
#mainWin .content .portal-link-banners .mini-banner-row img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
#mainWin .content .portal-link-banners a.portal-banner-200 {
  display: block !important;
  width: var(--portal-inner-w) !important;
  max-width: var(--portal-inner-w) !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  line-height: 0 !important;
}
#mainWin .content .portal-link-banners a.portal-banner-200 img {
  display: block !important;
  width: var(--portal-inner-w) !important;
  max-width: var(--portal-inner-w) !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
#mainWin .content .portal-link-banners .mini-banner-row a::after,
#mainWin .content .portal-link-banners a.portal-banner-200::after {
  content: none !important;
  display: none !important;
}
/* =========================================================
배너탭 오른쪽 정렬 + 왼쪽 이미지/뉴스 티커 폭 복구
* 오른쪽 빈 여백 제거
* 배너탭을 오른쪽으로 붙임
* 줄어든 만큼 왼쪽 영역이 다시 넓어짐
  ========================================================= */
#mainWin .home-only-extra > tbody > tr {
grid-template-columns: minmax(0, 1fr) 12px 220px !important;
}
#mainWin .content .portal-side-cell {
--portal-side-w: 220px;
--portal-card-w: 220px;
--portal-paper-w: 220px;
--portal-inner-w: 200px;
width: 220px !important;
min-width: 220px !important;
max-width: 220px !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: visible !important;
}
#mainWin .content .portal-my-banner-box {
margin-left: auto !important;
margin-right: 0 !important;
}
#mainWin .content .portal-side-box,
#mainWin .content .portal-side-box tbody,
#mainWin .content .portal-side-box tr,
#mainWin .content .portal-side-box td,
#mainWin .content .portal-inner-box,
#mainWin .content .banner-tab-bg {
margin-left: auto !important;
margin-right: 0 !important;
}
#mainWin .content .portal-my-banner-box {
width: 200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#mainWin .content .portal-my-banner-link,
#mainWin .content .portal-my-banner-link img {
margin-left: auto !important;
margin-right: auto !important;
}
#mainWin .content .banner-tab-bg {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 5px 10px rgba(0, 0, 0, 0.13),
0 1px 3px rgba(0, 0, 0, 0.09) !important;
}
#mainWin .portal-news-board {
  background: #f3f0f2 !important;
}
#mainWin .portal-news-track span,
#mainWin .portal-news-track span::before {
  color: #ff9dbf !important;
  -webkit-text-fill-color: #ff9dbf !important;
}
/* =========================================================
상단 공사중 배너 → 분홍 프로필 박스 FINAL
* 아래 portalSlideSlot 아님
* 상단 cover-slide만 바꿈
* 기존 슬라이드 내용 숨김
* 3D 틸트용 transform만 유지
* 반짝임은 JS(.top-profile-one-edge-sweep)가 담당
  ========================================================= */
#mainWin .content .cover-area {
gap: 0 !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] {
--top-profile-bg:
linear-gradient(
to top,
#ff97c8 0%,
#ff9bca 8%,
#ffa2cf 42%,
#ffa8d2 78%,
#ffa8d2 100%
);
--top-profile-image: url("YOUR_IMAGE_URL");
--top-profile-fit: cover;
position: relative !important;
isolation: isolate !important;
width: calc(100% - 8px) !important;
max-width: calc(100% - 8px) !important;
height: 250px !important;
aspect-ratio: auto !important;
margin: 14px auto 0 !important;
overflow: hidden !important;
border-radius: 18px !important;
box-sizing: border-box !important;
background:
var(--top-profile-image) center center / var(--top-profile-fit) no-repeat,
var(--top-profile-bg) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 10px 24px rgba(0, 0, 0, 0.08) !important;
transform:
perspective(900px)
rotateX(var(--top-tilt-x, 0deg))
rotateY(var(--top-tilt-y, 0deg))
scale(var(--top-scale, 1)) !important;
transform-style: preserve-3d !important;
transform-origin: center center !important;
transition:
transform 0.16s ease,
box-shadow 0.16s ease !important;
will-change: transform !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide-track,
#mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide,
#mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide-dots,
#mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide-cap {
display: none !important;
pointer-events: none !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] a {
pointer-events: none !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide]::before,
#mainWin .content .cover-area .cover-slide[data-cover-slide]::after {
content: none !important;
display: none !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-shine,
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-flash-hard {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-one-edge-sweep {
border-radius: inherit !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide].is-tilting {
--top-scale: 1.01;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 14px 30px rgba(0, 0, 0, 0.11) !important;
}
/* =========================================================
포털 뉴스 티커 - 상단 분홍 박스 색 맞춤 + 흰색 텍스트
========================================================= */
#mainWin .portal-news-board {
width: 100% !important;
height: 48px !important;
margin: 12px 0 0 !important;
padding: 0 !important;
position: relative !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
border: 0 !important;
border-radius: 12px !important;
background: #ffa9d3 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 4px 10px rgba(0, 0, 0, 0.06) !important;
white-space: nowrap !important;
}
#mainWin .portal-news-track {
display: inline-flex !important;
align-items: center !important;
gap: 52px !important;
min-width: max-content !important;
padding-left: 100% !important;
animation: portalNewsMove 26s linear infinite !important;
}
#mainWin .portal-news-track span {
display: inline-block !important;
white-space: nowrap !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-size: 16px !important;
font-weight: 800 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
letter-spacing: 0.01em !important;
text-shadow: 0 1px 2px rgba(160, 70, 110, 0.28) !important;
}
#mainWin .portal-news-track span::before {
content: "● " !important;
font-size: 9px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 0.95 !important;
}
@keyframes portalNewsMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* =========================================================
상단 분홍 프로필 박스 - 오른쪽 텍스트 UI FINAL
* 점 네 개 제거
* 왼쪽 정렬 유지
* 창 줄이면 텍스트는 줄바꿈 없이 잘림
* 상태메시지 박스 높이 낮춤
* 아래 글씨 위에 흰 구분선
  ========================================================= */
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-copy {
position: absolute !important;
top: 24px !important;
left: 210px !important;
right: 28px !important;
z-index: 50 !important;
pointer-events: none !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
text-align: left !important;
overflow: visible !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-name {
width: 100% !important;
min-width: 0 !important;
margin: 0 0 10px !important;
padding: 0 !important;
color: #fff7fb !important;
font-size: 44px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: -0.03em !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
text-shadow: 0 2px 0 rgba(255, 255, 255, 0.08) !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-dots {
display: none !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-pill {
width: min(340px, 100%) !important;
min-width: 0 !important;
max-width: 340px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
margin: 0 0 24px 0 !important;
padding: 0 22px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
box-sizing: border-box !important;
border-radius: 999px !important;
background: rgba(255, 201, 227, 0.58) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
0 2px 8px rgba(255, 255, 255, 0.05) !important;
overflow: hidden !important;
transform: none !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-pill-icon {
flex-shrink: 0 !important;
color: #fff7fb !important;
font-size: 16px !important;
line-height: 1 !important;
text-align: left !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-pill-text {
flex-shrink: 1 !important;
color: rgba(255, 247, 251, 0.92) !important;
-webkit-text-fill-color: rgba(255, 247, 251, 0.92) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-lines {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
max-width: 520px !important;
margin: 0 !important;
padding-top: 18px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
text-align: left !important;
overflow: visible !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-lines::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: -5px !important;
width: auto !important;
height: 1px !important;
display: block !important;
background: rgba(255, 255, 255, 0.72) !important;
border-radius: 999px !important;
pointer-events: none !important;
}
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-lines p {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: rgba(255, 247, 251, 0.92) !important;
-webkit-text-fill-color: rgba(255, 247, 251, 0.92) !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: 0.01em !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
/* =========================================================
상단 분홍 프로필 박스 - 왼쪽 인물 이미지
========================================================= */
#mainWin .content .cover-area .cover-slide[data-cover-slide] .top-profile-character {
position: absolute !important;
left: 22px !important;
bottom: 0 !important;
width: 160px !important;
height: auto !important;
z-index: 40 !important;
pointer-events: none !important;
display: block !important;
object-fit: contain !important;
user-select: none !important;
}
/* =========================================================
내 배너: 투명 GIF 모양 따라 그림자
* 네모 박스 그림자 아님
* 이미지의 투명 영역을 제외하고 그림자 생김
  ========================================================= */
#mainWin .portal-my-banner-box {
width: 200px !important;
margin: 0 auto 10px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
#mainWin .portal-my-banner-box .portal-my-banner-link {
display: block !important;
width: 200px !important;
height: 40px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
#mainWin .portal-my-banner-box .portal-my-banner-link img {
display: block !important;
width: 200px !important;
height: 40px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter:
drop-shadow(0 4px 5px rgba(0, 0, 0, 0.22))
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14)) !important;
}
/* =========================================================
방명록: 비밀답글 파란 말풍선 보정
========================================================= */
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply {
width: 100% !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply > .tt-wrap-cmt,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply .tt-box-content,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply .tt-wrap-desc {
width: 100% !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
margin-left: auto !important;
margin-right: 0 !important;
transform: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply .tt_desc {
align-self: flex-end !important;
margin-left: auto !important;
margin-right: 0 !important;
background: var(--gb-my, #007aff) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
transform: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply .tt-box-meta {
display: none !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply .tt-wrap-info {
align-self: flex-end !important;
margin-left: auto !important;
margin-right: 6px !important;
justify-content: flex-end !important;
text-align: right !important;
}
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply .tt-box-thumb,
body.guestbook-iframe-mode .gb-body .tt-item-reply.is-secret-owner-reply .tt-thumbnail {
display: none !important;
visibility: hidden !important;
}
.portal-news-board {
  overflow: hidden !important;
}
.portal-news-track {
  display: flex !important;
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  animation: portalNewsTickerLoop 18s linear infinite !important;
  will-change: transform;
}
.portal-news-track span {
  flex: 0 0 auto !important;
  padding-right: 34px !important;
}
@keyframes portalNewsTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
body#tt-body-index #mainWin .content {
  padding-top: 40px !important;
}
/* =========================================================
   RIKO VISUAL NOVEL SPRITE
   - 빨간 영역처럼 홈 오른쪽 배경에 세워두는 리코
   - 몸통/표정 이미지는 아래 변수만 바꾸면 됨
========================================================= */
:root {
  /*
    이미지 교체:
    1) 몸통 PNG: HTML의 .riko-vn-body src에서 교체
    2) 표정 PNG: 몸통과 같은 캔버스 크기의 투명 PNG 추천
       같은 캔버스로 뽑으면 얼굴 위치 조절이 필요 없음.
  */
  --riko-face-normal-img: url("https://broken-credit-a9c1.28rnm.workers.dev/riko/1/2.png");
  --riko-face-smile-img: url("https://broken-credit-a9c1.28rnm.workers.dev/riko/1/1.png");
--riko-vn-right: -40px;
--riko-vn-bottom: -10px;
--riko-vn-width: 550px;
}
.riko-vn {
  display: none;
}
.riko-vn {
  position: fixed;
  right: var(--riko-vn-right);
  bottom: var(--riko-vn-bottom);
  z-index: 5;
  display: block;
 width: auto !important;
max-width: none !important;
  pointer-events: none;
  user-select: none;
}
body#tt-body-index .riko-vn-stage {
  position: relative;
  z-index: 2;
display: inline-block;
width: var(--riko-vn-width) !important;
max-width: none !important;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 100%;
  animation: rikoVnFloat 4.2s ease-in-out infinite;
}
.riko-vn-stage:hover {
  filter: drop-shadow(0 0 12px rgba(255, 179, 202, 0.55));
}
.riko-vn-body {
  position: relative;
  z-index: 2;
  display: block;
 width: 100% !important;
max-width: none !important;
height: auto !important;
  pointer-events: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 18px 18px rgba(45, 38, 54, 0.18))
    drop-shadow(0 2px 0 rgba(255,255,255,0.32));
}
.riko-vn-face {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--riko-face-normal-img);
  background-position: left top;
background-size: auto;
  background-repeat: no-repeat;
  pointer-events: none;
}
/*
  얼굴만 잘라낸 PNG를 쓸 경우:
  위 .riko-vn-face의 inset/background-size를 지우고 아래 값을 켜서 맞춰.
  예)
  inset: auto;
  left: 33%;
  top: 11%;
  width: 34%;
  height: 18%;
  background-size: contain;
*/
.riko-vn.is-smile .riko-vn-face {
  background-image: var(--riko-face-smile-img);
}
.riko-vn-shadow {
  position: absolute;
  left: 19%;
  right: 18%;
  bottom: 0;
  z-index: 1;
  height: 20px;
  border-radius: 50%;
  background: rgba(50, 40, 60, 0.13);
  filter: blur(7px);
  transform: translateY(8px);
  pointer-events: none;
}
.riko-vn-dialogue {
  position: absolute;
  right: 6px;
  bottom: 18px;
  z-index: 6;
  width: 460px;
min-height: 96px;
padding: 16px 46px 17px 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,245,251,0.88));
  box-shadow:
    0 18px 38px rgba(80, 65, 90, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.22,1,.36,1);
}
.riko-vn-dialogue.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.riko-vn-name {
  position: absolute !important;
  top: -50px;
  left: 18px;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  min-height: 2px;
padding: 4px 14px 5px 14px !important;
  border: 7px solid #ffa9d3 !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background: #ffa9d3 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.riko-vn.is-tap .riko-vn-stage {
  animation:
    rikoVnTap .28s cubic-bezier(.22,1,.36,1),
    rikoVnFloat 4.2s ease-in-out .28s infinite;
}
@keyframes rikoVnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes rikoVnTap {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(3px) scale(0.985); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes rikoVnNext {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(2px); opacity: 1; }
}
body#tt-body-index:has(#mainWin.maximized) .riko-vn {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .riko-vn-stage,
  .riko-vn-next {
    animation: none !important;
  }
}
.riko-vn-stage {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.riko-vn-stage:hover,
.riko-vn-stage:focus,
.riko-vn-stage:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.riko-vn-body {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-user-drag: none !important;
}
.riko-vn-face {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: var(--riko-face-normal-img) !important;
  background-position: left top !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}
.riko-vn.is-smile .riko-vn-face {
  background-image: var(--riko-face-smile-img) !important;
}
.riko-vn-dialogue {
  position: absolute !important;
}
/* =========================================================
   RIKO HIT AREAS
   - 머리/가슴/손 클릭 영역
   - 좌표는 JS에서 포즈별로 CSS 변수로 넣음
========================================================= */
.riko-vn-stage {
  position: relative !important;
}
.riko-hit {
  position: absolute;
  z-index: 20;
  display: block;
  left: 0;
  top: 0;
  width: 10%;
  height: 10%;
  border-radius: 999px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.riko-hit-head {
  left: var(--riko-hit-head-x, 29%);
  top: var(--riko-hit-head-y, 2%);
  width: var(--riko-hit-head-w, 50%);
  height: var(--riko-hit-head-h, 16%);
}
.riko-hit-chest {
  left: var(--riko-hit-chest-x, 28%);
  top: var(--riko-hit-chest-y, 40%);
  width: var(--riko-hit-chest-w, 38%);
  height: var(--riko-hit-chest-h, 18%);
}
/* 손 
.riko-hit-hand {
  left: var(--riko-hit-hand-x, 24%);
  top: var(--riko-hit-hand-y, 58%);
  width: var(--riko-hit-hand-w, 22%);
  height: var(--riko-hit-hand-h, 22%);
}
*/
.riko-vn.is-hidden {
  display: none !important;
}
body.riko-debug .riko-hit {
  background: rgba(255, 0, 100, 0.22) !important;
  outline: 1px solid rgba(255, 0, 100, 0.65) !important;
}
/* =========================================================
   RIKO VN BUBBLE - pink rounded box + name tag
========================================================= */
.riko-vn-dialogue {
  position: absolute !important;
  right: 25px;
  bottom: 60px;
  z-index: 6;
  width: 360px;
  min-height: 110px;
padding: 15px 18px 16px 18px !important;
border: 10px solid #ffa9d3 !important;
background-color: rgba(255, 255, 255, 0.78) !important;
background-image:
  radial-gradient(
    circle,
    rgba(255, 169, 211, 0.26) 0 5px,
    transparent 5.2px
  ),
  radial-gradient(
    circle,
    rgba(255, 169, 211, 0.26) 0 5px,
    transparent 5.2px
  ) !important;
background-size: 38px 38px !important;
background-position:
  0 0,
  19px 19px !important;
  box-shadow:
    0 8px 22px rgba(120, 95, 110, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
  overflow: visible !important;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.22,1,.36,1);
}
.riko-vn-dialogue.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.riko-vn-name {
  position: absolute !important;
  top: -34px;
  left: 5px;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 70 !important;
  min-height: 25px !important;
  padding: 3px 12px 4px 12px !important;
  border: 5px solid #ffa9d3 !important;
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: #ffa9d3 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  box-shadow: 0 3px 8px rgba(120, 95, 110, 0.08) !important;
}
.riko-vn-text {
  margin-top: -2px !important;
  color: var(--ink, #4a4651) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  word-break: keep-all !important;
}
.riko-vn-next {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d97faa;
  font-size: 11px;
  line-height: 20px;
  cursor: pointer;
}
/* =========================================================
   상단 프로필 박스 안 기존 티스토리 슬라이드 완전 숨김
   - 프로필 카드 뒤에서 슬라이드 이미지 넘어가는 문제 방지
========================================================= */
body#tt-body-index #mainWin .content .cover-area .cover-slide[data-cover-slide] > .cslide-track,
body#tt-body-index #mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide-track,
body#tt-body-index #mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide,
body#tt-body-index #mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide-bg,
body#tt-body-index #mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide .file-thumb,
body#tt-body-index #mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide-dots,
body#tt-body-index #mainWin .content .cover-area .cover-slide[data-cover-slide] .cslide-cap {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================================================
   홈 리코 크기 최종 강제 조절
   - 아래쪽 width:auto !important 덮어쓰기 방지
========================================================= */
body#tt-body-index #rikoVn .riko-vn-stage {
  width: 570px !important;
  max-width: none !important;
}
body#tt-body-index #rikoVn .riko-vn-body {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}
body#tt-body-index #rikoVn .riko-vn-face {
  width: 100% !important;
  height: 100% !important;
  background-size: 100% 100% !important;
}
body#tt-body-index #rikoVn .riko-vn-dialogue {
  right: 130px !important;
  bottom: 70px !important;
  left: auto !important;
}
/* =========================================================
   리코 위치/크기 최종 조절
   - 메인페이지 + 다른 페이지 따로 적용
========================================================= */
body#tt-body-index #rikoVn {
  right: -40px !important;
  bottom: -10px !important;
}
body#tt-body-index #rikoVn .riko-vn-stage {
  width: 570px !important;
  max-width: none !important;
}
body#tt-body-index #rikoVn .riko-vn-body {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}
body#tt-body-index #rikoVn .riko-vn-face {
  width: 100% !important;
  height: 100% !important;
  background-size: 100% 100% !important;
}
body#tt-body-index #rikoVn .riko-vn-dialogue {
  right: 130px !important;
  bottom: 70px !important;
  left: auto !important;
}
/* =========================================================
   메인 제외 다른 페이지 리코
========================================================= */
body:not(#tt-body-index) #rikoVn {
  right: -40px !important;
  bottom: -10px !important;
}
body:not(#tt-body-index) #rikoVn .riko-vn-stage {
  width: 570px !important;
  max-width: none !important;
}
body:not(#tt-body-index) #rikoVn .riko-vn-body {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}
body:not(#tt-body-index) #rikoVn .riko-vn-face {
  width: 100% !important;
  height: 100% !important;
  background-size: 100% 100% !important;
}
body:not(#tt-body-index) #rikoVn .riko-vn-dialogue {
  right: 130px !important;
  bottom: 70px !important;
  left: auto !important;
}
/* =========================================================
   리코 로딩 깜빡임 방지
   - 글 페이지에서는 리코를 처음엔 숨김
   - 메인 리코 / 히카루 전용 리코 준비 후에만 표시
========================================================= */
body#tt-body-page #rikoVn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body#tt-body-page.riko-main-ready #rikoVn,
body#tt-body-page.hkw-riko-ready #rikoVn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#rikoVn:not(.riko-sheet-active) {
  visibility: hidden !important;
  pointer-events: none !important;
}
body#tt-body-index #rikoVn .riko-vn-stage,
body:not(#tt-body-index) #rikoVn .riko-vn-stage {
  width: 600px !important;
  max-width: none !important;
}
#mainWin .content > .home-recent-posts { display: none; }
body#tt-body-index #mainWin .content > .home-recent-posts {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
     margin: 0;
  padding: 0 18px 6px;
    border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body#tt-body-index #mainWin .content > .cover-area,
body#tt-body-index #mainWin .content > .home-only-extra { flex-shrink: 0; }
body#tt-body-index #mainWin .content { min-height: 0; overflow-y: auto; }
#mainWin #homeRecentPosts .home-recent-head {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#mainWin .home-recent-head h2 {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 0;
  color: var(--ink, #4a4651); font-size: 14px; font-weight: 700; line-height: 1.4;
}
#mainWin .home-recent-dot {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%;
  background: var(--pink-d, #ff96b6);
}
#mainWin .home-recent-all {
  display: none !important;
}
#mainWin .home-recent-all:hover,
#mainWin .home-recent-all:focus-visible {
  color: var(--ink, #4a4651); outline: 2px solid var(--pink-d, #ff96b6); outline-offset: 2px;
}
#mainWin .home-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  align-items: start; gap: 22px 16px;
  margin: 0; padding: 0; list-style: none;
}
#mainWin .home-recent-item { min-width: 0; margin: 0; padding: 0; list-style: none; }
#mainWin .home-recent-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-width: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--ink, #4a4651); text-decoration: none; overflow: visible;
}
#mainWin .home-recent-card:focus-visible {
  outline: 2px solid var(--pink-d, #ff96b6); outline-offset: 5px;
}
#mainWin .home-recent-thumb {
  --recent-frame: 6px;
  position: relative; isolation: isolate; display: block; flex: 0 0 auto;
  box-sizing: border-box; width: 100%; max-width: 180px; aspect-ratio: 1 / 1;
  padding: var(--recent-frame); margin: 0; line-height: 0;
  background: #fff; border: 0; border-radius: 0; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 5px 9px rgba(0,0,0,.18), 0 12px 18px rgba(0,0,0,.08);
  transition: transform .14s ease, box-shadow .14s ease;
}
#mainWin .home-recent-thumb::before {
  content: ''; position: absolute; inset: var(--recent-frame); z-index: 0; pointer-events: none;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
    linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  box-shadow: inset 0 0 4px rgba(0,0,0,.10), inset 0 1px 2px rgba(0,0,0,.08);
}
#mainWin .home-recent-thumb::after {
  content: ''; position: absolute; inset: var(--recent-frame); z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 6px rgba(0,0,0,.20), inset 0 1px 3px rgba(0,0,0,.18);
}
#mainWin #homeRecentPosts .home-recent-thumb img {
  position: absolute !important;
    z-index: 2;
  inset: 6px !important;

  width: calc(100% - 12px) !important;
  height: calc(100% - 12px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  display: block;
  object-fit: cover !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* 이미지가 없을 때만 가운데 안내 표시 */
#mainWin #homeRecentPosts .home-recent-fallback {
  position: absolute;
  inset: 6px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

/* 이미지가 있으면 ‘이미지 없음’ 숨기기 */
#mainWin #homeRecentPosts .home-recent-thumb:has(img:not([hidden])) .home-recent-fallback {
  display: none;
}

/* 로딩에 실패한 이미지는 숨기기 */
#mainWin #homeRecentPosts .home-recent-thumb img[hidden] {
  display: none !important;
}

/* 글이 하나라도 있으면 빈 목록 안내 숨기기 */
#mainWin #homeRecentPosts .home-recent-grid:has(.home-recent-item) + .home-recent-empty {
  display: none;
}

/* 날짜 숨기기 */
#mainWin .home-recent-date {
  display: none !important;
}

#mainWin .home-recent-card {
  gap: 0 !important;
}

/* 홈 / 최근 항목: 글자 시작 위치 통일 */
#mainWin .sidebar #homeLink,
#mainWin .sidebar #recentAllLink {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 30px !important;
  padding-right: 9px !important;
  gap: 0 !important;
}

/* 기존 아이콘 숨기기 */
#mainWin .sidebar #homeLink > svg,
#mainWin .sidebar #recentAllLink > svg {
  display: none !important;
}

/* 두 항목에 같은 별 아이콘 사용 */
#mainWin .sidebar #homeLink::before,
#mainWin .sidebar #recentAllLink::before {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23535a61' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 3.8l2.1 4.3c.2.5.7.8 1.2.9l4.8.7-3.5 3.4c-.4.4-.5.9-.4 1.4l.8 4.8-4.3-2.3c-.5-.2-1-.2-1.5 0l-4.3 2.3.8-4.8c.1-.5-.1-1-.4-1.4L3.9 9.7l4.8-.7c.5-.1 1-.4 1.2-.9L12 3.8z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  pointer-events: none !important;
}
#mainWin #homeRecentPosts .home-recent-card:hover .home-recent-thumb,
#mainWin #homeRecentPosts .home-recent-card:focus-visible .home-recent-thumb {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.26),
    0 7px 12px rgba(0, 0, 0, 0.22),
    0 15px 22px rgba(0, 0, 0, 0.12);
}
/* 카테고리 새 글 표시: 작은 파란 점 */
#mainWin .sidebar .cat-box .cat-new {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 6px !important;
  min-width: 6px !important;
  height: 6px !important;
  padding: 0 !important;
margin: 0 0 0 -2px !important;

  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: middle;
  border: 0 !important;
  border-radius: 50% !important;
  background: #0a84ff !important;
  box-shadow: none !important;
}
#mainWin .sidebar .cat-box a.link_item .cat-new,
#mainWin .sidebar .cat-box a.link_tit .cat-new {
  display: none !important;
}