@charset "utf-8";
/* =========================================================================
   멍에 함께 지기 (익명 기도 촛불)
   - mg.css 토큰 사용 : --ink --ink2 --bronze --gold --paper --line --serif --en
   - 구성 : 비주얼(.yk_hero) / 이용 방법(.yk_steps) / 촛불 켜기(.yk_write)
            촛불의 벽(.yk_wall) / 성지 연결(.yk_visit) / 신고 대화상자(.yk_dialog)
   - 원칙 : 그라데이션·빛 번짐·아이콘 배지 없이 선과 명조체로 구성 (쪽지의 작은 촛불만 불꽃 표현)
   ========================================================================= */
.yk [hidden] {display:none !important;}

/* 버튼 (각진 형태) */
.yk_btn {display:inline-flex;align-items:center;justify-content:center;gap:.8rem;height:5.4rem;padding:0 2.8rem;border:1px solid transparent;font-size:1.55rem;font-weight:600;cursor:pointer;transition:background .25s, color .25s, border-color .25s;}
.yk_btn.navy {background:var(--ink);color:#fff;}
.yk_btn.navy:hover {background:var(--bronze);}
.yk_btn.ghost {border-color:var(--line);background:#fff;color:var(--black);}
.yk_btn.ghost:hover {border-color:var(--ink);}
.yk_btn.line {border-color:rgba(255,255,255,.4);background:transparent;color:#fff;}
.yk_btn.line:hover {background:#fff;color:var(--ink);}
.yk_btn.full {width:100%;}
.yk_btn[disabled] {opacity:.6;cursor:wait;}

/* -------------------------------------------------------------------------
   비주얼 : 글 + 사진 띠 + 숫자
   ------------------------------------------------------------------------- */
.yk_hero {padding:9rem 0 0;background:var(--paper);}
.yk_hero_in {display:grid;grid-template-columns:1fr auto;gap:6rem;align-items:end;}
.yk_title {margin-top:1.2rem;font-family:var(--serif);font-size:7rem;font-weight:600;line-height:1.2;letter-spacing:-.04em;color:var(--black);}
.yk_lead {max-width:64rem;margin-top:2.6rem;font-size:1.8rem;line-height:1.85;color:var(--text);}
.yk_hero .m_btns {margin-top:4rem;}
.yk_verse {margin:0;padding:0 0 1rem 4rem;border-left:1px solid var(--ink);}
.yk_verse p {font-family:var(--serif);font-size:2.6rem;font-weight:500;line-height:1.6;color:var(--black);}
.yk_verse cite {display:block;margin-top:1.2rem;font-size:1.4rem;font-style:normal;color:var(--sub);}
.yk_hero_band {display:grid;grid-template-columns:1fr 38rem;margin-top:7rem;}
.yk_hero_img {position:relative;margin:0;height:46rem;overflow:hidden;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);}
.yk_hero_img img {width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.yk_hero_stats {display:flex;flex-direction:column;margin:0;background:var(--ink);color:#b8bfcb;}
.yk_hero_stats div {flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 4rem;border-bottom:1px solid rgba(255,255,255,.12);}
.yk_hero_stats div:last-child {border-bottom:0;}
.yk_hero_stats dt {font-size:1.4rem;}
.yk_hero_stats dd {margin-top:.6rem;font-family:var(--en);font-size:5.2rem;font-weight:500;line-height:1;color:#fff;}
.yk_hero_stats dd small {margin-left:.4rem;font-family:var(--serif);font-size:2rem;font-weight:600;}

/* -------------------------------------------------------------------------
   이용 방법 (선 구분 3단)
   ------------------------------------------------------------------------- */
.yk_steps {padding:10rem 0 0;}
.yk_steps ol {display:grid;grid-template-columns:repeat(3, 1fr);border-top:2px solid var(--ink);counter-reset:ys;}
.yk_steps li {display:grid;grid-template-columns:3.2rem 1fr;align-content:start;padding:3.2rem 3.2rem 3.2rem 0;border-bottom:1px solid var(--line);counter-increment:ys;}
.yk_steps li + li {padding-left:3.2rem;border-left:1px solid var(--line);}
.yk_steps li:before {content:counter(ys) ".";grid-row:span 2;font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1.35;color:var(--bronze);}
.yk_steps strong {display:block;font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1.35;color:var(--black);}
.yk_steps p {margin-top:1rem;font-size:1.55rem;line-height:1.75;}

/* -------------------------------------------------------------------------
   촛불 켜기
   ------------------------------------------------------------------------- */
.yk_write {padding:10rem 0 12rem;scroll-margin-top:10rem;}
.yk_write_card {display:grid;grid-template-columns:42% 1fr;border:1px solid var(--line);}
.yk_write_img {position:relative;margin:0;min-height:56rem;}
.yk_write_img img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.yk_write_img figcaption {position:absolute;left:0;bottom:0;padding:1.2rem 2rem;background:rgba(20,29,48,.82);font-size:1.35rem;color:#fff;}
.yk_write_form {padding:6rem 6rem 5.6rem;background:#fff;}
.yk_write_form h3 {margin-top:1rem;font-family:var(--serif);font-size:3.2rem;font-weight:600;line-height:1.45;color:var(--black);}
#ykForm {margin-top:3.6rem;}
.yk_input {position:relative;}
.yk_input textarea {display:block;width:100%;min-height:13rem;padding:2rem 2.2rem 4rem;border:1px solid var(--line);border-radius:0;background:var(--paper);font-family:var(--serif);font-size:2rem;line-height:1.65;color:var(--black);resize:none;transition:border-color .25s, background .25s;}
.yk_input textarea::placeholder {color:#a3a39c;}
.yk_input textarea:focus {outline:none;border-color:var(--ink);background:#fff;}
.yk_input.err textarea {border-color:#b13e2b;}
.yk_count {position:absolute;right:1.8rem;bottom:1.4rem;font-size:1.35rem;color:var(--sub);}
.yk_count b {color:var(--bronze);font-weight:700;}
.yk_chips {display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 2.8rem;}
.yk_chip {padding:.8rem 1.4rem;border:1px solid var(--line);background:#fff;font-size:1.4rem;color:var(--text);cursor:pointer;transition:border-color .2s, color .2s;}
.yk_chip:hover {border-color:var(--ink);color:var(--black);}
.yk_rules {margin-top:2.8rem;border-top:1px solid var(--line);}
.yk_rules li {position:relative;padding:1rem 0 1rem 1.6rem;border-bottom:1px solid var(--line2);font-size:1.4rem;line-height:1.6;color:var(--sub);}
.yk_rules li:before {content:"";position:absolute;left:0;top:1.9rem;width:.6rem;height:1px;background:var(--text);}
.yk_closed {margin-top:3rem;padding:3rem;border:1px solid var(--line);background:var(--paper);font-size:1.6rem;text-align:center;}

/* -------------------------------------------------------------------------
   촛불의 벽
   ------------------------------------------------------------------------- */
.yk_wall {padding:12rem 0 14rem;background:var(--ink2);color:#fff;scroll-margin-top:6rem;}
.yk_wall_head {display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;margin-bottom:4.8rem;padding-bottom:3.2rem;border-bottom:1px solid rgba(255,255,255,.14);}
.yk_wall .m_en {color:var(--gold);}
.yk_wall h3 {margin-top:.6rem;font-family:var(--serif);font-size:4.2rem;font-weight:600;}
.yk_wall_desc {margin-top:1.2rem;font-size:1.6rem;color:rgba(255,255,255,.7);}
.yk_wall_desc b {font-family:var(--en);font-size:2.2rem;font-weight:500;color:#fff;}
.yk_sort {display:flex;border:1px solid rgba(255,255,255,.25);}
.yk_sort button {height:4.6rem;padding:0 2.2rem;border:0;background:transparent;font-size:1.45rem;font-weight:600;color:rgba(255,255,255,.7);cursor:pointer;transition:background .25s, color .25s;}
.yk_sort button + button {border-left:1px solid rgba(255,255,255,.25);}
.yk_sort button.on {background:#fff;color:var(--ink);}
.yk_grid {columns:4 26rem;column-gap:2rem;}
.yk_grid[aria-busy="true"]:empty {min-height:30rem;}

/* 촛불의 벽 쪽지 (공용 .yk_note 는 mg.css) : 함께 짊어집니다 · 신고 */
.yk_candle {animation:ykIn .6s ease both;}
.yk_candle.new {animation:ykNew 1.2s ease both;}
@keyframes ykIn {from {opacity:0;transform:translateY(1rem);}}
@keyframes ykNew {from {opacity:0;background:#fff3d6;}}
.yk_candle.mine {border-top-color:var(--bronze);}
.yk_badge {margin-left:auto;margin-right:1rem;align-self:center;padding:.3rem .9rem;background:var(--bronze);color:#fff;font-size:1.2rem;font-weight:700;}
.yk_act {display:flex;align-items:stretch;margin-top:2.2rem;border:1px solid #cfc6b3;}
.yk_join {flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:4.6rem;border:0;background:#fff;color:var(--ink);font-size:1.45rem;font-weight:700;cursor:pointer;transition:background .25s, color .25s;}
.yk_join i {font-size:1.8rem;color:var(--bronze);}
.yk_join b {font-weight:700;font-variant-numeric:tabular-nums;color:var(--bronze);}
.yk_join:hover {background:var(--ink);color:#fff;}
.yk_join:hover i, .yk_join:hover b {color:var(--gold);}
.yk_join.on {background:var(--bronze);color:#fff;cursor:default;}
.yk_join.on i, .yk_join.on b {color:#fff;}
.yk_join.pop i {animation:ykPop .5s ease;}
@keyframes ykPop {40% {transform:scale(1.4);}}
.yk_report {flex-shrink:0;width:4.6rem;border:0;border-left:1px solid #cfc6b3;background:#fff;color:#a8a294;font-size:1.5rem;cursor:pointer;}
.yk_report:hover {color:#b13e2b;}
.yk_report[disabled] {opacity:.4;cursor:default;}
.yk_candle.out {animation:ykOut .5s ease forwards;}
@keyframes ykOut {to {opacity:0;}}.yk_empty {padding:8rem 0;border:1px dashed rgba(255,255,255,.25);text-align:center;font-family:var(--serif);font-size:2rem;line-height:1.7;color:rgba(255,255,255,.75);}
.yk_more_wrap {margin-top:4.8rem;text-align:center;}

/* 성지 연결 */
.yk_visit {padding:12rem 0 14rem;}

/* -------------------------------------------------------------------------
   신고 대화상자
   ------------------------------------------------------------------------- */
.yk_dialog {width:min(44rem, calc(100% - 3.2rem));padding:0;border:1px solid var(--ink);border-radius:0;}
.yk_dialog::backdrop {background:rgba(20,29,48,.6);}
.yk_dialog form {padding:4rem 3.6rem 3.2rem;}
.yk_dialog h4 {padding-bottom:1.6rem;border-bottom:1px solid var(--ink);font-family:var(--serif);font-size:2.2rem;font-weight:600;color:var(--black);}
.yk_dialog p {margin-top:1.6rem;font-size:1.5rem;line-height:1.7;}
.yk_dialog .btns {display:flex;gap:1rem;margin-top:3rem;}
.yk_dialog .btns .yk_btn {flex:1;height:5rem;}

/* -------------------------------------------------------------------------
   반응형
   ------------------------------------------------------------------------- */
@media only screen and (max-width:1279px) {
	.yk_grid {columns:3;}
	.yk_write_form {padding:4.4rem 4rem;}
	.yk_hero_band {grid-template-columns:1fr 30rem;}
}
@media only screen and (max-width:1023px) {
	.yk_hero {padding-top:5rem;}
	.yk_hero_in {grid-template-columns:1fr;gap:4rem;}
	.yk_title {font-size:5rem;}
	.yk_verse p {font-size:2.2rem;}
	.yk_hero_band {grid-template-columns:1fr;margin-top:4.4rem;}
	.yk_hero_img {height:32rem;}
	.yk_hero_stats {flex-direction:row;}
	.yk_hero_stats div {padding:2.4rem 2rem;border-bottom:0;border-right:1px solid rgba(255,255,255,.12);}
	.yk_hero_stats div:last-child {border-right:0;}
	.yk_hero_stats dd {font-size:3.6rem;}
	.yk_steps {padding-top:7rem;}
	.yk_steps ol {grid-template-columns:1fr;}
	.yk_steps li, .yk_steps li + li {padding:2.6rem 0;border-left:0;}
	.yk_write {padding:7rem 0 9rem;}
	.yk_write_card {grid-template-columns:1fr;}
	.yk_write_img {min-height:28rem;}
	.yk_grid {columns:2;}
	.yk_wall {padding:8rem 0 10rem;}
	.yk_wall_head {flex-direction:column;align-items:flex-start;}
	.yk_visit {padding:8rem 0 10rem;}
}
@media only screen and (max-width:767px) {
	.yk_title {font-size:4rem;}
	.yk_lead {font-size:1.6rem;}
	.yk_verse {padding-left:2rem;}
	.yk_hero .m_btns .m_go {flex:1;}
	.yk_hero .m_btns .m_go span {flex:1;justify-content:center;padding:0 1rem;}
	.yk_hero_img {height:24rem;}
	.yk_hero_stats dt {font-size:1.2rem;}
	.yk_hero_stats dd {font-size:3rem;}
	.yk_hero_stats div {padding:2rem 1.4rem;}
	.yk_write_form {padding:3.2rem 2.2rem;}
	.yk_write_form h3 {font-size:2.5rem;}
	.yk_input textarea {font-size:1.8rem;}
	.yk_wall h3 {font-size:3.2rem;}
	.yk_sort {width:100%;}
	.yk_sort button {flex:1;padding:0 1rem;}
	.yk_grid {columns:1;}
	.yk_input textarea {font-family:"Pretendard", sans-serif;}
}
@media (prefers-reduced-motion:reduce) {
	.yk *, .yk *:before, .yk *:after {animation:none !important;transition:none !important;}
}