@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;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;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.ig-chip{background:#fff;display:inline-flex;gap:8px;align-items:center;font-weight:500;color:var(--black);}
.ig-meta-right{width: 100%; display:flex;gap:10px;align-items:center;justify-content: right}
.ig-btn{border:1px solid var(--line);background:#fff;border-radius:4px;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(5, minmax(0, 1fr));}
.ig-card{background:#fff;overflow:hidden;border:1px solid var(--white);display:flex;flex-direction:column;cursor: pointer}
.no-data-card{height: 70vh; grid-column: span 5; font-size: 28px; font-weight: 700; line-height: 70vh; text-align: center}
/*.ig-card.is-selected{outline-offset:-3px}*/
.ig-thumb{aspect-ratio:4/5;background:#f1f3f5;display:flex;align-items:center;justify-content:center; overflow: hidden; position: relative;}
.ig-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ig-thumb-hover-box{display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: 1;}
.ig-thumb:hover .ig-thumb-hover-box{display: flex; justify-content: center; align-items: center; color: var(--white)}
.ig-thumb svg{margin-right: 6px;}

.ig-stats{display:flex;justify-content:left;gap:8px;padding: 8px 12px 8px 5px;}
.ig-stat{display:inline-flex;gap:6px;align-items:center;padding:0.5em; font-size:1rem;}
.ig-stat svg, .ig-thumb svg{width: 1.2em; height: 1.2em;}
.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: var(--point-blue-1);
    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(3, 1fr); } }
@media (max-width: 767px) {
    .ig-report-wrap { padding: 2em; }
}
@media (max-width:600px) {
    .ig-grid{ grid-template-columns: repeat(3, 1fr); }
    .ig-stats{ gap: 2%; padding: 2%}
    .ig-stat{padding-right: unset; font-size: 12px;}

    .ig-report-meta{flex-wrap: wrap;}
}
@media (max-width:390px) {
    .ig-grid{ grid-template-columns:repeat(2, 1fr); }
    .ig-stats{ gap: 2%; padding: 2%}
    .ig-stat{padding-right: unset; font-size: 12px;}
}


.ig-wrap {width: 60%; min-width: 760px; max-width: 1200px; margin: 36px auto; }
.ig-wrap .page-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; }

.ig-wrap .content { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 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; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: 10px}
.ig-wrap .chip { }

.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-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-radius:10px;padding:8px;}
.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 minmax(100px, 1fr);gap:10px;align-items:center}
.ig-wrap .meta .lab{font-weight:700;color:#334155}
.ig-wrap .meta .seg{width: 100%; display:flex;flex-wrap:wrap;gap:8px}
.ig-wrap .meta .seg-col{width: 100%; flex-direction:column;gap:10px}
.ig-wrap .meta .sub-lab{width:90px;display:inline-block}
.ig-wrap .meta .chip{flex-grow: 1; 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{width: 100%; 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>div{flex-wrap: wrap;}
.ig-wrap .meta .kw input{width: 100%; 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}

.ig-wrap .content .media .row-actions span.tx{display: flex; align-items: center;}
@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; margin-bottom: 16px}
.comment-panel__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 16px 20px;
}

@media (max-width:450px){
    .ig-wrap .meta .row{display: flex; flex-wrap: wrap;}
    .ig-wrap .meta .lab{width: 100%;}

}
@media (max-width:360px){
    .ig-wrap .meta .dates input[type="date"]{width: 9em; font-size: 0.9rem;}
}
.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; }


@media (max-width:500px){
    .comment-panel__head{flex-wrap: wrap; gap: 8px}
    .comment-panel__head .left{width: 100%;}
    .comment-panel__head .right{margin-left: auto;}
}

.tb-flex { width: 100%; height: 100%; font-size: 14px; overflow-x: auto; overflow-y: hidden;}
.tb-flex .thead { display: flex; font-weight: 600; background: #fff; }
.tb-flex .tbody { height: calc(100% - 3.2em); display: block; max-height: 600px; overflow-y: scroll; overflow-x: hidden;}
.tb-flex .tr { display: flex; transition: background 0.2s;}
.tb-flex .th input[type="checkbox"]:checked, .tb-flex .tr input[type="checkbox"]:checked{border-color: var(--black); background-color: var(--black);}
.tb-flex .th, .tb-flex .td { padding: 10px 10px; border-bottom: 1px solid #e5e8eb; display: block; align-content: center; box-sizing: content-box;}

/* 컬럼 너비 설정 (기존 colgroup 참고) */
.col-ck { justify-content: center; flex-shrink: 0; }
.col-no { width: 35px; justify-content: center; flex-shrink: 0; }
.col-id { width: 91px; flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}
.col-comment { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; min-width: 156px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col-count { width: 55px; justify-content: center; flex-shrink: 0; }
.col-likes { width: 55px; justify-content: center; flex-shrink: 0; }
.col-time { width: 117px; justify-content: center; flex-shrink: 0; }
.td.col-time{ font-size: 13px; }

.tb-flex .td span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 기존 스타일 유지 및 보완 */
.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; border:none; border-radius:999px;
    font-size: inherit; line-height:1; cursor:pointer; user-select:none; margin-right:.5rem;
    background: transparent;
}

.chips input[type="radio"] + .chip{
    transition: all ease 0.2s;
}

/* 선택됨 */
.chips input[type="radio"]:checked + .chip{
    background-color: black;
    color: white;
    padding: 2px 10px;
}

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

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

.ig-wrap .pagination > ul > li.now > a{color: var(--black);}

@media (max-width:768px){

    .ig-wrap {
        width: 80%;
        min-width: 300px;
        max-width: 768px;
    }

    .ig-wrap .filter-bar{
        flex-direction: column;
    }

    .ig-wrap .filter-row{
        flex-direction: column;
        align-items : start;
    }

    .ig-wrap .btn-search{
        width: 70%;
        padding: 0.5em 0;
        margin: 0 auto;
    }

    .ig-wrap .detail-container{
        flex-direction: column;
        border-radius: 12px 12px 0 0;
    }

    .ig-wrap .media-card{
        border-radius: 12px 12px 0 0;
        flex : unset;
    }

    .ig-wrap .table-card{
        border-left: 1px solid #e9edf2;
        border-top: unset;
        border-radius: 0;
        aspect-ratio: 0;
    }

    .ig-wrap .kw input{
        /*width: 100%;*/
    }

    .ig-wrap #pickCount{
        /*width: calc(100% - 1.2em);*/
    }

    .ig-wrap #campaignName{
        width: 100%;
    }

    .ig-wrap .winner-management{padding: 20px 0}

    .ig-wrap .winner-info-input-wrap{justify-content: center;}
    .ig-wrap .winner-info-input-wrap .filter-item{width: 100%; flex-direction: column;}
    .ig-wrap .winner-info-input-wrap .filter-item input{margin-left: unset; text-align: center}

    .ig-wrap .winner-controls .btn-reset{
        padding: 12px 0;
        font-size: 18px;
        width: 30%;
    }

    .ig-wrap .winner-controls .btn-save{
        padding: 12px 0;
        font-size: 18px;
        width: calc(70% - 12px);
    }

}

/* 인스타그램 검색 페이지 */
.ig-search-container {
    padding: 100px 20px;
    text-align: center;
    background-color: #fff;
    min-height: 100vh;
}

.ig-search-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    margin-bottom: 48px;
    letter-spacing: -0.5px;
}

.ig-search-form-wrap {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
}

.ig-search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #3b82f6;
    border-radius: 40px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    transition: box-shadow 0.3s ease;
}

.ig-search-box:focus-within {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
}

.ig-search-box .ig-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
}

.ig-search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    color: #111;
    padding: 10px 0;
    background: transparent;
}

.ig-search-box input::placeholder {
    color: #999;
}

.ig-search-box .sch_btn {
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.ig-search-box .sch_btn:hover {
    background: #2563eb;
}

.go_dm_demo{
    margin-top: 24px;
    display: block;
    text-decoration: underline;
    color: var(--mono-4);
    font-size: 18px;
}

.ig-search-error-info {
    margin-top: 24px;
    text-align: left;
    display: inline-block;
    color: #666;
    font-size: 15px;
    line-height: 1.8;
}

.ig-search-error-info p {
    margin: 0;
}

/* 로딩 애니메이션 */
.skeleton-wrap {
    margin-top: 40px;
    display: none;
}

.skeleton-item {
    background: #f1f3f5;
    background: linear-gradient(90deg, #f1f3f5 25%, #e9ecef 50%, #f1f3f5 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
    margin: 0 auto 12px;
}

.skeleton-text {
    width: 300px;
    height: 20px;
}

.skeleton-card {
    width: 100%;
    max-width: 600px;
    height: 100px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 768px) {
    .ig-search-title {
        font-size: 20px;
        margin-bottom: 32px;
    }
    .ig-search-box {
        padding: 4px 4px 4px 16px;
    }
    .ig-search-box input {
        font-size: 16px;
    }
    .ig-search-box .sch_btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .go_dm_demo{
        margin-top: 14px;
    }
}