@charset "utf-8";

.ig-report-wrap{--gap:16px;--card-r:14px;--shadow:0 4px 14px rgba(0,0,0,.06);--line:#e9ecf0;--muted:#6b7785}
.ig-report-wrap{padding:100px;background:#f4f6f8;min-height:100vh;box-sizing:border-box}
.ig-report-header{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.ig-report-title{font-size:24px;font-weight:700;letter-spacing:-.2px}
.ig-report-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.ig-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;display:inline-flex;gap:8px;align-items:center}
.ig-meta-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.ig-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer}
.ig-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
/*.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap)}*/
.ig-grid{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: var(--gap);}
.ig-card{background:#fff;border-radius:var(--card-r);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.ig-card.is-selected{outline-offset:-3px}
.ig-thumb{aspect-ratio:1/1;background:#f1f3f5;display:flex;align-items:center;justify-content:center}
.ig-thumb img{width:100%;height:100%;object-fit:cover;display:block;max-height:450px;}
.ig-stats{display:flex;justify-content:space-between;gap:8px;background:#fafbfc;border-top:1px solid var(--line);padding:8px 12px}
.ig-stat{display:inline-flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:15px 10px;flex:1}
.ig-stat svg{width:16px;height:16px;flex:0 0 16px}
.ig-stat .num{font-weight:600}
.ig-heart{fill:#e53935}
.ig-comment{fill:#1f2937}
.ig-loader{
    display:flex; gap:10px; align-items:center; justify-content:center;
    padding:16px; color:#6b7785;
}
.ig-loader .spin {
    width:50px; height:50px; border:2px solid #e3e7ee; border-top-color: #F58529;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
.ig-loader[hidden] { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width:1280px){.ig-report-title{font-size:26px}}
@media (max-width:1280px){ .ig-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:900px) { .ig-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px) { .ig-grid{ grid-template-columns: 1fr; } }


.ig-wrap { max-width: 1200px; margin: 24px auto; padding: 0 20px; }
.ig-wrap .page-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; }

.ig-wrap .content { display: grid; grid-template-columns: minmax(320px, 1fr) 2fr; gap: 24px; }
@media (max-width: 1100px) { .ig-wrap .content { grid-template-columns: 1fr; } }

/* 미디어 영역 */
.ig-wrap .media { background: #fff; border: 1px solid #e9edf2; border-radius: 12px; padding: 16px; }
.ig-wrap .media-frame { aspect-ratio:1/1; width: 100%; background: #f5f7fa; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ig-wrap .media-frame img { width: 100%; height: 100%; object-fit: cover; }

.ig-wrap .thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.ig-wrap .thumb { border: 1px solid #e6eaf0; background: #fff; border-radius: 10px; padding: 6px;
    min-width: 92px; cursor: pointer; transition: border-color .15s; }
.ig-wrap .thumb.is-active { border-color: #3b82f6; }
.ig-wrap .thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; display: block; }

/* 우측 정보 카드 */
.ig-wrap .card { background: #fff; border: 1px solid #e9edf2; border-radius: 12px; padding: 16px; }
.ig-wrap .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ig-wrap .chip { background: #f1f5ff; color: #1f3b8e; border: 1px solid #dfe8ff; border-radius: 999px;
    padding: 6px 10px; font-size: 12px; }

.ig-wrap .meta { display: grid; gap: 12px; }
.ig-wrap .meta dl { display: grid; grid-template-columns: 60px 1fr; row-gap: 6px; column-gap: 8px; }
.ig-wrap .meta dt { color: #6b7280; }
.ig-wrap .meta dd b { font-weight: 700; }

.ig-wrap .permalink a { color: #2563eb; text-decoration: underline; word-break: break-all; }
.ig-wrap .caption { white-space: pre-line; line-height: 1.5; }

/* 댓글 */
.ig-wrap .comments { background: #fff; border: 1px solid #e9edf2; border-radius: 12px; margin-top: 24px; }
.ig-wrap .comments .head { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #eef2f6; }
.ig-wrap .comments .head h3 { font-size: 16px; font-weight: 700; }
.ig-wrap .comments .list { padding: 0; margin: 0; list-style: none; }
.ig-wrap .comments .item { display: grid; grid-template-columns: 40px 1fr; gap: 12px;
    padding: 14px 16px; border-top: 1px solid #f3f6f9; }
.ig-wrap .comments .avatar { width: 40px; height: 40px; border-radius: 50%; background: #eef2f6; }
.ig-wrap .comments .who { font-weight: 700; }
.ig-wrap .comments .when { color: #9aa3af; margin-left: 6px; font-size: 12px; }
.ig-wrap .comments .text { margin-top: 6px; line-height: 1.5; }

/* 좌 카드 – URL 입력/인디케이터/바텀 스탯 */
.ig-wrap .url-input{position:relative;margin-bottom:10px}
.ig-wrap .url-input input{width:100%;height:38px;border:1px solid #e6ebf2;border-radius:10px;background:#f7f9fc;padding:0 14px 0 38px;color:#9aa3af}
.ig-wrap .url-input svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.6}
.ig-wrap .dots{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:10px}
.ig-wrap .dot{width:8px;height:8px;border-radius:999px;background:#d1d5db}
.ig-wrap .dot.is-active{background:#6b7280}
.ig-wrap .stats{display:flex;gap:10px;justify-content:space-between;border:1px solid #e6ebf2;border-radius:12px;padding:10px;background:#fff;margin-top:10px}
.ig-wrap .stat{flex:1;display:flex;gap:8px;align-items:center;justify-content:center;border:1px solid #e6ebf2;border-radius:10px;padding:8px;background:#fafbfc}
.ig-wrap .stat svg{width:18px;height:18px}
.ig-wrap .stat .heart{fill:#e53935}
.ig-wrap .stat .cmnt{fill:#111827}

/* 우 카드 – 분석 요청 */
.ig-wrap .meta .note{display:flex;gap:8px;align-items:center;background:#e9fbe9;border:1px solid #b9f3c0;border-radius:10px;padding:10px 12px;margin-bottom:12px;color:#065f46}
.ig-wrap .meta .rows{display:grid;gap:14px}
.ig-wrap .meta .row{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:center}
.ig-wrap .meta .lab{font-weight:700;color:#334155}
.ig-wrap .meta .seg{display:flex;flex-wrap:wrap;gap:8px}
.ig-wrap .meta .seg-col{flex-direction:column;gap:10px}
.ig-wrap .meta .sub-lab{width:90px;display:inline-block}
.ig-wrap .meta .chip{border:1px solid #e6ebf2;background:#fff;color:#111827;border-radius:10px;padding:8px 10px;cursor:pointer}
.ig-wrap .meta .chip.is-active{border-color:#2563eb;background:#eff6ff;color:#0b3ea8}
.ig-wrap .meta .dates{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ig-wrap .meta .dates input[type="date"]{height:38px;border:1px solid #e6ebf2;border-radius:10px;padding:0 10px;background:#fff}
.ig-wrap .meta .kw{display:flex;gap:8px;align-items:center}
.ig-wrap .meta .kw input{flex:1;height:38px;border:1px solid #e6ebf2;border-radius:10px;padding:0 12px}
.ig-wrap .meta .btn{height:38px;border:1px solid #e6ebf2;background:#fff;border-radius:10px;padding:0 12px;cursor:pointer}
.ig-wrap .meta .btn.primary{background:#111827;color:#fff;border-color:#111827}
.ig-wrap .content .media .actions{margin-top:10px;border-top:1px dashed #e6ebf2;padding-top:14px;display:grid;gap:10px}
.ig-wrap .content .media .actions h3{margin:0 0 6px 0;font-size:14px}
.ig-wrap .content .media .row-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:800px){ .ig-wrap .content .media .row-actions{grid-template-columns:1fr} }
.ig-wrap .content .media .action{display:flex;align-items:center;justify-content:center;gap:10px;padding:5px 16px;border:1px solid #e6ebf2;border-radius:12px;background:#fff;cursor:pointer;transition:box-shadow .15s,transform .05s}
.ig-wrap .content .media .action:active{transform:translateY(1px)}
.ig-wrap .meta .arr{width:20px;height:20px;opacity:.7}
.ig-wrap .muted{color:#6b7280}

/* 댓글 분석 테이블 */
.comment-panel { margin-top: 24px; }
.comment-panel__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 16px 20px;
}
.comment-panel__head h3 { font-size: 18px; margin-right: 10px; }
.comment-panel__head .daterange { display: flex; gap: 6px; align-items: center; color:#666; font-size:14px; }
.pill { display:inline-block; background:#f2f4f6; border-radius:20px; padding:4px 10px; margin-left:8px; font-weight:600; color:#333; }
.dash { color:#999; }
.table-wrap { padding: 0 16px 16px; }

.tb { width:100%; border-collapse: separate; border-spacing:0; font-size:14px; }
.tb thead th {
    background:#f9fafb; color:#444; font-weight:600; text-align:left;
    padding:12px 10px; border-top:1px solid #e5e8eb; border-bottom:1px solid #e5e8eb;
}
.tb tbody td { padding:12px 10px; border-bottom:1px solid #eef1f3; vertical-align: middle; }
.tb--striped tbody tr:nth-child(odd){ background:#fff; }
.tb--striped tbody tr:nth-child(even){ background:#fcfcfd; }
.tb--striped tbody tr.on {background:#6987FF}
.tb--striped tbody tr.off {background:#6987FF}

.btn--ghost { border:1px solid #d7dde5; background:#fff; padding:8px 12px; border-radius:8px; font-size:13px; }
/*.select { border:1px solid #d7dde5; padding:8px 10px; border-radius:8px; margin-right:8px; background:#fff; }*/

/* 접근성용 숨김 텍스트(이미 프로젝트에 있으면 생략) */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* 라디오를 시각적으로만 숨기고 접근성 유지 */
.chips input[type="radio"]{
    position:absolute; opacity:0; width:1px; height:1px; margin:-1px;
    clip:rect(0 0 0 0); overflow:hidden;
}

/* 칩 스타일 */
.chip{
    display:inline-block; padding:.45rem .8rem; border:1px solid #ddd; border-radius:999px;
    font-size:.9rem; line-height:1; cursor:pointer; user-select:none; margin-right:.5rem;
}

/* 선택됨 */
.chips input[type="radio"]:checked + .chip{
    border-color:#2b6cff; background:#2b6cff10;
}

/* 키보드 포커스 링 */
.chips input[type="radio"]:focus-visible + .chip{
    outline:2px solid #2b6cff; outline-offset:2px;
}

#seg-sort .chip,
#seg-dedupe .chip {
    display: inline-flex; /* 또는 inline-block */
}