@charset "utf-8";

/* ============================================================================
   page/fellowship.css — 펠로우십 & 커뮤니티
   ----------------------------------------------------------------------------
   이 화면에서만 쓰인다: /fellowship/*  ($menu = "3")
   
   전 페이지가 지고 다니던 것을 화면별로 갈랐다 (옛 additional.css).
   ============================================================================ */

/* ── 펠로우십 & 커뮤니티 (/fellowship/*) ───────────────────────────────────────── */
/* ============================================================================
   펠로우십 & 커뮤니티 (Fellowship & Community - /fellowship/*)
   ----------------------------------------------------------------------------
   모든 셀렉터를 «.review» 또는 «.coworker» 스코프로 한정하여
   다른 페이지 (.post-area, .total-box 등)에 영향이 가지 않도록 한다.
   ========================================================================== */

/* 이 화면 묶음의 «게시판» 부분 — 안내 띠(.post-area) · 피처드 카드(.newest) ·
   메타 줄(.con-ul) · 목록 머리(.total-box) · 서신 줄(.message-img-list · .message-list) ·
   쪽 넘김(.list-paging) — 은 board.css 가 한 벌로 갖는다.

   여기에는 «.review / .coworker» 로 스코프를 두른 사본이 글자 그대로 한 벌 더 있었다.
   로드 순서(board → page/*)로 이쪽이 이겨서, 스코프가 걸린 화면만 새 디자인이고
   같은 컴포넌트를 쓰는 복음성가(.gospel)·마이페이지는 sub.css 의 옛 판 그대로였다.
   같은 것을 두 겹으로 두지 않는다 (docs/css-naming.md §4).

   이 파일에 남는 것은 이 화면에만 있는 것 둘 — 영상 격자와 복음성가다. */

/* 🎥 5. 비디오 메시지 그리드 (.video-list) */
.coworker .video-list {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    list-style:none;
    padding:0;
    margin:0 0 36px;
}
.coworker .video-list > li {
    /* sub.css 가 flex 시절에 물려 둔 width:calc(50% - gap/2) 를 푼다.
       컨테이너가 격자로 바뀐 뒤에도 그 규칙이 살아 있어서, 이미 절반인 칸(478px)
       안에서 카드가 또 절반(227px)을 잡았다 — 칸마다 오른쪽이 통째로 비었다.
       칸의 폭은 격자가 정한다. */
    width:auto;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    overflow:hidden;
    box-shadow:var(--sh-soft);
    transition:border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.coworker .video-list > li:hover {
    border-color:var(--gold-line);
    transform:translateY(-4px);
    box-shadow:var(--sh-lift);
}
.coworker .video-list li a {
    display:block;
    text-decoration:none;
    color:inherit;
}
.coworker .video-list .video-area {
    width:100%;
    aspect-ratio:16/9;
    position:relative;
    overflow:hidden;
    background:#000;
}
.coworker .video-list .video-area img {
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    transition:transform var(--t-base);
}
.coworker .video-list li:hover .video-area img {
    transform:scale(1.05);
}
.coworker .video-list .video-area .bg {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background var(--t-fast);
}
.coworker .video-list li:hover .video-area .bg {
    background:rgba(0,0,0,0.1);
}
.coworker .video-list .video-area .bg:after {
    content:'';
    width:52px;
    height:52px;
    background:url(/common/images/common/icon_play.svg) no-repeat center center / contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    transition:transform var(--t-fast);
}
.coworker .video-list li:hover .video-area .bg:after {
    transform:scale(1.12);
}
.coworker .video-list .text-area {
    padding:20px 22px;
}
.coworker .video-list .text-area h2,
.coworker .video-list .text-area .title {
    font-size:1.1rem;
    font-weight:700;
    color:var(--ink);
    line-height:1.4;
    margin:0 0 10px;
    letter-spacing:-.01em;
}
.coworker .video-list li:hover .text-area h2,
.coworker .video-list li:hover .text-area .title {
    color:var(--gold-deep);
}

/* 📖 6. 서신/영상 상세 뷰어 (.bbs-view, .fellowship-detail) */
/* 본문에 딸린 그림 — 인라인 style 로 폭·여백을 들고 있던 것을 여기로 */
.review .border-view .con > .img-box,
.coworker .border-view .con > .img-box {
    margin:0 auto var(--sp-5);
    padding:var(--sp-4) 0;
    text-align:center;
}
.review .border-view .con > .img-box img,
.coworker .border-view .con > .img-box img {
    display:inline-block;
    max-width:100%;
    height:auto;
    border-radius:var(--r-md);
}


/* 🔘 하단 버튼 박스 (.btn-box) — fellowship 스코프 */
/* 단추 묶음은 ui.css 의 .btn-box 가 맡는다 (board.css 주석 참조). */

/* 📱 7. 좁은 폭 — 이 파일에 남은 것(영상 격자·상세 그림)만.
   게시판 컴포넌트의 반응형은 board.css 가 제 것과 함께 갖는다. */
@media (max-width:767px) {
    .coworker .video-list {
        grid-template-columns:1fr;
        gap:var(--sp-4);
    }
}

/* ============================================================================
   🎵 8. 복음성가 (.gospel — /fellowship/gospel.php)
   ----------------------------------------------------------------------------
   곡 하나가 «카드» 다. 카드 위쪽은 곡 머리(제목·지은이·악보), 아래쪽은
   ui.css 의 공용 아코디언(.accordion)이 맡는 음원·영상이다.

   예전에는 이 화면만 제 아코디언(.song-toggle > .accordion-title)을 따로
   그렸다 — 배경 이미지 셰브런, 제 여닫기 스크립트, 제 RTL 대항 규칙까지
   한 벌씩. 공용 아코디언이 이미 그 셋을 다 갖고 있어 두 겹이었다.
   여기서는 카드와 격자만 얹는다.
   ========================================================================== */

/* 📜 안내 패널 — 표(table)로 짜여 있던 것을 flex 두 칸으로 */
.gospel .gospel-intro {
    display:flex;
    align-items:flex-start;
    gap:var(--sp-6);
    box-sizing:border-box;
    padding:var(--sp-7) var(--sp-8);
    background:var(--paper-warm);
    border:1px solid var(--line-soft);
    border-radius:var(--r-xl);
    box-shadow:var(--sh-soft);
}
.gospel .gospel-intro .gi-figure {
    flex:0 0 11rem;
    text-align:center;
}
.gospel .gospel-intro .gi-figure img {
    width:100%;
    max-width:11rem;
    height:auto;
}
.gospel .gospel-intro .gi-body {
    flex:1;
    min-width:0;
}
.gospel .gospel-intro .gi-lead {
    display:block;
    margin:0 0 var(--sp-3);
    color:var(--ink);
    font-size:var(--fs-lg);
    font-weight:700;
    line-height:var(--lh-tight);
    letter-spacing:-.02em;
}
.gospel .gospel-intro p {
    margin:0 0 var(--sp-3);
    color:var(--copy);
    font-size:var(--fs-md);
    line-height:var(--lh-base);
}
.gospel .gospel-intro p:last-child {
    margin-bottom:0;
}

/* 🎼 곡 카드 */
.gospel .song-list {
    display:flex;
    flex-direction:column;
    gap:var(--sp-5);
    margin:var(--sp-5) 0 0;
    padding:0;
    list-style:none;
}
.gospel .song-card {
    box-sizing:border-box;
    padding:var(--sp-5);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-card);
}
.gospel .song-title {
    margin:0 0 var(--sp-4);
    color:var(--ink);
    font-size:var(--fs-xl);
    font-weight:700;
    line-height:var(--lh-tight);
    letter-spacing:-.02em;
    overflow-wrap:anywhere;
}
/* 지은이 줄과 악보 단추는 한 줄에서 양 끝으로 갈린다 */
.gospel .song-bar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-3) var(--sp-5);
    padding-bottom:var(--sp-4);
    border-bottom:1px solid var(--line-soft);
}
.gospel .song-meta {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--sp-2) var(--sp-5);
    margin:0;
    padding:0;
    list-style:none;
}
.gospel .song-meta li {
    font-size:var(--fs-base);
}
.gospel .song-meta span {
    margin-inline-end:var(--sp-2);
    color:var(--muted);
}
.gospel .song-meta em {
    color:var(--ink);
    font-style:normal;
    font-weight:500;
}
.gospel .song-files {
    display:flex;
    align-items:center;
    gap:var(--sp-2);
}
.gospel .song-files .sf-label {
    margin-inline-end:var(--sp-2);
    color:var(--muted);
    font-size:var(--fs-base);
    font-weight:500;
}

/* 🎧🎬 음원·영상 — 바탕은 ui.css 의 .accordion 이다.
   카드 «안» 에 놓이므로 줄의 카드 옷(그림자·큰 반경)만 덜어 낸다 */
.gospel .song-media {
    margin-top:var(--sp-4);
}
.gospel .song-media > li {
    border-radius:var(--r-md);
    box-shadow:none;
}
.gospel .song-media > li + li {
    margin-top:var(--sp-2);
}
.gospel .song-media > li:hover {
    box-shadow:none;
}
.gospel .song-media .accordion-head {
    padding:var(--sp-3) var(--sp-4);
}
.gospel .song-media .accordion-head > strong {
    font-size:var(--fs-base);
    font-weight:500;
}
.gospel .song-media .accordion-head.open > strong {
    font-weight:700;
}
.gospel .song-media .accordion-body {
    padding:var(--sp-4);
    border-top:1px solid var(--line-soft);
}

/* 음원 — SoundCloud 위젯을 세로로 쌓는다 */
.gospel .audio-stack {
    display:flex;
    flex-direction:column;
    gap:var(--sp-3);
}
.gospel .audio-stack iframe {
    display:block;
    width:100%;
    height:9.375rem;
    border:0;
}

/* 영상 — 캐러셀이 아니라 격자다.
   예전에는 곡마다 .video-slide 를 slick 으로 초기화했다. 셔틀이 변폭(variableWidth)
   슬라이드에 flex:0 0 auto 만 얹고 폭은 내용에 맡기는데, 안에 든 것이 «부모 폭의
   56.25%» 로 높이를 잡는 상자라서 서로를 쳐다보다 0 으로 무너졌다 —
   아코디언은 열리는데 안이 비어 있었다. 격자가 폭을 정해 주면 그 순환이 없다. */
.gospel .video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap:var(--sp-4);
}
.gospel .iframe-box {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.25%;
}
.gospel .iframe-box iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}

@media (max-width:1024px) {
    .gospel .gospel-intro {
        padding:var(--sp-6);
        gap:var(--sp-5);
    }
    .gospel .gospel-intro .gi-figure {
        flex-basis:8.75rem;
    }
}

@media (max-width:767px) {
    .gospel .gospel-intro {
        flex-direction:column;
        align-items:center;
        padding:var(--sp-5);
    }
    .gospel .gospel-intro .gi-figure {
        order:-1;
        flex:0 0 auto;
    }
    .gospel .song-card {
        padding:var(--sp-4);
    }
    .gospel .song-title {
        font-size:var(--fs-lg);
    }
    .gospel .song-bar {
        align-items:flex-start;
        flex-direction:column;
    }
    .gospel .song-meta {
        flex-direction:column;
        align-items:flex-start;
        gap:var(--sp-1);
    }
    .gospel .song-media .accordion-body {
        padding:var(--sp-3);
    }
}

/* ── 상세 화면 한 벌 (.fellowship-detail) ─────────────────────────────────────
   ============================================================================
   글 상세 — 책 서평 · 동역자 서신 · 우리의 소식 · 영상 메시지
   ----------------------------------------------------------------------------
   넷이 같은 뼈대(.border-view)를 쓰면서도 서로 달랐다. 여기서 한 벌로 묶는다.
   sub.css 의 옛 값을 이 스코프 안에서만 덮는다 — faqDetail·sermonsDetail 등
   같은 뼈대를 쓰는 다른 화면은 건드리지 않는다.
   ========================================================================== */

/* 글의 제목이 본문과 같은 크기(16px)였다 — 메타 줄(18px)보다도 작았다 */
.fellowship-detail .section-title h1 {
    font-size:var(--fs-2xl);
    font-weight:700;
    line-height:var(--lh-tight);
    letter-spacing:-.02em;
    color:var(--ink);
    padding:0 0 1.25rem;
    text-wrap:balance;
}

/* .border-view 가 20px 을 흘려보내고 있었다 — 안쪽 글자 크기의 바닥을 되돌린다 */
.fellowship-detail .border-view {
    font-size:var(--fs-md);
}

/* 메타 줄 — 지은이 · 나라 · 날짜 · 조회수.
   그림표와 조회수 표시는 board.css 의 .con-ul 한 벌이 맡는다 (목록도 같은 것을 쓴다).
   여기서는 상세 화면의 자리와 크기만 정한다. */
.fellowship-detail .border-view .title {
    padding:0 0 1rem;
}
.fellowship-detail .border-view .title .con-ul {
    gap:0.5rem 1.5rem;
}
.fellowship-detail .border-view .title .con-ul li,
.fellowship-detail .border-view .title .con-ul li span {
    font-size:var(--fs-sm);
    color:var(--muted);
    font-weight:500;
}
/* 본문 칸이 좌우 20px 씩 안으로 들어가 제목·메타·아래 차림표와 왼끝이 어긋났다.
   min-height:200px 은 짧은 글에서 빈 자리로 남았다. */
.fellowship-detail .border-view .con {
    padding:2rem 0 2.5rem;
    min-height:0;
}
/* 그림·영상은 칸 폭을 다 쓰고, 글만 읽기 좋은 폭으로 묶는다 */
.fellowship-detail .border-view .con .img-box,
.fellowship-detail .border-view .con .video-box {
    margin:0 0 1.5rem;
}
.fellowship-detail .border-view .con .text-box {
    margin-top:0;
}
.fellowship-detail .border-view .con .text-box p {
    line-height:var(--lh-loose);
    margin-bottom:1.25rem;
}
.fellowship-detail .border-view .con .text-box p:last-child {
    margin-bottom:0;
}

/* 📚 서평이 가리키는 도서 — 카드 한 장 ────────────────────────────────────────
   book.css 의 «.review .book-detail» 은 float + nth-child(2):before 로 짜여
   칸이 좁아지면 무너졌고, 표지·제목·메타가 서로 다른 축에 서 있었다.
   여기서 격자로 다시 짠다 (스코프가 한 겹 깊어 book.css 를 이긴다). */
.fellowship-detail .book-detail {
    display:grid;
    grid-template-columns:8.5rem minmax(0, 1fr);
    gap:1.75rem;
    align-items:center;
    padding:1.5rem;
    background:var(--gold-wash);
    border:1px solid var(--gold-line);
    border-radius:var(--r-lg);
    margin:0 0 2rem;
    box-sizing:border-box;
    transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.fellowship-detail .book-detail:hover {
    border-color:var(--gold);
    box-shadow:var(--sh-soft);
}
.fellowship-detail .book-detail:after {
    content:none;   /* float 시절의 clearfix */
}
.fellowship-detail .book-detail .book-img {
    width:auto;
    float:none;
}
.fellowship-detail .book-detail .book-img .img-area {
    width:100%;
    max-width:none;
    margin:0;
}
.fellowship-detail .book-detail .book-img .img-area img {
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--r-sm);
    box-shadow:var(--sh-card);
    transition:transform var(--t-base), box-shadow var(--t-base);
}
.fellowship-detail .book-detail:hover .book-img .img-area img {
    transform:translateY(-2px);
    box-shadow:var(--sh-lift);
}
.fellowship-detail .book-detail .book-text {
    width:auto;
    float:none;
    padding:0;
}
.fellowship-detail .book-detail .small-title {
    display:inline-block;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold-deep);
    background:var(--gold-soft);
    line-height:1;
    padding:0.3125rem 0.625rem;
    border-radius:var(--r-pill);
    margin:0 0 0.75rem;
}
.fellowship-detail .book-detail .book-name {
    display:block;
    font-size:var(--fs-lg);
    font-weight:700;
    line-height:var(--lh-tight);
    letter-spacing:-.01em;
    color:var(--ink);
    margin:0;
}
.fellowship-detail .book-detail .book-name a {
    color:inherit;
    text-decoration:none;
    transition:color var(--t-fast);
}
.fellowship-detail .book-detail .book-name a:hover {
    color:var(--gold-deep);
    text-decoration:underline;
    text-underline-offset:3px;
}
.fellowship-detail .book-detail .book-author {
    font-size:var(--fs-base);
    color:var(--copy-soft);
    margin:0.375rem 0 0;
}

/* ISBN · 쪽수 · 별점 — 잔줄 하나 아래에 한 줄로 */
.fellowship-detail .book-detail .book-info {
    margin-top:1rem;
    padding-top:0.875rem;
    border-top:1px solid var(--gold-line);
}
.fellowship-detail .book-detail .book-info ul {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.5rem 1.5rem;
    width:100%;
    margin:0;
    padding:0;
    overflow:visible;
    list-style:none;
}
/* nth-child(2)·(3) 에 붙어 있던 margin/padding 20px 도 같은 무게로 맞받는다 */
.fellowship-detail .book-detail .book-text .book-info ul li,
.fellowship-detail .book-detail .book-text .book-info ul li:nth-child(2),
.fellowship-detail .book-detail .book-text .book-info ul li:nth-child(3) {
    margin:0;
    padding:0;
}
.fellowship-detail .book-detail .book-info ul li {
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    float:none;
    position:static;
    margin:0;
    padding:0;
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--ink);
    overflow-wrap:anywhere;
}
/* book.css 가 nth-child(2)·(3) 에 절대 배치로 그리던 세로 잔줄.
   특이도가 (0,5,2) 라 같은 무게로 맞받아 꺼야 한다 — gap 이 대신 가른다. */
.fellowship-detail .book-detail .book-text .book-info ul li:before,
.fellowship-detail .book-detail .book-text .book-info ul li:nth-child(2):before,
.fellowship-detail .book-detail .book-text .book-info ul li:nth-child(3):before {
    content:none;
}
.fellowship-detail .book-detail .book-info ul li span {
    margin:0;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    white-space:nowrap;   /* «RATE» 가 글자마다 줄바꿈되던 것 */
}
.fellowship-detail .book-detail .book-info ul li.rate .my-rating {
    display:inline-flex;
    align-items:center;
    line-height:0;
}

@media (max-width:767px) {
    .fellowship-detail .book-detail {
        grid-template-columns:6rem minmax(0, 1fr);
        gap:1rem;
        padding:1rem;
        align-items:start;
    }
    /* 좁은 칸에서는 ISBN·쪽수·별점을 한 줄에 하나씩 — 옆으로 밀면 낱말이 부서진다 */
    .fellowship-detail .book-detail .book-info ul {
        flex-direction:column;
        align-items:flex-start;
        gap:0.5rem;
    }
}

@media (max-width:767px) {
    .fellowship-detail .section-title h1 {
        font-size:var(--fs-xl);
        padding:0 0 1rem;
    }
    .fellowship-detail .border-view .con {
        padding:1.5rem 0 2rem;
    }
}

/* ── 글 올리기 · 고치기 한 벌 (.fellowship-write) ─────────────────────────────
   ============================================================================
   서평 · 동역자 서신 · 영상 메시지의 등록/수정 화면 셋.
   sub.css 의 .input-table 은 회원가입·문의·주문도 함께 쓰므로 건드리지 않고,
   이 스코프 안에서만 덮는다.
   ========================================================================== */

/* 넓은 화면에서 폼이 1180px 을 가로질러 라벨과 입력칸이 멀찍이 떨어져 있었다.
   한 장의 판으로 묶고 읽기 좋은 폭에 세운다. */
.fellowship-write .section {
    max-width:56rem;
    margin:0 auto;
    padding:2.5rem 3rem;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    box-shadow:var(--sh-card);
    box-sizing:border-box;
}

/* 화면의 제목이 본문과 같은 16px 이었다 */
.fellowship-write .section .section-title {
    margin-bottom:1.75rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line-soft);
}
.fellowship-write .section .section-title h4 {
    font-size:var(--fs-lg);
    font-weight:700;
    color:var(--ink);
    line-height:var(--lh-tight);
    letter-spacing:-.02em;
    padding:0;
}

/* 표 — 라벨 칸을 좁히고 값과 같은 줄에 세운다 */
.fellowship-write .input-table {
    width:100%;
    table-layout:fixed;
}
.fellowship-write .input-table:not(.text-table) col:first-child {
    width:10rem;
    max-width:none;
}
.fellowship-write .input-table th {
    padding:1rem 1.25rem 1rem 0;
    font-size:var(--fs-base);
    font-weight:600;
    color:var(--ink);
    text-align:left;
    vertical-align:top;
    line-height:2.75rem;   /* 입력칸 높이에 맞춰 첫 줄이 나란히 선다 */
}
.fellowship-write .input-table th em {
    color:var(--need-mark);
    margin-left:0.25rem;
}
.fellowship-write .input-table td,
.fellowship-write .input-table tr:first-child td,
.fellowship-write .input-table tr:last-child td {
    padding:1rem 0;
    vertical-align:top;
}
.fellowship-write .input-table tr + tr th,
.fellowship-write .input-table tr + tr td {
    border-top:1px solid var(--line-soft);
}

/* 입력칸은 칸 폭을 다 쓴다 — 280px 고정이라 줄마다 오른끝이 들쭉날쭉했다 */
.fellowship-write .input-table td input[type="text"],
.fellowship-write .input-table td .wd-100 input,
.fellowship-write .input-table td .wd-100 textarea,
.fellowship-write .input-table td .lang-box select {
    box-sizing:border-box;
    width:100%;
    margin:0;
}
.fellowship-write .input-table td textarea {
    min-height:12.5rem;
    padding:0.875rem 1.25rem;
    line-height:var(--lh-base);
    resize:vertical;
}
.fellowship-write .input-table td .lang-box {
    display:block;
}

/* 도서 고르기 — 단추와 입력칸을 한 줄로 (float 을 푼다) */
.fellowship-write .fb-area .fb-box {
    display:flex;
    align-items:center;
    gap:0.75rem;
}
.fellowship-write .fb-area .fb-box button {
    float:none;
    flex-shrink:0;
}
.fellowship-write .fb-area .fb-box .ip-box {
    flex:1;
    min-width:0;
    width:auto;
}
.fellowship-write .fb-area .fb-box .ip-box input {
    width:100%;
}

/* 그림 올리기 — 파란 테두리 단추가 이 화면에서 홀로 튀었다 (--file-mark).
   자료실 계열이 아니라 골드 축으로 돌린다. */
.fellowship-write .file-box {
    float:none;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.75rem;
}
.fellowship-write .file-box:after {
    content:none;
}
.fellowship-write .file-box label {
    float:none;
    width:auto;
    min-width:9rem;
    padding:0 1.5rem;
    color:var(--gold-deep);
    border-color:var(--gold-line);
    background:var(--gold-wash);
}
.fellowship-write .file-box label:hover {
    background:var(--gold-soft);
    border-color:var(--gold);
}
.fellowship-write .file-box .upload-name {
    float:none;
    flex:1;
    min-width:0;
    width:auto;
    height:auto;
    margin:0;
    color:var(--muted);
}
.fellowship-write .file-box-alert {
    float:none;
    flex-basis:100%;
    width:auto;
    margin:0;
    font-size:var(--fs-xs);
    color:var(--muted);
}
.fellowship-write .file-box-img {
    float:none;
    flex-basis:100%;
    margin:0;
}

/* 별점은 값이 아니라 고르는 것 — 입력칸 높이에 맞춰 세운다 */
.fellowship-write .input-table td .my-rating,
.fellowship-write .input-table td .nlm-stars {
    display:inline-flex;
    align-items:center;
    height:2.75rem;
}

.fellowship-write .btn-box {
    margin-top:2rem;
    padding-top:1.75rem;
    border-top:1px solid var(--line-soft);
}

@media (max-width:767px) {
    .fellowship-write .section {
        padding:1.5rem 1.25rem;
        border-radius:var(--r-lg);
    }
    /* 좁은 화면에서는 라벨이 값 위로 — 10rem 짜리 칸이 값을 눌러 버린다 */
    .fellowship-write .input-table,
    .fellowship-write .input-table tbody,
    .fellowship-write .input-table tr,
    .fellowship-write .input-table th,
    .fellowship-write .input-table td {
        display:block;
        width:auto;
    }
    .fellowship-write .input-table colgroup {
        display:none;
    }
    .fellowship-write .input-table th {
        padding:0 0 0.5rem;
        line-height:var(--lh-base);
    }
    .fellowship-write .input-table td,
    .fellowship-write .input-table tr:first-child td,
    .fellowship-write .input-table tr:last-child td {
        padding:0 0 1.25rem;
    }
    .fellowship-write .input-table tr + tr th {
        border-top:1px solid var(--line-soft);
        padding-top:1.25rem;
    }
    .fellowship-write .input-table tr + tr td {
        border-top:none;
    }
    .fellowship-write .fb-area .fb-box {
        flex-direction:column;
        align-items:stretch;
    }
    .fellowship-write .file-box label {
        width:100%;
    }
}