:root{
    --pgn-bg:#fffaf7;
    --pgn-paper:#fffdfb;
    --pgn-ink:#4d403b;
    --pgn-muted:#927d75;
    --pgn-pink:#ef7d98;
    --pgn-pink-hover:#e66e89;
    --pgn-pink-soft:#fde9ee;
    --pgn-line:#eadfd9;
    --pgn-line-soft:#f2e9e5;
    --pgn-max:1480px;
}


/* =========================================================
   COMMON
========================================================= */

.pgn{
    width:min(var(--pgn-max),calc(100% - 80px));
    margin:0 auto;
    color:var(--pgn-ink);
}

.pgn *,
.pgn *::before,
.pgn *::after{
    box-sizing:border-box;
}

.pgn a{
    color:inherit;
    text-decoration:none;
}

.pgn button,
.pgn input,
.pgn textarea,
.pgn select{
    font-family:inherit;
}


/* accessibility */

.pgn .sound_only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}


/* =========================================================
   LIST - HERO
========================================================= */

.pgn-hero{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;

    padding:90px 0 46px;

    border-bottom:1px solid var(--pgn-line);
}

.pgn-kicker{
    margin:0 0 13px;

    color:var(--pgn-pink);

    font-size:.64rem;
    font-weight:800;
    letter-spacing:.17em;
}

.pgn-hero h1{
    margin:0;

    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(3rem,5.7vw,5.8rem);
    line-height:1;
    font-weight:500;
    letter-spacing:-.05em;
}

.pgn-intro{
    margin:17px 0 0;

    color:var(--pgn-muted);

    font-size:.92rem;
}

.pgn-count{
    padding-bottom:8px;

    color:var(--pgn-muted);

    font-size:.62rem;
    letter-spacing:.15em;
}


/* =========================================================
   LIST - ROW
========================================================= */

.pgn-table{
    padding:16px 0 60px;
}

.pgn-row{
    border-bottom:1px solid var(--pgn-line);
}

.pgn-row-link{
    display:grid;
    grid-template-columns:110px minmax(0,1fr) 130px;
    gap:22px;

    align-items:center;

    min-height:78px;
    padding:0 16px;

    transition:background .2s ease;
}

.pgn-row-link:hover{
    background:#fff5f7;
}

.pgn-type{
    display:flex;
    align-items:center;
}

.pgn-no{
    color:#b6a49d;
    font-size:.72rem;
}

.pgn-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:28px;
    padding:0 10px;

    border-radius:999px;

    background:var(--pgn-pink-soft);
    color:var(--pgn-pink);

    font-size:.55rem;
    font-weight:900;
    letter-spacing:.1em;
}

.pgn-title{
    display:flex;
    align-items:center;
    gap:8px;

    min-width:0;
}

.pgn-title h2{
    margin:0;

    overflow:hidden;

    color:var(--pgn-ink);

    font-size:.94rem;
    line-height:1.5;
    font-weight:600;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.pgn-new{
    flex:0 0 auto;

    color:var(--pgn-pink);

    font-size:.52rem;
    font-weight:900;
    letter-spacing:.08em;
}

.pgn-date{
    justify-self:end;

    color:#aa9790;

    font-size:.68rem;
}


/* =========================================================
   LIST - EMPTY
========================================================= */

.pgn-empty{
    padding:130px 20px;
    text-align:center;
}

.pgn-empty > span{
    color:var(--pgn-pink);
    font-size:2rem;
}

.pgn-empty h2{
    margin:15px 0 8px;

    font-family:Georgia,"Times New Roman",serif;
    font-size:2rem;
    font-weight:500;
}

.pgn-empty p{
    margin:0;

    color:var(--pgn-muted);

    font-size:.82rem;
}


/* =========================================================
   LIST - FOOTER
========================================================= */

.pgn-footer{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    min-height:110px;
    padding-bottom:60px;
}

.pgn-write-btn{
    position:absolute;
    top:22px;
    right:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:11px 17px;

    border-radius:999px;

    background:var(--pgn-pink);
    color:#fff;

    font-size:.68rem;
    font-weight:800;

    transition:
        background .2s ease,
        transform .2s ease;
}

.pgn-write-btn:hover{
    background:var(--pgn-pink-hover);
    transform:translateY(-1px);
}


/* =========================================================
   PAGINATION
========================================================= */

.pgn-pages{
    font-size:.72rem;
}

.pgn-pages .pg_page,
.pgn-pages .pg_current{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:30px;
    height:30px;

    margin:0 2px;

    border-radius:999px;
}

.pgn-pages .pg_current{
    background:var(--pgn-pink);
    color:#fff;
}


/* =========================================================
   NOTICE WRITE
   actual DOM:
   .pg-main > .pgn.pgn-write
========================================================= */

.pg-main .pgn.pgn-write{
    width:min(980px,calc(100% - 80px));
    margin:0 auto;

    padding:72px 0 100px;
}


/* =========================================================
   WRITE HEADER
========================================================= */

.pg-main .pgn-write-head{
    margin-bottom:40px;
    padding-bottom:26px;

    border-bottom:1px solid var(--pgn-line);
}

.pg-main .pgn-write-head .pgn-kicker{
    margin:0 0 12px;

    color:var(--pgn-pink);

    font-size:.64rem;
    font-weight:800;
    letter-spacing:.17em;
}

.pg-main .pgn-write-head h1{
    margin:0;

    color:var(--pgn-ink);

    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.4rem,4vw,3.8rem);
    line-height:1.08;
    font-weight:500;
    letter-spacing:-.04em;
}

.pg-main .pgn-write-head p{
    margin:14px 0 0;

    color:var(--pgn-muted);

    font-size:.84rem;
    line-height:1.7;
}


/* =========================================================
   FORM
========================================================= */

.pg-main .pgn-write #fwrite{
    display:block;

    width:100%;
    margin:0;
    padding:0;
}


/* =========================================================
   FIELD
========================================================= */

.pg-main .pgn-write #fwrite .pgn-field{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:24px;

    align-items:start;

    width:100%;

    margin:0;
    padding:22px 0;

    border-bottom:1px solid var(--pgn-line);
}

.pg-main .pgn-write #fwrite .pgn-label{
    display:block;

    padding-top:15px;

    color:var(--pgn-ink);

    font-size:.72rem;
    line-height:1.4;
    font-weight:700;
    letter-spacing:.02em;
}


/* label이 별도 class 없는 경우까지 대응 */

.pg-main .pgn-write #fwrite .pgn-field > label:not(.sound_only){
    display:block;

    padding-top:15px;

    color:var(--pgn-ink);

    font-size:.72rem;
    line-height:1.4;
    font-weight:700;
}


/* =========================================================
   INPUT
========================================================= */

.pg-main .pgn-write #fwrite input[type="text"],
.pg-main .pgn-write #fwrite input[type="password"],
.pg-main .pgn-write #fwrite input[type="email"],
.pg-main .pgn-write #fwrite input[type="url"],
.pg-main .pgn-write #fwrite select{
    display:block;

    width:100%;
    max-width:none;
    height:52px;

    margin:0;
    padding:0 17px;

    border:1px solid var(--pgn-line);
    border-radius:10px;

    background:#fff;
    color:var(--pgn-ink);

    font-family:inherit;
    font-size:.82rem;
    line-height:normal;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.pg-main .pgn-write #fwrite input::placeholder,
.pg-main .pgn-write #fwrite textarea::placeholder{
    color:#b7aaa4;
    opacity:1;
}

.pg-main .pgn-write #fwrite input[type="text"]:focus,
.pg-main .pgn-write #fwrite input[type="password"]:focus,
.pg-main .pgn-write #fwrite input[type="email"]:focus,
.pg-main .pgn-write #fwrite input[type="url"]:focus,
.pg-main .pgn-write #fwrite select:focus,
.pg-main .pgn-write #fwrite textarea:focus{
    border-color:var(--pgn-pink);

    box-shadow:
        0 0 0 3px rgba(239,125,152,.08);
}


/* subject */

.pg-main .pgn-write #fwrite #wr_subject{
    width:100%;
}


/* =========================================================
   CONTENT
========================================================= */

.pg-main .pgn-write #fwrite textarea{
    display:block;

    width:100%;
    max-width:none;
    min-height:360px;

    margin:0;
    padding:20px;

    border:1px solid var(--pgn-line);
    border-radius:12px;

    background:#fff;
    color:var(--pgn-ink);

    font-family:inherit;
    font-size:.84rem;
    line-height:1.75;

    resize:vertical;
    outline:none;
}

.pg-main .pgn-write #fwrite .wr_content{
    width:100%;
}

.pg-main .pgn-write #fwrite .wr_content iframe{
    display:block;
    max-width:100%;
}


/* =========================================================
   FILE UPLOAD
========================================================= */

.pg-main .pgn-write #fwrite input[type="file"]{
    display:block;

    width:100%;
    min-height:46px;

    margin:0;
    padding:7px 9px;

    border:1px solid var(--pgn-line);
    border-radius:9px;

    background:var(--pgn-paper);
    color:var(--pgn-muted);

    font-family:inherit;
    font-size:.74rem;
}

.pg-main .pgn-write #fwrite input[type="file"]::file-selector-button{
    height:30px;

    margin-right:12px;
    padding:0 14px;

    border:0;
    border-radius:999px;

    background:var(--pgn-pink-soft);
    color:var(--pgn-pink);

    font-family:inherit;
    font-size:.68rem;
    font-weight:700;

    cursor:pointer;

    transition:background .2s ease;
}

.pg-main .pgn-write #fwrite input[type="file"]::file-selector-button:hover{
    background:#fbdce4;
}


/* =========================================================
   CHECKBOX
========================================================= */

.pg-main .pgn-write #fwrite input[type="checkbox"]{
    accent-color:var(--pgn-pink);
}


/* =========================================================
   CAPTCHA
========================================================= */

/*
   CAPTCHA는 $is_use_captcha가 true일 때만
   HTML 자체가 생성됩니다.
*/

.pg-main .pgn-write #fwrite #captcha{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;

    width:100%;

    margin:0;
    padding:18px;

    border:1px solid var(--pgn-line);
    border-radius:12px;

    background:#fff;
}

.pg-main .pgn-write #fwrite #captcha img{
    display:block;
    max-width:100%;
    height:auto;
}

.pg-main .pgn-write #fwrite #captcha input{
    width:auto;
    min-width:130px;
    height:42px;

    padding:0 12px;

    border:1px solid var(--pgn-line);
    border-radius:8px;

    background:#fff;
    color:var(--pgn-ink);

    outline:none;
}

.pg-main .pgn-write #fwrite #captcha input:focus{
    border-color:var(--pgn-pink);
}


/* captcha wrapper가 pgn-field인 경우 */

.pg-main .pgn-write #fwrite .pgn-field:has(#captcha){
    align-items:center;
}


/* =========================================================
   ACTION AREA
   여러 실제 마크업에 대응
========================================================= */

.pg-main .pgn-write #fwrite .pgn-actions,
.pg-main .pgn-write #fwrite .pgn-write-actions,
.pg-main .pgn-write #fwrite .btn_confirm{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;

    width:100%;

    margin:0;
    padding:30px 0 0;
}


/* action button common */

.pg-main .pgn-write #fwrite .pgn-actions a,
.pg-main .pgn-write #fwrite .pgn-actions button,

.pg-main .pgn-write #fwrite .pgn-write-actions a,
.pg-main .pgn-write #fwrite .pgn-write-actions button,

.pg-main .pgn-write #fwrite .btn_confirm a,
.pg-main .pgn-write #fwrite .btn_confirm button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:104px;
    height:44px;

    margin:0;
    padding:0 22px;

    border:1px solid var(--pgn-line);
    border-radius:999px;

    background:#fff;
    color:var(--pgn-muted);

    font-family:inherit;
    font-size:.72rem;
    line-height:1;
    font-weight:700;

    text-decoration:none;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* cancel */

.pg-main .pgn-write #fwrite .pgn-actions a:hover,
.pg-main .pgn-write #fwrite .pgn-write-actions a:hover,
.pg-main .pgn-write #fwrite .btn_confirm a:hover{
    border-color:var(--pgn-pink);
    color:var(--pgn-pink);
}


/* submit */

.pg-main .pgn-write #fwrite .pgn-actions button[type="submit"],
.pg-main .pgn-write #fwrite .pgn-write-actions button[type="submit"],
.pg-main .pgn-write #fwrite .btn_confirm button[type="submit"],
.pg-main .pgn-write #fwrite .btn_submit{
    border-color:var(--pgn-pink);
    background:var(--pgn-pink);
    color:#fff;
}

.pg-main .pgn-write #fwrite .pgn-actions button[type="submit"]:hover,
.pg-main .pgn-write #fwrite .pgn-write-actions button[type="submit"]:hover,
.pg-main .pgn-write #fwrite .btn_confirm button[type="submit"]:hover,
.pg-main .pgn-write #fwrite .btn_submit:hover{
    border-color:var(--pgn-pink-hover);
    background:var(--pgn-pink-hover);
    color:#fff;

    transform:translateY(-1px);
}


/* disabled */

.pg-main .pgn-write #fwrite button:disabled{
    opacity:.55;
    cursor:default;
    transform:none;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:820px){

    .pgn{
        width:calc(100% - 40px);
    }

    .pgn-row-link{
        grid-template-columns:82px minmax(0,1fr) 100px;
    }

    .pg-main .pgn.pgn-write{
        width:calc(100% - 40px);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .pg-main .pgn.pgn-write{
        width:calc(100% - 32px);
        padding:48px 0 70px;
    }

    .pg-main .pgn-write-head{
        margin-bottom:25px;
        padding-bottom:22px;
    }

    .pg-main .pgn-write-head h1{
        font-size:2.5rem;
    }

    .pg-main .pgn-write #fwrite .pgn-field{
        display:block;

        padding:17px 0;
    }

    .pg-main .pgn-write #fwrite .pgn-label,
    .pg-main .pgn-write #fwrite .pgn-field > label:not(.sound_only){
        display:block;

        margin:0 0 9px;
        padding:0;
    }

    .pg-main .pgn-write #fwrite textarea{
        min-height:280px;
        padding:16px;
    }

    .pg-main .pgn-write #fwrite #captcha{
        display:block;
    }

    .pg-main .pgn-write #fwrite #captcha > *{
        margin-bottom:8px;
    }

    .pg-main .pgn-write #fwrite .pgn-actions,
    .pg-main .pgn-write #fwrite .pgn-write-actions,
    .pg-main .pgn-write #fwrite .btn_confirm{
        display:grid;
        grid-template-columns:1fr 1fr;

        gap:8px;
    }

    .pg-main .pgn-write #fwrite .pgn-actions a,
    .pg-main .pgn-write #fwrite .pgn-actions button,

    .pg-main .pgn-write #fwrite .pgn-write-actions a,
    .pg-main .pgn-write #fwrite .pgn-write-actions button,

    .pg-main .pgn-write #fwrite .btn_confirm a,
    .pg-main .pgn-write #fwrite .btn_confirm button{
        width:100%;
        min-width:0;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:560px){

    .pgn{
        width:calc(100% - 28px);
    }

    .pgn-hero{
        display:block;
        padding:48px 0 30px;
    }

    .pgn-count{
        margin-top:22px;
    }

    .pgn-row-link{
        grid-template-columns:minmax(0,1fr) auto;
        gap:12px;

        min-height:72px;
        padding:0 6px;
    }

    .pgn-type{
        display:none;
    }

    .pgn-title h2{
        font-size:.88rem;
    }

    .pgn-date{
        font-size:.62rem;
    }

    .pgn-write-btn{
        position:static;
        margin-left:10px;
    }

    .pgn-footer{
        justify-content:space-between;
    }

    .pg-main .pgn.pgn-write{
        width:calc(100% - 28px);
    }
}


/* =========================================================
   NOTICE VIEW
   actual DOM:
   .pg-main > article.pgn.pgn-view
========================================================= */

.pg-main .pgn.pgn-view{
    width:min(1180px,calc(100% - 80px));
    margin:0 auto;
    padding:54px 0 100px;
}


/* =========================================================
   VIEW - BACK
========================================================= */

.pg-main .pgn-view-top{
    margin:0 0 42px;
}

.pg-main .pgn-back{
    display:inline-flex;
    align-items:center;

    color:var(--pgn-muted);

    font-size:.7rem;
    line-height:1;
    font-weight:600;
    letter-spacing:.02em;

    transition:color .2s ease;
}

.pg-main .pgn-back:hover{
    color:var(--pgn-pink);
}


/* =========================================================
   VIEW - HEADER
========================================================= */

.pg-main .pgn-view-head{
    margin:0 0 48px;
    padding:0 0 34px;

    border-bottom:1px solid var(--pgn-line);
}

.pg-main .pgn-view-head .pgn-kicker{
    margin:0 0 16px;

    color:var(--pgn-pink);

    font-size:.64rem;
    line-height:1;
    font-weight:800;
    letter-spacing:.17em;
}

.pg-main .pgn-view-head h1{
    margin:0;

    color:var(--pgn-ink);

    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.5rem,4.4vw,4.6rem);
    line-height:1.08;
    font-weight:500;
    letter-spacing:-.045em;

    word-break:keep-all;
}

.pg-main .pgn-view-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;

    margin:22px 0 0;

    color:var(--pgn-muted);

    font-size:.67rem;
    line-height:1.4;
    letter-spacing:.06em;
}

.pg-main .pgn-view-meta span{
    display:inline-flex;
    align-items:center;
}

.pg-main .pgn-view-meta span + span::before{
    content:"";
    display:block;

    width:1px;
    height:10px;

    margin:0 12px;

    background:var(--pgn-line);
}


/* =========================================================
   VIEW - IMAGES
========================================================= */

.pg-main .pgn-view-files{
    width:100%;
    margin:0;
    padding:0;
}

.pg-main .pgn-view-figure,
.pg-main .pgn-view-files figure{
    display:block;

    width:100%;

    margin:0 0 30px;
    padding:0;
}

.pg-main .pgn-view-files img{
    display:block;

    width:100%;
    max-width:100%;
    height:auto;

    margin:0;

    border:0;
}


/* 이미지가 여러 장일 경우 */

.pg-main .pgn-view-files figure + figure{
    margin-top:18px;
}


/* =========================================================
   VIEW - CONTENT
========================================================= */

.pg-main .pgn-view-content{
    width:min(860px,100%);

    margin:54px 0 0;
    padding:0 0 58px;

    color:var(--pgn-ink);

    font-size:.92rem;
    line-height:1.9;

    word-break:keep-all;
}

.pg-main .pgn-view-content p{
    margin:0 0 1.4em;
}

.pg-main .pgn-view-content p:last-child{
    margin-bottom:0;
}

.pg-main .pgn-view-content img{
    display:block;

    max-width:100%;
    height:auto;
}


/* =========================================================
   VIEW - ACTIONS
========================================================= */

.pg-main .pgn-view-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    width:100%;

    margin:0;
    padding:28px 0 0;

    border-top:1px solid var(--pgn-line);
}

.pg-main .pgn-view-actions-left,
.pg-main .pgn-view-actions-right{
    display:flex;
    align-items:center;
    gap:8px;
}


/* action buttons */

.pg-main .pgn-view-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:82px;
    height:40px;

    padding:0 18px;

    border:1px solid var(--pgn-line);
    border-radius:999px;

    background:#fff;
    color:var(--pgn-muted);

    font-size:.68rem;
    line-height:1;
    font-weight:700;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.pg-main .pgn-view-actions a:hover{
    border-color:var(--pgn-pink);
    color:var(--pgn-pink);

    transform:translateY(-1px);
}


/* 새 글 */

.pg-main .pgn-view-actions a.accent{
    border-color:var(--pgn-pink);

    background:var(--pgn-pink);
    color:#fff;
}

.pg-main .pgn-view-actions a.accent:hover{
    border-color:var(--pgn-pink-hover);

    background:var(--pgn-pink-hover);
    color:#fff;
}


/* =========================================================
   VIEW - TABLET
========================================================= */

@media(max-width:820px){

    .pg-main .pgn.pgn-view{
        width:calc(100% - 40px);
        padding:46px 0 80px;
    }

    .pg-main .pgn-view-top{
        margin-bottom:34px;
    }

    .pg-main .pgn-view-head{
        margin-bottom:36px;
        padding-bottom:28px;
    }

    .pg-main .pgn-view-head h1{
        font-size:clamp(2.3rem,7vw,3.6rem);
    }

    .pg-main .pgn-view-content{
        margin-top:42px;
    }
}


/* =========================================================
   VIEW - MOBILE
========================================================= */

@media(max-width:560px){

    .pg-main .pgn.pgn-view{
        width:calc(100% - 28px);
        padding:34px 0 60px;
    }

    .pg-main .pgn-view-top{
        margin-bottom:28px;
    }

    .pg-main .pgn-view-head{
        margin-bottom:28px;
        padding-bottom:24px;
    }

    .pg-main .pgn-view-head .pgn-kicker{
        margin-bottom:12px;
        font-size:.58rem;
    }

    .pg-main .pgn-view-head h1{
        font-size:2.35rem;
        line-height:1.12;
    }

    .pg-main .pgn-view-meta{
        margin-top:17px;
        font-size:.62rem;
    }

    .pg-main .pgn-view-files figure{
        margin-bottom:18px;
    }

    .pg-main .pgn-view-content{
        width:100%;

        margin-top:34px;
        padding-bottom:42px;

        font-size:.86rem;
        line-height:1.85;
    }

    .pg-main .pgn-view-actions{
        align-items:flex-start;
        gap:16px;

        padding-top:22px;
    }

    .pg-main .pgn-view-actions-right{
        justify-content:flex-end;
        flex-wrap:wrap;
    }

    .pg-main .pgn-view-actions a{
        min-width:auto;
        height:38px;

        padding:0 14px;

        font-size:.65rem;
    }
}