/*
 * PAIR ROLEPLAY · DIALOGUE SKIN
 * dialog_lt / dialogue_lt 구조를 현재 사이트에 맞게 재해석.
 */

.dialogue-page{
    --dialogue-accent:#b85f72;
    --actor-a:#b85f72;
    --actor-b:#8a7f88;
    padding:40px 42px 80px;
}

.dialogue-page *{box-sizing:border-box}

.dialogue-page-head{
    margin-bottom:32px;
    padding-bottom:22px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    border-bottom:1px solid var(--line);
}

.dialogue-kicker{
    margin:0 0 8px;
    color:var(--dialogue-accent);
    font-family:"Cormorant Garamond",serif;
    font-size:11px;
    letter-spacing:.18em;
}

.dialogue-page-head h1{
    margin:0;
    color:var(--text);
    font-family:"Cormorant Garamond","Noto Serif KR",serif;
    font-size:42px;
    font-weight:400;
}

.dialogue-page-sub{
    margin:7px 0 0;
    color:var(--text-soft);
    font-size:11px;
}

.dialogue-back,
.dialogue-view-top a{
    color:var(--text-soft);
    text-decoration:none;
    font-size:10px;
    letter-spacing:.08em;
}

.dialogue-back:hover,
.dialogue-view-top a:hover{color:var(--dialogue-accent)}

.dialogue-empty{
    padding:78px 20px;
    border:1px solid var(--line);
    color:var(--text-soft);
    text-align:center;
    font-size:11px;
}

/* LIST */

.dialogue-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.dialogue-card{
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.dialogue-card-media{
    position:relative;
    overflow:hidden;
    min-height:260px;
    border:1px solid var(--line);
    border-radius:16px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb,var(--actor-a) 13%,var(--panel)),
            color-mix(in srgb,var(--actor-b) 12%,var(--panel))
        );
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.dialogue-card:hover .dialogue-card-media{
    transform:translateY(-3px);
    border-color:var(--dialogue-accent);
    box-shadow:0 12px 28px rgba(75,55,48,.08);
}

.dialogue-card-cover{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.dialogue-card:hover .dialogue-card-cover{transform:scale(1.035)}

.dialogue-card-fallback{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    opacity:.45;
    filter:saturate(.75);
}

.dialogue-card-fallback img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.dialogue-card-fallback img:first-child{object-position:40% center}
.dialogue-card-fallback img:last-child{object-position:60% center}

.dialogue-card-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(0,0,0,.02) 15%,rgba(0,0,0,.08) 45%,rgba(15,10,12,.76) 100%);
}

.dialogue-card-copy{
    position:absolute;
    left:22px;
    right:150px;
    bottom:20px;
    z-index:2;
    color:#fff;
}

.dialogue-card-meta{
    display:block;
    margin-bottom:8px;
    font-size:9px;
    letter-spacing:.11em;
    opacity:.72;
}

.dialogue-card-copy h2{
    margin:0;
    font-family:"Noto Serif KR",serif;
    font-size:20px;
    font-weight:500;
    line-height:1.4;
    word-break:keep-all;
}

.dialogue-card-copy p{
    margin:6px 0 0;
    font-size:10px;
    line-height:1.6;
    opacity:.78;
}

.dialogue-card-actors{
    position:absolute;
    right:17px;
    bottom:16px;
    z-index:3;
    display:flex;
    align-items:center;
}

.dialogue-card-actor{
    width:64px;
    height:64px;
    overflow:hidden;
    display:block;
    border:3px solid rgba(255,255,255,.88);
    border-radius:50%;
    background:var(--panel);
    box-shadow:0 4px 12px rgba(0,0,0,.16);
}

.dialogue-card-actor + .dialogue-card-actor{margin-left:-15px}

.dialogue-card-actor img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.dialogue-card-actor.actor-a{box-shadow:0 0 0 2px var(--actor-a),0 4px 12px rgba(0,0,0,.16)}
.dialogue-card-actor.actor-b{box-shadow:0 0 0 2px var(--actor-b),0 4px 12px rgba(0,0,0,.16)}

/* VIEW */

.dialogue-view{
    width:min(880px,100%);
    margin:0 auto;
}

.dialogue-view-top{
    margin-bottom:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.dialogue-hero{
    position:relative;
    overflow:hidden;
    min-height:170px;
    border:1px solid var(--line);
    border-radius:18px 18px 0 0;
    background:
        linear-gradient(135deg,
            color-mix(in srgb,var(--actor-a) 9%,var(--panel)),
            color-mix(in srgb,var(--actor-b) 8%,var(--panel))
        );
}

.dialogue-hero-cover{
    position:absolute;
    inset:0;
}

.dialogue-hero-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.82);
}

.dialogue-hero-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(0,0,0,.08),color-mix(in srgb,var(--panel) 94%,transparent) 100%);
}

.dialogue-hero-copy{
    position:relative;
    z-index:2;
    min-height:170px;
    padding:40px 28px 30px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    text-align:center;
}

.dialogue-hero-meta{
    margin-bottom:8px;
    color:var(--text-soft);
    font-size:9px;
    letter-spacing:.12em;
}

.dialogue-hero-copy h2{
    margin:0;
    color:var(--text);
    font-family:"Noto Serif KR",serif;
    font-size:30px;
    font-weight:500;
    line-height:1.35;
}

.dialogue-hero-copy p{
    margin:8px 0 0;
    color:var(--text-soft);
    font-size:11px;
}

.dialogue-actors{
    padding:22px 18px 24px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    border:1px solid var(--line);
    border-top:0;
    background:var(--panel);
}

.dialogue-actor{
    width:125px;
    color:inherit;
    text-align:center;
    text-decoration:none;
}

.dialogue-actor-image{
    width:82px;
    height:82px;
    margin:0 auto 10px;
    overflow:hidden;
    display:block;
    border:3px solid var(--panel);
    border-radius:50%;
    background:var(--bg);
}

.dialogue-actor.actor-a .dialogue-actor-image{box-shadow:0 0 0 2px var(--actor-a)}
.dialogue-actor.actor-b .dialogue-actor-image{box-shadow:0 0 0 2px var(--actor-b)}

.dialogue-actor-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.dialogue-actor strong{
    display:block;
    font-size:11px;
    font-weight:500;
}

.dialogue-actor.actor-a strong{color:var(--actor-a)}
.dialogue-actor.actor-b strong{color:var(--actor-b)}

.dialogue-actor small{
    display:block;
    margin-top:3px;
    color:var(--text-soft);
    font-size:9px;
}

.dialogue-actor-x{
    color:var(--text-soft);
    font-family:"Cormorant Garamond",serif;
    font-size:23px;
}

.dialogue-scenes{
    margin-top:24px;
    display:grid;
    gap:16px;
}

.dialogue-scene{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
    background:color-mix(in srgb,var(--panel) 96%,var(--bg));
}

.dialogue-scene-head{
    min-height:50px;
    padding:10px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--bg) 44%,var(--panel));
}

.dialogue-scene-date{
    color:var(--text);
    font-size:10px;
    letter-spacing:.08em;
}

.dialogue-scene-source{
    margin-left:8px;
    color:var(--dialogue-accent);
    font-size:8px;
    letter-spacing:.09em;
}

.dialogue-scene-count{
    margin-left:8px;
    color:var(--text-soft);
    font-size:8px;
    letter-spacing:.09em;
}

.dialogue-scene-toggle{
    padding:5px 8px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--text-soft);
    cursor:pointer;
    font-size:8px;
    letter-spacing:.1em;
}

.dialogue-scene-toggle:hover{
    border-color:var(--dialogue-accent);
    color:var(--dialogue-accent);
}

.dialogue-message-list{
    padding:24px 24px 28px;
    transition:max-height .25s ease;
}

.dialogue-scene.is-folded .dialogue-message-list{
    max-height:0;
    overflow:hidden;
    padding-top:0;
    padding-bottom:0;
}

.dialogue-message{
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:10px;
    align-items:start;
    margin-top:14px;
}

.dialogue-message:first-child{margin-top:0}

.dialogue-message.side-b{
    grid-template-columns:minmax(0,1fr) 50px;
}

.dialogue-message-avatar{
    width:50px;
    min-height:50px;
}

.dialogue-message-avatar a{
    width:50px;
    height:50px;
    overflow:hidden;
    display:block;
    border-radius:50%;
    background:var(--bg);
}

.side-a .dialogue-message-avatar a{box-shadow:0 0 0 1px var(--actor-a)}
.side-b .dialogue-message-avatar a{box-shadow:0 0 0 1px var(--actor-b)}

.dialogue-message-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.dialogue-message-main{
    min-width:0;
    max-width:72%;
}

.side-b .dialogue-message-avatar{
    grid-column:2;
    grid-row:1;
}

.side-b .dialogue-message-main{
    grid-column:1;
    grid-row:1;
    justify-self:end;
}

.dialogue-message.is-continued{margin-top:6px}
.dialogue-message.is-continued .dialogue-message-avatar{min-height:1px}

.dialogue-message-name{
    margin:0 0 5px 3px;
    display:flex;
    align-items:baseline;
    gap:7px;
}

.side-b .dialogue-message-name{
    justify-content:flex-end;
    margin-left:0;
    margin-right:3px;
}

.dialogue-message-name strong{
    font-size:10px;
    font-weight:600;
}

.side-a .dialogue-message-name strong{color:var(--actor-a)}
.side-b .dialogue-message-name strong{color:var(--actor-b)}

.dialogue-message-name span{
    color:var(--text-soft);
    font-size:8px;
}

.dialogue-bubble{
    position:relative;
    min-width:42px;
    padding:10px 13px;
    border:1px solid var(--line);
    border-radius:13px;
    color:var(--text);
    font-size:13px;
    line-height:1.62;
    word-break:break-word;
    box-shadow:0 2px 10px rgba(0,0,0,.025);
}

.side-a .dialogue-bubble{
    background:color-mix(in srgb,var(--actor-a) 8%,var(--panel));
    border-color:color-mix(in srgb,var(--actor-a) 22%,var(--line));
    border-top-left-radius:4px;
}

.side-b .dialogue-bubble{
    background:color-mix(in srgb,var(--actor-b) 8%,var(--panel));
    border-color:color-mix(in srgb,var(--actor-b) 22%,var(--line));
    border-top-right-radius:4px;
}

.dialogue-text{white-space:normal}

.dialogue-time{
    display:block;
    margin:4px 4px 0;
    color:var(--text-soft);
    font-size:8px;
}

.side-b .dialogue-time{text-align:right}

.dialogue-narration{
    width:min(620px,92%);
    margin:18px auto;
    padding:11px 14px;
    border-top:1px dashed var(--line);
    border-bottom:1px dashed var(--line);
    color:var(--text-soft);
    text-align:center;
    font-size:10px;
    line-height:1.7;
}

.dialogue-narration time{
    display:block;
    margin-top:5px;
    font-size:8px;
    opacity:.7;
}

/* IMAGES */

.dialogue-images{
    margin-top:9px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
}

.dialogue-images.count-1{grid-template-columns:1fr}
.dialogue-images.count-3 .dialogue-image-button:first-child{grid-row:span 2}

.dialogue-image-button{
    overflow:hidden;
    min-width:0;
    padding:0;
    border:0;
    border-radius:8px;
    background:var(--bg);
    cursor:zoom-in;
}

.dialogue-image-button img{
    width:100%;
    height:150px;
    display:block;
    object-fit:cover;
}

.dialogue-images.count-1 img{
    height:auto;
    max-height:480px;
    object-fit:contain;
}

.dialogue-lightbox[hidden]{display:none!important}

.dialogue-lightbox{
    position:fixed;
    inset:0;
    z-index:10000;
    padding:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,12,13,.88);
    backdrop-filter:blur(4px);
}

.dialogue-lightbox img{
    max-width:min(1100px,94vw);
    max-height:88vh;
    object-fit:contain;
}

.dialogue-lightbox-close{
    position:absolute;
    top:18px;
    right:24px;
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    background:rgba(0,0,0,.2);
    color:#fff;
    cursor:pointer;
    font-size:24px;
}

html.dialogue-lightbox-open{overflow:hidden}

@media(max-width:760px){
    .dialogue-page{padding:28px 18px 60px}
    .dialogue-grid{grid-template-columns:1fr}
    .dialogue-card-media{min-height:220px}
    .dialogue-message-main{max-width:82%}
    .dialogue-message-list{padding:20px 14px 24px}
}

@media(max-width:500px){
    .dialogue-page-head h1{font-size:34px}
    .dialogue-card-copy{right:115px}
    .dialogue-card-actor{width:50px;height:50px}
    .dialogue-hero-copy h2{font-size:24px}
    .dialogue-actor{width:108px}
    .dialogue-actor-image{width:68px;height:68px}
    .dialogue-message{
        grid-template-columns:38px minmax(0,1fr);
        gap:8px;
    }
    .dialogue-message.side-b{
        grid-template-columns:minmax(0,1fr) 38px;
    }
    .dialogue-message-avatar,
    .dialogue-message-avatar a{
        width:38px;
        height:38px;
        min-height:38px;
    }
    .dialogue-message-main{max-width:90%}
    .dialogue-bubble{font-size:12px}
    .dialogue-image-button img{height:120px}
    .dialogue-lightbox{padding:20px}
}