/*
 * OHMYGIRL COMMUNITY
 * https://ohmygirl.cc
 *
 * 오마이걸 커뮤니티 전용 코드
 *
 * Version  : 0.3
 * Released : 2026-03-29
 *
 * Author   : OHMYGIRL COMMUNITY
 * License  : Exclusive License - OHMYGIRL COMMUNITY Only
 */
:root {
    --yooa-bg:#0e0e0e; --yooa-surface:#1a1a1a; --yooa-surface2:#222;
    --yooa-border:#2a2a2a; --yooa-accent:#e8a020; --yooa-text:#f0f0f0;
    --yooa-muted:#888; --yooa-radius:10px;
}
#yooa-wrap[data-theme="light"] {
    --yooa-bg:#ffffff; --yooa-surface:#f5f5f5; --yooa-surface2:#ebebeb;
    --yooa-border:#ddd; --yooa-text:#111; --yooa-muted:#666;
}
#yooa-wrap[data-theme="dark"] {
    --yooa-bg:#242424; --yooa-surface:#2e2e2e; --yooa-surface2:#383838;
    --yooa-border:#3a3a3a; --yooa-text:#f0f0f0; --yooa-muted:#888;
}
#yooa-wrap[data-theme="beige"] {
    --yooa-bg:#F9F0E1; --yooa-surface:#f0e4ce; --yooa-surface2:#e8d9bf;
    --yooa-border:#d9c9a8; --yooa-text:#3a2e1e; --yooa-muted:#7a6a50;
}
#yooa-wrap[data-theme="green"] {
    --yooa-bg:#1C2920; --yooa-surface:#243028; --yooa-surface2:#2d3b31;
    --yooa-border:#3a4d40; --yooa-text:#d4e8d8; --yooa-muted:#7a9e82;
}

#yooa-wrap {
    font-family:'Noto Sans KR',sans-serif;
    background:var(--yooa-bg);
    color:var(--yooa-text);
    min-height:100vh;
}
#yooa-header {
    background:var(--yooa-surface); border-bottom:1px solid var(--yooa-border);
    padding:14px 20px; display:flex; align-items:center; justify-content:space-between;
}
#yooa-wrap .logo { font-size:18px; font-weight:700; color:var(--yooa-accent); }
#yooa-wrap .header-controls { display:flex; align-items:center; gap:8px; }
#yooa-wrap .color-mode-wrap { position:relative; }
#yooa-wrap .color-mode-btn {
    background:none; border:none; color:var(--yooa-muted); cursor:pointer;
    padding:6px 10px; border-radius:6px; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s; line-height:1;
}
#yooa-wrap .color-mode-btn:hover { background:var(--yooa-surface2); color:var(--yooa-accent); }
#yooa-wrap .color-dot { width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(128,128,128,0.5); display:inline-block; flex-shrink:0; }
#yooa-wrap .color-panel {
    position:absolute; top:calc(100% + 8px); right:0;
    background:var(--yooa-surface); border:1px solid var(--yooa-border);
    border-radius:12px; padding:14px 16px; box-shadow:0 8px 24px rgba(0,0,0,0.25);
    display:none; z-index:200; min-width:230px;
}
#yooa-wrap .color-panel.open { display:block; }
#yooa-wrap .color-panel-title { font-size:12px; color:var(--yooa-muted); margin-bottom:12px; font-weight:600; white-space:nowrap; }
#yooa-wrap .color-options { display:flex; gap:8px; justify-content:flex-start; }
#yooa-wrap .color-opt { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; padding:6px 8px; border-radius:8px; transition:background 0.15s; }
#yooa-wrap .color-opt:hover { background:var(--yooa-surface2); }
#yooa-wrap .color-opt .swatch { width:28px; height:28px; border-radius:50%; border:2px solid transparent; transition:border-color 0.15s,transform 0.15s; }
#yooa-wrap .color-opt.active .swatch { border-color:var(--yooa-accent); transform:scale(1.12); }
#yooa-wrap .color-opt span { font-size:11px; color:var(--yooa-muted); white-space:nowrap; }
#yooa-wrap .view-toggle { display:flex; gap:4px; background:var(--yooa-bg); border-radius:8px; padding:4px; }
#yooa-wrap .view-toggle button {
    background:none; border:none; color:var(--yooa-muted); cursor:pointer;
    padding:6px 10px; border-radius:6px; font-size:16px; transition:all 0.15s;
}
#yooa-wrap .view-toggle button.active { background:var(--yooa-surface2); color:var(--yooa-accent); }
#yooa-wrap .toolbar { padding:12px 20px; border-bottom:1px solid var(--yooa-border); background:var(--yooa-surface); }
#yooa-wrap .count { font-size:13px; color:var(--yooa-muted); }
#yooa-wrap #list { padding:16px; }
#yooa-wrap #list.card-view { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
#yooa-wrap #list.list-view { display:flex; flex-direction:column; gap:8px; max-width:900px; margin:0 auto; }
#yooa-wrap .card {
    background:var(--yooa-surface); border-radius:var(--yooa-radius); overflow:visible;
    cursor:pointer; border:1px solid var(--yooa-border);
}
#yooa-wrap #list.card-view .card .thumb-wrap { position:relative; width:100%; padding-top:56.25%; overflow:hidden; background:var(--yooa-surface2); border-radius:var(--yooa-radius) var(--yooa-radius) 0 0; }
#yooa-wrap #list.card-view .card .thumb-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#yooa-wrap #list.card-view .card .no-thumb { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--yooa-border); }
#yooa-wrap #list.card-view .card .txt { padding:10px 12px 12px; }
#yooa-wrap .yt-badge {
    position:absolute; bottom:8px; right:8px;
    background:rgba(255,0,0,0.92); color:#fff;
    font-size:10px; font-weight:700; padding:3px 7px;
    border-radius:4px; display:flex; align-items:center; gap:4px; pointer-events:none;
}
#yooa-wrap .yt-badge svg { width:11px; height:11px; fill:#fff; flex-shrink:0; }
#yooa-wrap .vod-badge {
    position:absolute; bottom:8px; right:8px;
    background:rgba(0,100,200,0.92); color:#fff;
    font-size:10px; font-weight:700; padding:3px 7px;
    border-radius:4px; pointer-events:none;
}
#yooa-wrap .vod-btn-wrap { margin-bottom:18px; }
#yooa-wrap .vod-btn {
    display:inline-flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,#0064c8,#0044a0);
    color:#fff; font-size:14px; font-weight:700;
    padding:12px 22px; border-radius:10px;
    text-decoration:none; border:none; cursor:pointer;
    box-shadow:0 4px 14px rgba(0,80,200,0.35);
    transition:transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
#yooa-wrap .vod-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,80,200,0.5); filter:brightness(1.1); }
#yooa-wrap .vod-btn:active { transform:translateY(0); }
#yooa-wrap .vod-btn-icon {
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
#yooa-wrap .vod-btn-icon svg { width:14px; height:14px; fill:#fff; margin-left:2px; }
#yooa-wrap .vod-btn-text { display:flex; flex-direction:column; gap:1px; text-align:left; }
#yooa-wrap .vod-btn-text span:first-child { font-size:14px; font-weight:700; line-height:1; }
#yooa-wrap .vod-btn-text span:last-child { font-size:11px; font-weight:400; opacity:0.8; }
#yooa-wrap #list.card-view .card .title { font-size:14px; font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#yooa-wrap #list.list-view .card { display:flex; align-items:center; gap:14px; padding:12px; }
#yooa-wrap #list.list-view .card .thumb-wrap { flex-shrink:0; width:100px; height:66px; border-radius:6px; overflow:hidden; background:var(--yooa-surface2); position:relative; }
#yooa-wrap #list.list-view .card .thumb-wrap img { width:100%; height:100%; object-fit:cover; }
#yooa-wrap #list.list-view .card .no-thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--yooa-border); }
#yooa-wrap #list.list-view .card .txt { flex:1; min-width:0; }
#yooa-wrap #list.list-view .card .title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#yooa-wrap .viewer { position:fixed; inset:0; background:rgba(0,0,0,.96); display:none; z-index:999999; overflow-y:auto; }
#yooa-wrap .viewer.open { display:block; }
#yooa-wrap .viewer-inner { max-width:820px; margin:0 auto; padding:60px 20px 40px; }
#yooa-wrap .viewer-close {
    position:fixed; top:14px; right:30px; background:var(--yooa-surface2);
    border:1px solid var(--yooa-border); color:var(--yooa-text); width:38px; height:38px;
    border-radius:50%; font-size:20px; cursor:pointer; display:flex;
    align-items:center; justify-content:center; z-index:501; transition:background 0.15s;
}
#yooa-wrap .viewer-close:hover { background:var(--yooa-surface2); color:var(--yooa-accent); }
#yooa-wrap .viewer-title { font-size:20px; font-weight:700; line-height:1.4; margin-bottom:6px; color:#f0f0f0; }
#yooa-wrap .viewer-date { font-size:12px; color:#888; margin-bottom:16px; }
#yooa-wrap .viewer-reactions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
#yooa-wrap .reaction-item { background:var(--yooa-surface2); border:1px solid var(--yooa-border); border-radius:20px; padding:4px 10px; font-size:13px; display:flex; align-items:center; gap:4px; }
#yooa-wrap .viewer-main-img {
    width:100%; max-width:100%; max-height:520px;
    object-fit:contain; border-radius:var(--yooa-radius);
    cursor:zoom-in; background:#000; display:block; margin-bottom:18px;
}
#yooa-wrap .video-wrap { position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:var(--yooa-radius); overflow:hidden; margin-bottom:12px; }
#yooa-wrap .video-wrap iframe, #yooa-wrap .video-wrap video { position:absolute; inset:0; width:100%; height:100%; border:none; }
#yooa-wrap .source-link {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--yooa-surface2); border:1px solid var(--yooa-border);
    color:#aaa; font-size:13px; padding:7px 14px;
    border-radius:8px; text-decoration:none; margin-bottom:18px;
    transition:border-color 0.15s, color 0.15s;
}
#yooa-wrap .source-link:hover { border-color:#555; color:#fff; }
#yooa-wrap .source-link svg { width:14px; height:14px; fill:currentColor; }
#yooa-wrap .viewer-body {
    font-size:15px; line-height:1.85; color:#ccc;
    word-break:break-word; margin-bottom:20px;
}
#yooa-wrap .viewer-body * { max-width:100%; }
#yooa-wrap .viewer-body img { max-width:100%; height:auto; border-radius:6px; display:block; margin:10px 0; }
#yooa-wrap .viewer-body p { margin-bottom:0.6em; }
#yooa-wrap .viewer-body br { display:block; content:""; }
#yooa-wrap .viewer-source {
    display:flex; align-items:center; gap:8px;
    padding:14px 0; margin:4px 0;
    border-top:1px solid var(--yooa-border);
    font-size:13px; color:var(--yooa-muted);
}
#yooa-wrap .viewer-source a { color:var(--yooa-accent); text-decoration:none; word-break:break-all; transition:opacity 0.15s; }
#yooa-wrap .viewer-source a:hover { opacity:0.75; text-decoration:underline; }
#yooa-wrap .viewer-source svg { width:13px; height:13px; fill:currentColor; flex-shrink:0; }
#yooa-wrap .viewer-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:0; padding-top:14px; border-top:1px solid var(--yooa-border); }
#yooa-wrap .viewer-tags a {
    background:var(--yooa-surface2); border:1px solid var(--yooa-border);
    color:var(--yooa-text); font-size:12px; padding:4px 10px;
    border-radius:20px; text-decoration:none; transition:background 0.15s, color 0.15s, border-color 0.15s;
    font-weight:600;
}
#yooa-wrap .viewer-tags a:hover { background:#555; border-color:#555; color:#fff; }
#yooa-wrap .skeleton { background:linear-gradient(90deg,var(--yooa-surface) 25%,var(--yooa-surface2) 50%,var(--yooa-surface) 75%); background-size:200% 100%; animation:yooa-shimmer 1.4s infinite; border-radius:6px; }
@keyframes yooa-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
#yooa-wrap .viewer-loading { display:flex; flex-direction:column; gap:14px; padding-top:20px; }
#yooa-wrap .sk-title{height:28px;width:70%} #yooa-wrap .sk-img{height:300px} #yooa-wrap .sk-line{height:16px} #yooa-wrap .sk-line.short{width:60%}
#yooa-wrap .empty { text-align:center; padding:60px 20px; color:var(--yooa-muted); font-size:15px; }
#yooa-wrap .list-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; gap:16px; }
#yooa-wrap .spinner {
    width:40px; height:40px; border-radius:50%;
    border:3px solid var(--yooa-border);
    border-top-color:var(--yooa-accent);
    animation:yooa-spin 0.8s linear infinite;
}
@keyframes yooa-spin { to { transform:rotate(360deg); } }
#yooa-wrap .loading-text { font-size:13px; color:var(--yooa-muted); letter-spacing:0.04em; }
#yooa-wrap .error-msg { text-align:center; padding:40px 20px; color:#e05555; font-size:14px; line-height:2; }

/* Fancybox가 viewer(z-index:999999) 위에 렌더링되도록 z-index 상향 */
.fancybox-container { z-index:1000000 !important; }

@media(max-width:480px){
    #yooa-wrap #list.card-view{grid-template-columns:repeat(2,1fr);gap:10px;padding:10px;}
    #yooa-wrap .viewer-inner{padding:56px 14px 30px;}
}