/* common */
.is-pc {display:block;}
.is-m {display:none;}
/* search popup */
.search-dim {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;}
.search-dim.on {display:block;}
.search-popup {display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 30px); max-width:560px; background:#fff; border-radius:14px; padding:80px 35px 35px; z-index:9999; box-shadow:0 10px 40px rgba(0,0,0,0.25);}
.search-popup.on {display:block;}
.search-popup .search-close {position:absolute; right:18px; top:18px; width:44px; height:44px; background:#f6f6f6; border:0; border-radius:50%; font-size:0; cursor:pointer; transition:background 0.2s;}
.search-popup .search-close:hover {background:#ffe5ea;}
.search-popup .search-close:before, .search-popup .search-close:after {position:absolute; left:50%; top:50%; content:""; width:20px; height:2px; background:#333; transform:translate(-50%, -50%) rotate(45deg);}
.search-popup .search-close:after {transform:translate(-50%, -50%) rotate(-45deg);}
.search-popup .search-head {text-align:center; margin-bottom:24px;}
.search-popup .search-head .search-title {font-size:22px; font-weight:700; color:#222; margin-bottom:8px; letter-spacing:-0.5px;}
.search-popup .search-head .search-desc {font-size:14px; color:#888; letter-spacing:-0.3px;}
.search-popup .search-form {display:flex; flex-wrap:wrap; align-items:center; border:2px solid #ff4363; border-radius:50px; overflow:hidden; padding:0 6px 0 0;}
.search-popup .search-form input {flex:1; min-width:0; height:50px; border:0; padding:0 22px; font-size:15px; outline:0; background:transparent;}
.search-popup .search-form .search-submit {height:40px; padding:0 22px; background:#ff4363; color:#fff; border:0; border-radius:50px; font-size:15px; font-weight:600; cursor:pointer; letter-spacing:-0.5px;}
.search-popup .search-keywords {margin-top:22px; padding-top:20px; border-top:1px dashed #eee;}
.search-popup .search-keywords .keywords-label {display:block; font-size:13px; font-weight:600; color:#ad8e91; margin-bottom:10px; letter-spacing:-0.3px;}
.search-popup .search-keywords ul {display:flex; flex-wrap:wrap; gap:8px;}
.search-popup .search-keywords ul li a {display:inline-block; padding:6px 14px; background:#fff5f6; border:1px solid #ffd5dd; border-radius:30px; font-size:13px; color:#ff4363; font-weight:500; transition:all 0.2s;}
.search-popup .search-keywords ul li a:hover {background:#ff4363; color:#fff; border-color:#ff4363;}
@media (max-width:767px){
.search-popup {padding:70px 22px 25px;}
.search-popup .search-close {width:38px; height:38px; right:14px; top:14px;}
.search-popup .search-close:before, .search-popup .search-close:after {width:17px;}
.search-popup .search-head .search-title {font-size:18px;}
.search-popup .search-head .search-desc {font-size:13px;}
.search-popup .search-form input {height:44px; font-size:14px; padding:0 18px;}
.search-popup .search-form .search-submit {height:36px; padding:0 18px; font-size:14px;}
.search-popup .search-keywords ul li a {font-size:12px; padding:5px 12px;}
}
/* custom checkbox (popup 공통) */
.login-popup input[type="checkbox"],
.join-popup input[type="checkbox"] {appearance:none; -webkit-appearance:none; -moz-appearance:none; border:1.5px solid #d0d0d0; border-radius:5px; background:#fff; cursor:pointer; position:relative; flex-shrink:0; margin:0; padding:0; transition:all 0.15s;}
.login-popup input[type="checkbox"]:checked,
.join-popup input[type="checkbox"]:checked {background:#ff4363; border-color:#ff4363;}
.login-popup input[type="checkbox"]:checked:before,
.join-popup input[type="checkbox"]:checked:before {content:""; position:absolute; left:50%; top:48%; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%, -55%) rotate(45deg); box-sizing:border-box;}
/* login popup */
.login-dim {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;}
.login-dim.on {display:block;}
.login-popup {display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 30px); max-width:440px; background:#fff; border-radius:14px; padding:80px 35px 35px; z-index:9999; box-shadow:0 10px 40px rgba(0,0,0,0.25);}
.login-popup.on {display:block;}
.login-popup .login-close {position:absolute; right:18px; top:18px; width:44px; height:44px; background:#f6f6f6; border:0; border-radius:50%; font-size:0; cursor:pointer; transition:background 0.2s;}
.login-popup .login-close:hover {background:#ffe5ea;}
.login-popup .login-close:before, .login-popup .login-close:after {position:absolute; left:50%; top:50%; content:""; width:20px; height:2px; background:#333; transform:translate(-50%, -50%) rotate(45deg);}
.login-popup .login-close:after {transform:translate(-50%, -50%) rotate(-45deg);}
.login-popup .login-head {text-align:center; margin-bottom:28px;}
.login-popup .login-head .login-title {font-size:24px; font-weight:700; color:#222; margin-bottom:8px; letter-spacing:-0.5px;}
.login-popup .login-head .login-desc {font-size:14px; color:#888; letter-spacing:-0.3px;}
.login-popup .login-form ul li {margin-bottom:10px;}
.login-popup .login-form ul li input {width:100%; height:50px; border:1px solid #e2e2e2; border-radius:8px; padding:0 16px; font-size:15px; outline:0; background:#fafafa; transition:all 0.2s;}
.login-popup .login-form ul li input:focus {border-color:#ff4363; background:#fff;}
.login-popup .login-form .login-options {display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 18px;}
.login-popup .login-form .login-keep {display:flex; align-items:center; gap:6px; font-size:13px; color:#666; cursor:pointer;}
.login-popup .login-form .login-keep input[type="checkbox"] {width:16px; height:16px;}
.login-popup .login-form .login-find {font-size:13px; color:#666; transition:color 0.2s;}
.login-popup .login-form .login-find:hover {color:#ff4363; text-decoration:underline;}
.login-popup .login-form .login-submit {width:100%; height:50px; background:#ff4363; color:#fff; border:0; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; letter-spacing:-0.5px; transition:background 0.2s;}
.login-popup .login-form .login-submit:hover {background:#e63554;}
.login-popup .login-join {text-align:center; margin-top:22px; padding-top:18px; border-top:1px dashed #eee; font-size:13px; color:#888;}
.login-popup .login-join a {display:inline-block; margin-left:6px; color:#ff4363; font-weight:600; transition:color 0.2s;}
.login-popup .login-join a:hover {text-decoration:underline;}
@media (max-width:767px){
.login-popup {padding:70px 22px 25px;}
.login-popup .login-close {width:38px; height:38px; right:14px; top:14px;}
.login-popup .login-close:before, .login-popup .login-close:after {width:17px;}
.login-popup .login-head .login-title {font-size:20px;}
.login-popup .login-head .login-desc {font-size:13px;}
.login-popup .login-form ul li input {height:46px; font-size:14px;}
.login-popup .login-form .login-submit {height:46px; font-size:15px;}
.login-popup .login-form .login-keep {font-size:12px;}
.login-popup .login-form .login-find {font-size:12px;}
.login-popup .login-join {font-size:12px;}
}
/* join popup */
.join-dim {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;}
.join-dim.on {display:block;}
.join-popup {display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 30px); max-width:520px; max-height:90vh; background:#fff; border-radius:14px; z-index:9999; box-shadow:0 10px 40px rgba(0,0,0,0.25); overflow:hidden;}
.join-popup.on {display:block;}
.join-popup .join-popup-inner {max-height:90vh; overflow-y:auto; padding:80px 35px 35px;}
.join-popup .join-close {position:absolute; right:18px; top:18px; width:44px; height:44px; background:#f6f6f6; border:0; border-radius:50%; font-size:0; cursor:pointer; transition:background 0.2s; z-index:1;}
.join-popup .join-close:hover {background:#ffe5ea;}
.join-popup .join-close:before, .join-popup .join-close:after {position:absolute; left:50%; top:50%; content:""; width:20px; height:2px; background:#333; transform:translate(-50%, -50%) rotate(45deg);}
.join-popup .join-close:after {transform:translate(-50%, -50%) rotate(-45deg);}
.join-popup .join-head {text-align:center; margin-bottom:26px;}
.join-popup .join-head .join-title {font-size:24px; font-weight:700; color:#222; margin-bottom:8px; letter-spacing:-0.5px;}
.join-popup .join-head .join-desc {font-size:14px; color:#888; letter-spacing:-0.3px;}
.join-popup .join-form .join-field {margin-bottom:14px;}
.join-popup .join-form .join-field label {display:block; font-size:13px; font-weight:600; color:#444; margin-bottom:6px; letter-spacing:-0.3px;}
.join-popup .join-form .join-field input {width:100%; height:46px; border:1px solid #e2e2e2; border-radius:8px; padding:0 14px; font-size:14px; outline:0; background:#fafafa; transition:all 0.2s;}
.join-popup .join-form .join-field input:focus {border-color:#ff4363; background:#fff;}
.join-popup .join-form .join-field input::placeholder {color:#bbb; font-size:13px;}
.join-popup .join-form .join-field .field-row {display:flex; gap:8px; align-items:center;}
.join-popup .join-form .join-field .field-row + .field-row {margin-top:8px;}
.join-popup .join-form .join-field .field-row input {flex:1; min-width:0;}
.join-popup .join-form .join-field .field-row select {height:46px; border:1px solid #e2e2e2; border-radius:8px; padding:0 10px; font-size:14px; background:#fafafa; color:#333; outline:0; cursor:pointer;}
.join-popup .join-form .join-field .field-row .field-btn {flex-shrink:0; padding:0 16px; height:46px; background:#fff; border:1px solid #ff4363; color:#ff4363; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; letter-spacing:-0.5px; transition:all 0.2s; white-space:nowrap;}
.join-popup .join-form .join-field .field-row .field-btn:hover {background:#ff4363; color:#fff;}
.join-popup .join-form .join-field .field-row .field-btn.is-done {background:#ad8e91; color:#fff;border:1px solid #ad8e91;}
/* phone row */
.join-popup .join-form .join-field .phone-row .phone-prefix {width:84px; flex-shrink:0;}
.join-popup .join-form .join-field .phone-row input {text-align:center; padding:0 8px;}
.join-popup .join-form .join-field .phone-row .phone-dash {color:#aaa; font-size:14px; flex-shrink:0;}
/* email row */
.join-popup .join-form .join-field .email-row .email-at {color:#888; font-size:15px; font-weight:500; flex-shrink:0;}
.join-popup .join-form .join-field .email-row-bottom .email-select {flex:1; min-width:0; width:auto;}
.join-popup .join-form .join-agree {margin:22px 0 24px; padding:18px; background:#fafafa; border-radius:10px;}
.join-popup .join-form .join-agree .agree-all {display:flex; align-items:center; gap:8px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #e8e8e8; font-size:15px; font-weight:700; color:#222; cursor:pointer;}
.join-popup .join-form .join-agree .agree-all input[type="checkbox"] {width:18px; height:18px;}
.join-popup .join-form .join-agree ul li {display:flex; align-items:center; justify-content:space-between; padding:5px 0; flex-wrap:wrap;}
.join-popup .join-form .join-agree ul li > label {display:flex; align-items:center; gap:8px; font-size:13px; color:#555; cursor:pointer; flex:1;}
.join-popup .join-form .join-agree ul li > label input[type="checkbox"] {width:16px; height:16px;}
.join-popup .join-form .join-agree ul li .required {color:#ff4363; font-style:normal; font-weight:600; margin-left:2px;}
.join-popup .join-form .join-agree ul li .optional {color:#888; font-style:normal; margin-left:2px;}
.join-popup .join-form .join-agree ul li > a {font-size:12px; color:#888; text-decoration:underline;}
.join-popup .join-form .join-agree ul li > a:hover {color:#ff4363;}
.join-popup .join-form .join-agree ul li.has-sub .agree-sub {flex:0 0 100%; display:flex; gap:18px; padding:6px 0 4px 26px;}
.join-popup .join-form .join-agree ul li.has-sub .agree-sub label {display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#777; cursor:pointer;}
.join-popup .join-form .join-agree ul li.has-sub .agree-sub label input[type="checkbox"] {width:14px; height:14px;}
.join-popup .join-form .join-submit {width:100%; height:52px; background:#ff4363; color:#fff; border:0; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; letter-spacing:-0.5px; transition:background 0.2s;}
.join-popup .join-form .join-submit:hover {background:#e63554;}
@media (max-width:767px){
.join-popup .join-popup-inner {padding:70px 22px 25px;}
.join-popup .join-close {width:38px; height:38px; right:14px; top:14px;}
.join-popup .join-close:before, .join-popup .join-close:after {width:17px;}
.join-popup .join-head .join-title {font-size:20px;}
.join-popup .join-head .join-desc {font-size:13px;}
.join-popup .join-form .join-field input {height:44px; font-size:13px;}
.join-popup .join-form .join-field .field-row select {height:44px; font-size:13px; padding:0 8px;}
.join-popup .join-form .join-field .field-row .field-btn {height:44px; padding:0 12px; font-size:12px;}
/* phone/email mobile layout */
.join-popup .join-form .join-field .phone-row {flex-wrap:wrap; gap:6px;}
.join-popup .join-form .join-field .phone-row .phone-prefix {width:auto; min-width:72px;}
.join-popup .join-form .join-field .phone-row .phone-dash {display:none;}
.join-popup .join-form .join-field .phone-row .phone-mid,
.join-popup .join-form .join-field .phone-row .phone-last {flex:1; min-width:0; padding:0 6px;}
.join-popup .join-form .join-field .phone-row .field-btn {flex-basis:100%; width:100%; padding:0;}
.join-popup .join-form .join-field .email-row {gap:6px;}
.join-popup .join-form .join-field .email-row-bottom .email-select {min-width:0;}
.join-popup .join-form .join-agree {padding:14px;}
.join-popup .join-form .join-agree .agree-all {font-size:14px;}
.join-popup .join-form .join-agree ul li label {font-size:12px;}
.join-popup .join-form .join-submit {height:48px; font-size:15px;}
}
/* terms popup (이중 모달) */
.terms-dim {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:10001;}
.terms-dim.on {display:block;}
.terms-popup {display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 30px); max-width:640px; max-height:85vh; background:#fff; border-radius:14px; z-index:10002; box-shadow:0 12px 50px rgba(0,0,0,0.3); overflow:hidden;}
.terms-popup.on {display:block;}
.terms-popup .terms-popup-inner {display:flex; flex-direction:column; max-height:85vh;}
.terms-popup .terms-head {display:flex; align-items:center; justify-content:space-between; padding:22px 28px; border-bottom:1px solid #f0f0f0; flex-shrink:0;}
.terms-popup .terms-head .terms-title {font-size:20px; font-weight:700; color:#222; letter-spacing:-0.5px;}
.terms-popup .terms-close {width:38px; height:38px; background:#f6f6f6; border:0; border-radius:50%; font-size:0; cursor:pointer; position:relative; transition:background 0.2s; flex-shrink:0;}
.terms-popup .terms-close:hover {background:#ffe5ea;}
.terms-popup .terms-close:before, .terms-popup .terms-close:after {position:absolute; left:50%; top:50%; content:""; width:16px; height:2px; background:#333; transform:translate(-50%, -50%) rotate(45deg);}
.terms-popup .terms-close:after {transform:translate(-50%, -50%) rotate(-45deg);}
.terms-popup .terms-body {padding:24px 28px 28px; overflow-y:auto; flex:1;}
.terms-popup .terms-content {display:none;}
.terms-popup .terms-content.on {display:block;}
.terms-popup .terms-content h4 {font-size:15px; font-weight:700; color:#222; margin:18px 0 10px; letter-spacing:-0.3px;}
.terms-popup .terms-content h4:first-child {margin-top:0;}
.terms-popup .terms-content p {font-size:14px; line-height:1.7; color:#555; letter-spacing:-0.3px; margin-bottom:8px;}
.terms-popup .terms-content .terms-lead {padding:14px 16px; background:#fff5f6; border-left:3px solid #ff4363; border-radius:4px; color:#444; font-size:13px; margin-bottom:18px;}
.terms-popup .terms-content .terms-note {font-size:12px; color:#888; padding:10px 12px; background:#fafafa; border-radius:4px; margin-top:10px;}
.terms-popup .terms-content .terms-list {margin:6px 0 12px; padding-left:0; list-style:none;}
.terms-popup .terms-content .terms-list li {position:relative; padding:3px 0 3px 14px; font-size:13px; color:#555; line-height:1.6;}
.terms-popup .terms-content .terms-list li:before {content:""; position:absolute; left:2px; top:13px; width:4px; height:4px; background:#ff4363; border-radius:50%;}
.terms-popup .terms-content .table-scroll {overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 12px; border-top:2px solid #ff4363; border-bottom:1px solid #e6e6e6;}
.terms-popup .terms-content .table-scroll::-webkit-scrollbar {height:6px;}
.terms-popup .terms-content .table-scroll::-webkit-scrollbar-track {background:#f5f5f5;}
.terms-popup .terms-content .table-scroll::-webkit-scrollbar-thumb {background:#ddd; border-radius:3px;}
.terms-popup .terms-content .table-scroll::-webkit-scrollbar-thumb:hover {background:#ff4363;}
.terms-popup .terms-content table {width:100%; min-width:420px; border-collapse:collapse; margin:0; font-size:13px; word-break:keep-all;}
.terms-popup .terms-content table thead th {background:#fdebec; color:#e61f19; font-weight:700; padding:11px 12px; text-align:center; border-bottom:1px solid #f3c8ca; letter-spacing:-0.3px;}
.terms-popup .terms-content table thead th + th {border-left:1px solid #f3c8ca;}
.terms-popup .terms-content table tbody td {padding:11px 12px; border-bottom:1px solid #f0f0f0; color:#555; line-height:1.5; text-align:center;}
.terms-popup .terms-content table tbody td + td {border-left:1px solid #f0f0f0;}
.terms-popup .terms-content table tbody tr:last-child td {border-bottom:0;}
@media (max-width:767px){
.terms-popup .terms-head {padding:18px 20px;}
.terms-popup .terms-head .terms-title {font-size:17px;}
.terms-popup .terms-close {width:34px; height:34px;}
.terms-popup .terms-close:before, .terms-popup .terms-close:after {width:14px;}
.terms-popup .terms-body {padding:20px;}
.terms-popup .terms-content h4 {font-size:14px;}
.terms-popup .terms-content p {font-size:13px;}
.terms-popup .terms-content table {font-size:12px;}
.terms-popup .terms-content table thead th,
.terms-popup .terms-content table tbody td {padding:8px 10px;}
}
@media (max-width:991px){
.is-pc {display:none;}
.is-m {display:block;}
}
/* container */
.container {max-width:1200px; padding:0 15px; margin:0 auto; width:100%;}
/* banner-box */
.banner-box {margin:0 0 15px;}
.banner-box img {width:100%;}
@media (max-width:991px){
.banner-box {margin:0 -15px 15px;}
}
/* board-box */
.board-box {display:flex; flex-wrap:wrap; margin:0 0 -20px;}
.board-box .board-inner {border-radius:10px; overflow:hidden; width:calc(50% - 20px); margin:0 10px 20px;}
.board-box .board-inner .inner-head {background:#fff; border-bottom:1px solid #f8f8f8; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:10px 15px;}
.board-box .board-inner .inner-head h2 {display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:18px; font-weight:700;}
.board-box .board-inner .inner-head a {display:block; width:20px; height:20px; background-size:9px auto; background-position:right center; background-repeat:no-repeat; background-image:url('../img/icon_main_more_02.png'); font-size:0;}
.board-box .board-inner .inner-head.best {background:#ff4363;}
.board-box .board-inner .inner-head.best h2 {color:#fff;}
.board-box .board-inner .inner-head.best h2:before {display:inline-block; content:""; width:15px; height:20px; background:url('../img/icon_best.png') no-repeat center / cover;}
.board-box .board-inner .inner-head.best a {background-image:url('../img/icon_main_more_01.png');}
.board-box .board-inner .inner-head.recent {background:#ad8e91;}
.board-box .board-inner .inner-head.recent h2 {color:#fff;}
.board-box .board-inner .inner-head.recent h2:before {display:inline-block; content:""; width:25px; height:23px; background:url('../img/icon_recent.png') no-repeat center / cover;}
.board-box .board-inner .inner-head.recent a {background-image:url('../img/icon_main_more_01.png');}
.board-box .board-inner .inner-body {background:#fff;}
.board-box .board-inner .inner-body ul li {border-bottom:1px solid #f8f8f8;}
.board-box .board-inner .inner-body ul li:last-of-type {border:0;}
.board-box .board-inner .inner-body ul li .inner {display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 15px;}
.board-box .board-inner .inner-body ul li .inner .category {font-size:13px; color:#808080; letter-spacing:-1px;}
.board-box .board-inner .inner-body ul li .inner .category.red {color:#db212c;}
.board-box .board-inner .inner-body ul li .inner .category.blue {color:#0071bc;}
.board-box .board-inner .inner-body ul li .inner .category.orange {color:#e67700;}
.board-box .board-inner .inner-body ul li .inner .subject {font-size:16px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; min-width:0; letter-spacing:-1px;}
.board-box .board-inner .inner-body ul li .inner .like {display:flex; flex-wrap:wrap; align-items:center; font-size:13px; color:#ff4363; gap:2px;}
.board-box .board-inner .inner-body ul li .inner .like:before {display:inline-block; content:""; width:13px; height:12px; background:url('../img/icon_like.png') no-repeat center / cover; position:relative; top:1px;}
.board-box .board-inner .inner-body ul li .inner .comment {display:flex; flex-wrap:wrap; align-items:center; font-size:13px; color:#ad8e91; gap:2px;}
.board-box .board-inner .inner-body ul li .inner .comment:before {display:inline-block; content:""; width:14px; height:12px; background:url('../img/icon_comment.png') no-repeat center / cover; position:relative; top:1px;}
.board-box .board-inner .inner-body ul li .inner .datetime {font-size:13px; color:#999;}
.board-box .board-inner .inner-body ul li .inner div {display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.board-box .board-inner .inner-body ul li .inner:hover .subject {color:#ff4363; text-decoration:underline;}
@media (max-width:991px){
.board-box {margin:0 -10px;}
.board-box .board-inner {width:calc(50% - 10px); margin:0 5px 10px;}
.board-box .board-inner .inner-head {padding:15px;}
.board-box .board-inner .inner-body ul li .inner .category {font-size:12px;}
.board-box .board-inner .inner-body ul li .inner .subject {font-size:15px;}
.board-box .board-inner .inner-body ul li .inner .like:before {top:0;}
.board-box .board-inner .inner-body ul li .inner .comment:before {top:0;}
.board-box .board-inner .inner-body ul li .inner div {width:100%;}
.board-box .board-inner .inner-body ul li .inner div .like {order:2;}
.board-box .board-inner .inner-body ul li .inner div .comment {order:3;}
.board-box .board-inner .inner-body ul li .inner div .datetime {order:1; flex:1; min-width:0;}
}
@media (max-width:767px){
.board-box {margin:0 -15px; gap:15px;}
.board-box .board-inner {border-radius:0; width:100%; margin:0;}
}
/* ===========================================================
* app-board-template-list
* sub.css 또는 별도 파일로 추가
* =========================================================== */
.app-board-template-list{background:#fff;border-top:2px solid #e61f19;border-bottom:1px solid #e6e6e5;}
/* head row */
.app-board-template-list .tpl-head{display:grid;grid-template-columns:120px 1fr 140px 110px 70px 70px 70px;align-items:center;background:#fafafa;border-bottom:1px solid #e6e6e5;}
.app-board-template-list .tpl-head > div{padding:14px 10px;text-align:center;font-size:15px;font-weight:600;color:#e61f19;letter-spacing:-0.5px;}
.app-board-template-list .tpl-head .col-title{text-align:left;padding-left:20px;}
/* item row */
.app-board-template-list .tpl-item{display:grid;grid-template-columns:120px 1fr 140px 110px 70px 70px 70px;align-items:center;border-bottom:1px solid #f0f0f0;transition:background .15s ease;}
.app-board-template-list .tpl-item:last-child{border-bottom:0;}
.app-board-template-list .tpl-item:hover{background:#fdf5f5;}
.app-board-template-list .tpl-item > div{padding:16px 10px;font-size:15px;color:#303030;text-align:center;letter-spacing:-0.5px;}
/* category badge (global - 목록/상세 공통) */
.app-board-template-list .col-category{display:flex;align-items:center;justify-content:center;}
.cate-badge{display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:26px;padding:0 12px;border-radius:13px;font-size:13px;font-weight:500;letter-spacing:-0.5px;line-height:1;}
.cate-badge.politics{background:#fdebec;color:#e61f19;}
.cate-badge.policy{background:#eaf3fb;color:#1d6fb8;}
.cate-badge.economy{background:#e8f5ec;color:#1f8a4c;}
.cate-badge.society{background:#f1ecfa;color:#6a3fcc;}
.cate-badge.youth{background:#fff4e6;color:#e67700;}
.cate-badge.daily{background:#f0f0f0;color:#555;}
.cate-badge.notice{background:#e61f19;color:#fff;}
/* title cell */
.app-board-template-list .col-title{text-align:left;padding:16px 10px 16px 20px;min-width:0;}
.app-board-template-list .col-title .title-row{display:flex;align-items:center;gap:6px;min-width:0;}
/* title-text: 댓글수·N뱃지를 자기 안에 inline으로 품음 */
.app-board-template-list .col-title .title-text{font-size:16px;font-weight:500;color:#222;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;flex:1; text-align:left;}
.app-board-template-list .tpl-item:hover .col-title .title-text{color:#e61f19;text-decoration:underline;}
/* 댓글 수: 제목 텍스트 끝에 자연스럽게 붙음 */
.app-board-template-list .col-title .title-text .cmt-cnt{display:inline;margin-left:6px;font-size:13px;font-weight:600;color:#e61f19;text-decoration:none;}
/* N 뱃지: 댓글 수 뒤에 inline-block으로 붙음 */
.app-board-template-list .col-title .title-text .ic-new{display:inline-block;vertical-align:middle;margin-left:5px;margin-top:-2px;min-width:18px;height:18px;padding:0 5px;background:#e61f19;color:#fff;font-size:11px;font-weight:700;border-radius:9px;line-height:18px;text-align:center;text-decoration:none;}
/* 자물쇠 아이콘 (비공개) */
.app-board-template-list .col-title .ic-lock{flex-shrink:0;display:inline-block;width:14px;height:14px;border:1.5px solid #999;border-radius:2px;position:relative;}
.app-board-template-list .col-title .ic-lock:before{content:"";position:absolute;left:50%;top:-6px;width:8px;height:7px;border:1.5px solid #999;border-bottom:0;border-radius:50% 50% 0 0 / 80% 80% 0 0;transform:translateX(-50%);}
/* author */
.app-board-template-list .col-author{color:#555;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
/* date */
.app-board-template-list .col-date{color:#888;font-size:14px;}
/* meta - views / likes / comments (각 열로 분리) */
.app-board-template-list .col-view,
.app-board-template-list .col-like,
.app-board-template-list .col-cmt{display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;color:#888;}
.app-board-template-list .col-view .ic,
.app-board-template-list .col-like .ic,
.app-board-template-list .col-cmt .ic{display:inline-block;width:14px;height:14px;position:relative;flex-shrink:0;}
.app-board-template-list .ic-view{border:1.5px solid #aaa;border-radius:50% 10% 50% 10%;transform:rotate(45deg);width:13px;height:8px;margin-top:3px;}
.app-board-template-list .ic-view:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;background:#aaa;border-radius:50%;transform:translate(-50%,-50%);}
.app-board-template-list .ic-like{width:14px;height:13px;background:#aaa;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;}
.app-board-template-list .ic-cmt{width:14px;height:13px;background:#aaa;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;}
.app-board-template-list .col-like.is-like{color:#e61f19;}
.app-board-template-list .col-like.is-like .ic-like{background:#e61f19;}
/* notice item special */
.app-board-template-list .tpl-item.is-notice{background:#fffbe9;}
.app-board-template-list .tpl-item.is-notice:hover{background:#fff5d6;}
.app-board-template-list .tpl-item.is-notice .col-title .title-text{font-weight:600;color:#a26b00;}
/* ===========================================================
* top utility (search & write btn)
* =========================================================== */
.board-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.board-top .board-info{font-size:14px;color:#666;}
.board-top .board-info strong{color:#e61f19;font-weight:600;}
.board-top .board-actions{display:flex;gap:8px;align-items:center;}
.board-top .board-search{display:flex;align-items:center;height:38px;border:1px solid #ddd;border-radius:4px;background:#fff;overflow:hidden;}
.board-top .board-search select{height:100%;border:0;background:#fafafa;padding:0 10px;font-size:14px;color:#555;border-right:1px solid #ddd;outline:none;}
.board-top .board-search input{height:100%;border:0;padding:0 12px;font-size:14px;width:200px;outline:none;}
.board-top .board-search .search{height:100%;width:42px;border:0;background:#e61f19;color:#fff;font-size:14px;cursor:pointer;}
.board-top .btn-write{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;background:#e61f19;color:#fff;font-size:14px;font-weight:500;border-radius:4px;}
.board-top .btn-write:before{content:"+";margin-right:5px;font-weight:300;font-size:18px;}
/* ===========================================================
* pagination
* =========================================================== */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:32px;}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border:1px solid #e0e0e0;background:#fff;font-size:14px;color:#555;border-radius:4px;}
.pagination a:hover{background:#f8f8f8;}
.pagination .on{background:#e61f19;color:#fff;border-color:#e61f19;font-weight:600;}
/* ===========================================================
* TABLET (≤991px)
* =========================================================== */
@media (max-width:991px){
.app-board-template-list .tpl-head{grid-template-columns:90px 1fr 110px 100px;}
.app-board-template-list .tpl-head .col-view,
.app-board-template-list .tpl-head .col-like,
.app-board-template-list .tpl-head .col-cmt{display:none;}
.app-board-template-list .tpl-head > div{padding:12px 8px;font-size:14px;}
.app-board-template-list .tpl-item{grid-template-columns:90px 1fr 110px 100px;}
.app-board-template-list .tpl-item > div{padding:14px 8px;font-size:14px;}
.app-board-template-list .col-title{padding:14px 8px 14px 16px;}
.app-board-template-list .col-title .title-text{font-size:15px;}
.app-board-template-list .col-view,
.app-board-template-list .col-like,
.app-board-template-list .col-cmt{display:none;}
.cate-badge{min-width:64px;height:24px;font-size:12px;padding:0 10px;}
.board-top .board-search input{width:140px;}
}
/* ===========================================================
* MOBILE (≤767px)
* =========================================================== */
@media (max-width:767px){
/* hide table head on mobile */
.app-board-template-list .tpl-head{display:none;}
/* card style for each item */
.app-board-template-list{border-top:2px solid #e61f19;}
.app-board-template-list .tpl-item{display:block;padding:14px 14px 12px;border-bottom:1px solid #eee;}
.app-board-template-list .tpl-item:hover{background:#fff;}
.app-board-template-list .tpl-item > div{padding:0;text-align:left;}
/* row 1: category */
.app-board-template-list .col-category{justify-content:flex-start;margin-bottom:8px;}
/* row 2: title */
.app-board-template-list .col-title{padding:0 0 10px;}
.app-board-template-list .col-title .title-text{font-size:15px;font-weight:500;white-space:normal;line-height:1.45;display:block;overflow:visible;text-overflow:clip;}
/* row 3: meta line - 작성자 · 날짜 · 조회/추천/댓글 한 줄 정렬 */
.app-board-template-list .col-author,
.app-board-template-list .col-date,
.app-board-template-list .col-view,
.app-board-template-list .col-like,
.app-board-template-list .col-cmt{display:inline-flex;align-items:center;height:18px;line-height:18px;font-size:12px;color:#888;padding:0;margin:0;vertical-align:middle;}
.app-board-template-list .col-author{color:#555;font-weight:500;margin-right:8px;}
.app-board-template-list .col-author:after{content:"·";margin-left:8px;color:#ccc;display:inline-block;}
.app-board-template-list .col-date{margin-right:10px;}
.app-board-template-list .col-view,
.app-board-template-list .col-like,
.app-board-template-list .col-cmt{gap:4px;margin-right:8px;}
.app-board-template-list .col-view .ic,
.app-board-template-list .col-like .ic,
.app-board-template-list .col-cmt .ic{width:12px;height:12px;}
.app-board-template-list .tpl-item.is-notice{background:#fffbe9;}
/* top utility */
.board-top{flex-direction:column;align-items:stretch;}
.board-top .board-actions{justify-content:space-between;}
.board-top .board-search{flex:1;}
.board-top .board-search input{width:100%;}
/* pagination */
.pagination a,.pagination span{min-width:30px;height:30px;font-size:13px;}
}
/* very small */
@media (max-width:380px){
.app-board-template-list .col-view,
.app-board-template-list .col-like,
.app-board-template-list .col-cmt{margin-right:6px;}
.board-top .btn-write{padding:0 14px;}
}
/* ===========================================================
* qna (문의하기) page
* =========================================================== */
.qna-wrap {max-width:760px; margin:0 auto; padding:30px 0 60px;}
.qna-wrap .qna-head {text-align:center; margin-bottom:36px; padding-bottom:28px; border-bottom:2px solid #ff4363;}
.qna-wrap .qna-head .qna-title {font-size:32px; font-weight:800; color:#222; letter-spacing:-1px; margin-bottom:12px;}
.qna-wrap .qna-head .qna-desc {font-size:15px; color:#777; line-height:1.7; letter-spacing:-0.3px;}
.qna-form {background:#fff; border-radius:14px; padding:36px 36px 32px; box-shadow:0 2px 10px rgba(0,0,0,0.04);}
.qna-form .qna-field {margin-bottom:20px;}
.qna-form .qna-row {display:flex; gap:14px;}
.qna-form .qna-row .qna-field {flex:1; min-width:0;}
.qna-form .qna-field label {display:block; font-size:14px; font-weight:600; color:#333; margin-bottom:8px; letter-spacing:-0.3px;}
.qna-form .qna-field label .required-mark {color:#ff4363; font-style:normal; margin-left:2px;}
.qna-form .qna-field .qna-optional {color:#999; font-size:12px; font-weight:400; margin-left:4px;}
.qna-form .qna-field input[type="text"],
.qna-form .qna-field input[type="email"],
.qna-form .qna-field input[type="tel"],
.qna-form .qna-field select,
.qna-form .qna-field textarea {width:100%; height:48px; border:1px solid #e2e2e2; border-radius:8px; padding:0 14px; font-size:14px; outline:0; background:#fafafa; transition:all 0.2s; font-family:inherit;}
.qna-form .qna-field input[type="text"]:focus,
.qna-form .qna-field input[type="email"]:focus,
.qna-form .qna-field input[type="tel"]:focus,
.qna-form .qna-field select:focus,
.qna-form .qna-field textarea:focus {border-color:#ff4363; background:#fff;}
.qna-form .qna-field input::placeholder,
.qna-form .qna-field textarea::placeholder {color:#bbb;}
.qna-form .qna-field textarea {height:180px; padding:14px; line-height:1.6; resize:vertical;}
.qna-form .qna-field select {cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; background-size:10px; padding-right:36px;}
.qna-form .qna-field .qna-help {margin-top:6px; font-size:12px; color:#999; text-align:right;}
.qna-form .qna-field .qna-help .qna-count {color:#ff4363; font-weight:600;}
.qna-form .qna-phone {display:flex; align-items:center; gap:8px;}
.qna-form .qna-phone select {width:90px; flex-shrink:0;}
.qna-form .qna-phone input {flex:1; min-width:0; text-align:center;}
.qna-form .qna-phone .qna-dash {color:#bbb; font-size:14px; flex-shrink:0;}
.qna-form .qna-file {display:flex; gap:8px; align-items:center;}
.qna-form .qna-file .qna-file-name {flex:1; min-width:0; cursor:default;}
.qna-form .qna-file .qna-file-btn {flex-shrink:0; height:48px; padding:0 20px; background:#fff; border:1px solid #ff4363; color:#ff4363; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; letter-spacing:-0.5px; transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center; margin:0;}
.qna-form .qna-file .qna-file-btn:hover {background:#ff4363; color:#fff;}
.qna-form .qna-file .qna-file-input {display:none;}
.qna-form .qna-agree {display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; background:#fafafa; border-radius:8px; margin:24px 0 20px;}
.qna-form .qna-agree .qna-agree-label {display:flex; align-items:center; gap:8px; font-size:13px; color:#444; cursor:pointer; margin:0; font-weight:500;}
.qna-form .qna-agree .qna-agree-label input[type="checkbox"] {appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1.5px solid #d0d0d0; border-radius:5px; background:#fff; cursor:pointer; position:relative; flex-shrink:0; margin:0; transition:all 0.15s;}
.qna-form .qna-agree .qna-agree-label input[type="checkbox"]:checked {background:#ff4363; border-color:#ff4363;}
.qna-form .qna-agree .qna-agree-label input[type="checkbox"]:checked:before {content:""; position:absolute; left:50%; top:48%; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%, -55%) rotate(45deg);}
.qna-form .qna-agree .qna-agree-label .required {color:#ff4363; font-style:normal; font-weight:600; margin-left:2px;}
.qna-form .qna-agree > a {font-size:12px; color:#888; text-decoration:underline; flex-shrink:0;}
.qna-form .qna-agree > a:hover {color:#ff4363;}
.qna-form .qna-info {padding:18px 20px; background:#fff5f6; border-left:3px solid #ff4363; border-radius:4px; margin-bottom:30px;}
.qna-form .qna-info h4 {font-size:14px; font-weight:700; color:#ff4363; margin-bottom:8px; letter-spacing:-0.3px;}
.qna-form .qna-info ul li {position:relative; padding:3px 0 3px 12px; font-size:13px; color:#666; line-height:1.6;}
.qna-form .qna-info ul li:before {content:""; position:absolute; left:0; top:13px; width:3px; height:3px; background:#ff4363; border-radius:50%;}
.qna-form .qna-btns {display:flex; gap:10px; justify-content:center;}
.qna-form .qna-btns .qna-btn-cancel,
.qna-form .qna-btns .qna-btn-submit {min-width:140px; height:54px; padding:0 30px; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; letter-spacing:-0.5px; transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center;}
.qna-form .qna-btns .qna-btn-cancel {background:#fff; border:1px solid #ddd; color:#666;}
.qna-form .qna-btns .qna-btn-cancel:hover {border-color:#999; color:#222;}
.qna-form .qna-btns .qna-btn-submit {background:#ff4363; border:0; color:#fff;}
.qna-form .qna-btns .qna-btn-submit:hover {background:#e63554;}
@media (max-width:767px){
.qna-wrap {padding:20px 0 40px;}
.qna-wrap .qna-head {margin-bottom:24px; padding-bottom:20px;}
.qna-wrap .qna-head .qna-title {font-size:24px;}
.qna-wrap .qna-head .qna-desc {font-size:13px;}
.qna-form {padding:24px 18px 22px; border-radius:10px;}
.qna-form .qna-field {margin-bottom:16px;}
.qna-form .qna-row {flex-direction:column; gap:0;}
.qna-form .qna-row .qna-field {margin-bottom:16px;}
.qna-form .qna-field label {font-size:13px;}
.qna-form .qna-field input[type="text"],
.qna-form .qna-field input[type="email"],
.qna-form .qna-field input[type="tel"],
.qna-form .qna-field select,
.qna-form .qna-field textarea {height:44px; font-size:13px;}
.qna-form .qna-field textarea {height:140px;}
.qna-form .qna-phone select {width:78px;}
.qna-form .qna-phone .qna-dash {display:none;}
.qna-form .qna-phone {gap:6px;}
.qna-form .qna-phone input {padding:0 8px;}
.qna-form .qna-file .qna-file-btn {height:44px; padding:0 14px; font-size:12px;}
.qna-form .qna-agree {padding:14px; flex-wrap:wrap;}
.qna-form .qna-agree .qna-agree-label {font-size:12px;}
.qna-form .qna-info {padding:14px 16px;}
.qna-form .qna-info ul li {font-size:12px;}
.qna-form .qna-btns .qna-btn-cancel,
.qna-form .qna-btns .qna-btn-submit {min-width:0; flex:1; height:48px; font-size:14px; padding:0 16px;}
}
/* ===========================================================
* find / reset (ID·PW 찾기 + 임시비밀번호)
* =========================================================== */
.find-wrap {max-width:620px; margin:0 auto; padding:30px 0 60px;}
.find-wrap .find-head {text-align:center; margin-bottom:28px; padding-bottom:24px;}
.find-wrap .find-head .find-title {font-size:30px; font-weight:800; color:#222; letter-spacing:-1px; margin-bottom:10px;}
.find-wrap .find-head .find-desc {font-size:14px; color:#777; line-height:1.7; letter-spacing:-0.3px;}
/* 진행 단계 */
.find-steps {display:flex; justify-content:center; align-items:center; gap:0; margin:0 auto 28px; padding:0;}
.find-steps li {position:relative; flex:0 0 auto; padding:0 14px 0 36px; font-size:13px; font-weight:600; color:#bbb; letter-spacing:-0.3px;}
.find-steps li:before {content:counter(step); counter-increment:step; position:absolute; left:0; top:50%; transform:translateY(-50%); width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:#f1f1f1; color:#bbb; font-size:13px; font-weight:700;}
.find-steps {counter-reset:step;}
.find-steps li + li:after {content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:14px; height:1px; background:#e2e2e2;}
.find-steps li.is-done {color:#ff4363;}
.find-steps li.is-done:before {background:#ffe5ea; color:#ff4363;}
.find-steps li.is-on {color:#fff;}
.find-steps li.is-on:before {background:#ff4363; color:#fff; box-shadow:0 4px 10px rgba(255,67,99,0.3);}
.find-steps li.is-on {color:#ff4363;}
/* 탭 */
.find-tabs {display:flex; gap:0; margin-bottom:0; border-bottom:1px solid #e2e2e2;}
.find-tabs .find-tab {flex:1; padding:14px 12px; background:transparent; border:0; border-bottom:3px solid transparent; font-size:15px; font-weight:600; color:#888; cursor:pointer; letter-spacing:-0.3px; transition:all 0.2s;}
.find-tabs .find-tab:hover {color:#222;}
.find-tabs .find-tab.is-on {color:#ff4363; border-bottom-color:#ff4363;}
/* 폼 카드 */
.find-form {display:none; padding:32px 30px 28px; background:#fff; border-radius:0 0 14px 14px; box-shadow:0 2px 10px rgba(0,0,0,0.04);}
.find-form.is-on {display:block;}
.find-form .find-info {padding:14px 18px; background:#fff5f6; border-left:3px solid #ff4363; border-radius:4px; margin-bottom:22px; font-size:13px; color:#555; line-height:1.7;}
.find-form .find-info strong {color:#ff4363;}
.find-form .find-field {margin-bottom:18px;}
.find-form .find-field label {display:block; font-size:14px; font-weight:600; color:#333; margin-bottom:8px; letter-spacing:-0.3px;}
.find-form .find-field label .required-mark {color:#ff4363; font-style:normal; margin-left:2px;}
.find-form .find-field input[type="text"],
.find-form .find-field input[type="tel"],
.find-form .find-field input[type="email"],
.find-form .find-field select {width:100%; height:48px; border:1px solid #e2e2e2; border-radius:8px; padding:0 14px; font-size:14px; outline:0; background:#fafafa; transition:all 0.2s; font-family:inherit;}
.find-form .find-field input[type="text"]:focus,
.find-form .find-field input[type="tel"]:focus,
.find-form .find-field input[type="email"]:focus,
.find-form .find-field select:focus {border-color:#ff4363; background:#fff;}
.find-form .find-field input::placeholder {color:#bbb;}
.find-form .find-field select {cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; background-size:10px; padding-right:36px;}
/* 휴대폰 */
.find-form .find-phone {display:flex; align-items:center; gap:6px;}
.find-form .find-phone select {width:90px; flex-shrink:0;}
.find-form .find-phone input {flex:1; min-width:0; text-align:center;}
.find-form .find-phone .find-dash {color:#bbb; font-size:14px; flex-shrink:0;}
.find-form .find-phone .find-field-btn {flex-shrink:0; height:48px; padding:0 18px; background:#fff; border:1px solid #ff4363; color:#ff4363; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; letter-spacing:-0.5px; transition:all 0.2s;}
.find-form .find-phone .find-field-btn:hover {background:#ff4363; color:#fff;}
/* 인증번호 */
.find-form .find-cert-row {display:flex; align-items:center; gap:10px;}
.find-form .find-cert-row .find-cert-num {flex:1;}
.find-form .find-cert-row .find-timer {flex-shrink:0; font-size:14px; font-weight:700; color:#ff4363; min-width:48px; text-align:right;}
/* 이메일 */
.find-form .find-email {display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.find-form .find-email .find-email-id {flex:1; min-width:0;}
.find-form .find-email .find-email-at {flex-shrink:0; font-size:14px; color:#999;}
.find-form .find-email .find-email-domain {flex:1; min-width:0;}
.find-form .find-email .find-email-select {width:100%; flex:0 0 100%; margin-top:2px;}
/* 안내사항 박스 */
.find-form .find-notice {padding:16px 18px; background:#fafafa; border:1px solid #eee; border-radius:8px; margin:8px 0 24px;}
.find-form .find-notice h4 {font-size:13px; font-weight:700; color:#333; margin-bottom:8px;}
.find-form .find-notice ul li {position:relative; padding:3px 0 3px 12px; font-size:12px; color:#666; line-height:1.7;}
.find-form .find-notice ul li:before {content:""; position:absolute; left:0; top:14px; width:3px; height:3px; background:#bbb; border-radius:50%;}
/* 버튼 */
.find-form .find-btns, .reset-card .find-btns {display:flex; gap:10px; margin-top:8px;}
.find-form .find-btns .find-btn, .reset-card .find-btns .find-btn {flex:1; min-width:0; height:54px; padding:0 22px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; letter-spacing:-0.5px; transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center; border:1px solid; text-decoration:none;}
.find-form .find-btns .find-btn.cancel, .reset-card .find-btns .find-btn.cancel {background:#fff; border-color:#ddd; color:#666;}
.find-form .find-btns .find-btn.cancel:hover, .reset-card .find-btns .find-btn.cancel:hover {border-color:#999; color:#222;}
.find-form .find-btns .find-btn.submit, .reset-card .find-btns .find-btn.submit {background:#ff4363; border-color:#ff4363; color:#fff;}
.find-form .find-btns .find-btn.submit:hover, .reset-card .find-btns .find-btn.submit:hover {background:#e63554; border-color:#e63554;}
.find-form .find-btns .find-btn.submit:disabled, .reset-card .find-btns .find-btn.submit:disabled {background:#f4b4be; border-color:#f4b4be; cursor:not-allowed;}
/* 아이디 찾기 결과 */
.find-form .find-result {text-align:center; padding:24px 10px 10px;}
.find-form .find-result-icon {width:64px; height:64px; margin:0 auto 14px; background:#ffe5ea; border-radius:50%; position:relative;}
.find-form .find-result-icon:before {content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -60%) rotate(45deg); width:14px; height:26px; border:solid #ff4363; border-width:0 4px 4px 0;}
.find-form .find-result-msg {font-size:15px; color:#333; margin-bottom:18px; letter-spacing:-0.3px;}
.find-form .find-result-box {padding:22px 16px; background:#fafafa; border-radius:10px; border:1px solid #eee; margin-bottom:24px;}
.find-form .find-result-box .find-result-label {display:block; font-size:12px; color:#999; margin-bottom:6px;}
.find-form .find-result-box .find-result-id {display:block; font-size:24px; font-weight:800; color:#ff4363; letter-spacing:1px; margin-bottom:10px;}
.find-form .find-result-box .find-result-date {display:block; font-size:12px; color:#888;}
.find-form .find-result-btns {display:flex; gap:10px;}
.find-form .find-result-btns .find-result-btn {flex:1; height:50px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:-0.5px; display:inline-flex; align-items:center; justify-content:center; border:1px solid; transition:all 0.2s; background:#fff;}
.find-form .find-result-btns .find-result-btn.login {background:#ff4363; border-color:#ff4363; color:#fff;}
.find-form .find-result-btns .find-result-btn.login:hover {background:#e63554; border-color:#e63554;}
.find-form .find-result-btns .find-result-btn.pw {border-color:#ddd; color:#444;}
.find-form .find-result-btns .find-result-btn.pw:hover {border-color:#ff4363; color:#ff4363;}
/* 확인 카드 (reset-confirm) */
.reset-card {padding:32px 30px 28px; background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,0.04);}
.reset-card .reset-card-head {text-align:center; padding-bottom:22px; margin-bottom:22px; border-bottom:1px dashed #eee;}
.reset-card .reset-card-badge {display:inline-block; padding:4px 14px; background:#fff5f6; border:1px solid #ffd5dd; border-radius:30px; font-size:12px; font-weight:600; color:#ff4363; margin-bottom:12px; letter-spacing:-0.3px;}
.reset-card .reset-card-title {font-size:20px; font-weight:700; color:#222; margin-bottom:8px; letter-spacing:-0.5px;}
.reset-card .reset-card-desc {font-size:13px; color:#888; line-height:1.6; letter-spacing:-0.3px;}
.reset-info {margin-bottom:22px;}
.reset-info .reset-info-row {display:flex; align-items:flex-start; padding:14px 16px; background:#fafafa; border-radius:8px; margin-bottom:8px;}
.reset-info .reset-info-row dt {flex:0 0 110px; font-size:13px; font-weight:600; color:#666; padding-top:2px;}
.reset-info .reset-info-row dd {flex:1; min-width:0;}
.reset-info .reset-info-row dd strong {display:block; font-size:16px; font-weight:700; color:#222; letter-spacing:0.5px;}
.reset-info .reset-info-row dd .reset-info-mask {display:block; margin-top:4px; font-size:12px; color:#999;}
.reset-info .reset-info-row dd .reset-info-method {display:inline-block; padding:3px 10px; background:#fff; border:1px solid #e2e2e2; border-radius:20px; font-size:12px; color:#555;}
.reset-notice {padding:18px 20px; background:#fff5f6; border:1px solid #ffd5dd; border-radius:8px; margin-bottom:20px;}
.reset-notice h4 {font-size:13px; font-weight:700; color:#ff4363; margin-bottom:10px;}
.reset-notice ul li {position:relative; padding:4px 0 4px 14px; font-size:12px; color:#555; line-height:1.7;}
.reset-notice ul li:before {content:""; position:absolute; left:0; top:14px; width:4px; height:4px; background:#ff4363; border-radius:50%;}
.reset-notice ul li strong {color:#ff4363; font-weight:700;}
.reset-agree {display:flex; align-items:center; gap:8px; padding:14px 18px; background:#fafafa; border-radius:8px; margin-bottom:22px; font-size:13px; color:#444; cursor:pointer;}
.reset-agree input[type="checkbox"] {appearance:none; -webkit-appearance:none; width:20px; height:20px; border:1.5px solid #d0d0d0; border-radius:5px; background:#fff; cursor:pointer; position:relative; flex-shrink:0; margin:0; transition:all 0.15s;}
.reset-agree input[type="checkbox"]:checked {background:#ff4363; border-color:#ff4363;}
.reset-agree input[type="checkbox"]:checked:before {content:""; position:absolute; left:50%; top:48%; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%, -55%) rotate(45deg);}
/* 메일 폼 (reset-sent) */
.mail-frame {background:#fff; border:1px solid #e2e2e2; border-radius:14px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.05); max-width:620px; margin:0 auto;}
.mail-frame .mail-header {padding:20px 24px 18px; background:#fafafa; border-bottom:1px solid #eee;}
.mail-frame .mail-from {display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.mail-frame .mail-avatar {flex-shrink:0; width:42px; height:42px; border-radius:50%; background:#ff4363; color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700;}
.mail-frame .mail-from-info {flex:1; min-width:0;}
.mail-frame .mail-from-info strong {display:block; font-size:14px; font-weight:700; color:#222; letter-spacing:-0.3px;}
.mail-frame .mail-from-info strong em {font-style:normal; font-weight:400; color:#888; font-size:12px; margin-left:4px;}
.mail-frame .mail-from-info .mail-to {display:block; margin-top:3px; font-size:12px; color:#888;}
.mail-frame .mail-from-info .mail-to b {font-weight:600; color:#444; margin-left:2px;}
.mail-frame .mail-date {flex-shrink:0; font-size:12px; color:#999;}
.mail-frame .mail-subject {font-size:17px; font-weight:700; color:#222; line-height:1.5; letter-spacing:-0.5px;}
.mail-frame .mail-subject .mail-tag {color:#ff4363; margin-right:4px;}
.mail-frame .mail-body {padding:28px 28px 24px; font-size:14px; line-height:1.75; color:#333;}
.mail-frame .mail-body .mail-greeting {margin-bottom:10px; font-size:15px;}
.mail-frame .mail-body .mail-greeting b {color:#ff4363;}
.mail-frame .mail-body > p {margin-bottom:18px;}
.mail-pw-box {margin:22px 0 26px; padding:22px 22px 18px; background:#fff5f6; border:1px solid #ffd5dd; border-radius:10px; text-align:center;}
.mail-pw-box .mail-pw-label {display:block; font-size:13px; font-weight:600; color:#ff4363; margin-bottom:10px; letter-spacing:0.5px;}
.mail-pw-box .mail-pw-value {display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px;}
.mail-pw-box .mail-pw-code {display:inline-block; padding:10px 18px; background:#fff; border:1px dashed #ff4363; border-radius:6px; font-family:'Consolas','Courier New',monospace; font-size:20px; font-weight:700; color:#ff4363; letter-spacing:2px; word-break:break-all;}
.mail-pw-box .mail-pw-copy {height:44px; padding:0 16px; background:#ff4363; color:#fff; border:0; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:background 0.2s;}
.mail-pw-box .mail-pw-copy:hover {background:#e63554;}
.mail-pw-box .mail-pw-copy.is-copied {background:#5cb85c;}
.mail-pw-box .mail-pw-expire {font-size:12px; color:#888;}
.mail-pw-box .mail-pw-expire strong {color:#444; font-weight:700;}
.mail-frame .mail-h4 {font-size:14px; font-weight:700; color:#222; margin:22px 0 10px;}
.mail-frame .mail-list {counter-reset:n; padding-left:0;}
.mail-frame .mail-list li {position:relative; padding:3px 0 3px 26px; font-size:13px; color:#555; line-height:1.7;}
.mail-frame .mail-list li:before {counter-increment:n; content:counter(n); position:absolute; left:0; top:5px; width:18px; height:18px; line-height:18px; text-align:center; background:#ff4363; color:#fff; border-radius:50%; font-size:11px; font-weight:700;}
.mail-btn-row {display:flex; gap:10px; margin:24px 0 22px;}
.mail-btn-row .mail-btn {flex:1; min-width:0; height:50px; padding:0 18px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:-0.3px; display:inline-flex; align-items:center; justify-content:center; border:1px solid; transition:all 0.2s; background:#fff;}
.mail-btn-row .mail-btn.primary {background:#ff4363; border-color:#ff4363; color:#fff;}
.mail-btn-row .mail-btn.primary:hover {background:#e63554; border-color:#e63554;}
.mail-btn-row .mail-btn.ghost {border-color:#ddd; color:#555;}
.mail-btn-row .mail-btn.ghost:hover {border-color:#ff4363; color:#ff4363;}
.mail-warning {padding:14px 16px; background:#fff8f0; border-left:3px solid #f0a020; border-radius:4px;}
.mail-warning strong {display:block; font-size:13px; font-weight:700; color:#c47a00; margin-bottom:4px;}
.mail-warning p {font-size:12px; color:#7a5a20; line-height:1.6;}
.mail-frame .mail-footer {padding:14px 24px 18px; background:#fafafa; border-top:1px solid #eee; text-align:center;}
.mail-frame .mail-footer p {font-size:12px; color:#999; line-height:1.7;}
.mail-frame .mail-footer a {color:#ff4363; text-decoration:underline;}
.mail-frame .mail-footer .mail-copy {margin-top:2px; font-size:11px; color:#bbb;}
.mail-resend {margin-top:20px; text-align:center; font-size:13px; color:#666;}
.mail-resend a {color:#ff4363; font-weight:600; text-decoration:underline;}
.mail-resend a:hover {color:#e63554;}
@media (max-width:767px){
.find-wrap {padding:20px 0 40px;}
.find-wrap .find-head {margin-bottom:20px; padding-bottom:18px;}
.find-wrap .find-head .find-title {font-size:22px;}
.find-wrap .find-head .find-desc {font-size:13px;}
.find-steps {margin-bottom:20px;}
.find-steps li {padding:0 8px 0 30px; font-size:12px;}
.find-steps li:before {width:22px; height:22px; line-height:22px; font-size:12px;}
.find-tabs .find-tab {padding:12px 8px; font-size:14px;}
.find-form {padding:22px 18px 22px; border-radius:0 0 10px 10px;}
.find-form .find-info {font-size:12px; padding:12px 14px;}
.find-form .find-field {margin-bottom:14px;}
.find-form .find-field label {font-size:13px;}
.find-form .find-field input[type="text"],
.find-form .find-field input[type="tel"],
.find-form .find-field input[type="email"],
.find-form .find-field select {height:44px; font-size:13px;}
.find-form .find-phone {gap:4px;}
.find-form .find-phone select {width:74px;}
.find-form .find-phone .find-dash {display:none;}
.find-form .find-phone .find-field-btn {height:44px; padding:0 12px; font-size:12px;}
.find-form .find-email {gap:6px;}
.find-form .find-email .find-email-id, .find-form .find-email .find-email-domain {flex:1 1 calc(50% - 14px);}
.find-form .find-notice {padding:12px 14px;}
.find-form .find-notice ul li {font-size:11px;}
.find-form .find-btns .find-btn, .reset-card .find-btns .find-btn {height:48px; font-size:14px;}
.find-form .find-result-box .find-result-id {font-size:20px;}
.find-form .find-result-btns .find-result-btn {height:46px; font-size:13px;}
.reset-card {padding:22px 18px;}
.reset-card .reset-card-title {font-size:17px;}
.reset-card .reset-card-desc {font-size:12px;}
.reset-info .reset-info-row {padding:12px 14px;}
.reset-info .reset-info-row dt {flex:0 0 88px; font-size:12px;}
.reset-info .reset-info-row dd strong {font-size:14px;}
.reset-notice {padding:14px 16px;}
.reset-notice ul li {font-size:11px;}
.reset-agree {font-size:12px; padding:12px 14px;}
.mail-frame {border-radius:10px;}
.mail-frame .mail-header {padding:16px 18px 14px;}
.mail-frame .mail-avatar {width:36px; height:36px; font-size:15px;}
.mail-frame .mail-from-info strong {font-size:13px;}
.mail-frame .mail-from-info strong em {display:block; margin-left:0;}
.mail-frame .mail-subject {font-size:15px;}
.mail-frame .mail-body {padding:20px 18px 18px; font-size:13px;}
.mail-pw-box {padding:18px 14px 14px;}
.mail-pw-box .mail-pw-value {flex-direction:column; gap:10px;}
.mail-pw-box .mail-pw-code {font-size:17px; padding:9px 14px; width:100%; box-sizing:border-box;}
.mail-pw-box .mail-pw-copy {width:100%; height:40px;}
.mail-frame .mail-list li {font-size:12px;}
.mail-btn-row {flex-direction:column;}
.mail-btn-row .mail-btn {height:46px;}
.mail-frame .mail-footer {padding:12px 18px;}
}
/* ===========================================================
* board page head (목록/상세/글쓰기 상단 타이틀)
* =========================================================== */
.board-page-head{text-align:center; padding:20px 0 22px; margin-bottom:18px;}
.board-page-head .board-page-title{font-size:28px; font-weight:800; color:#222; letter-spacing:-1px; margin-bottom:6px; display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.board-page-head .board-page-desc{font-size:14px; color:#888; letter-spacing:-0.3px;}
@media (max-width:767px){
.board-page-head{padding:14px 0 16px; margin-bottom:14px;}
.board-page-head .board-page-title{font-size:22px;}
.board-page-head .board-page-desc{font-size:13px;}
}
/* tpl-item 을 태그로 쓸 경우 grid 유지 */
a.tpl-item{color:inherit; text-decoration:none;}
/* ===========================================================
* view page (게시글 상세)
* =========================================================== */
.view-wrap{max-width:980px; margin:0 auto; padding:0 0 60px;}
.view-paper{background:#fff; border-top:2px solid #e61f19; border-bottom:1px solid #e6e6e5;}
.view-header{padding:24px 24px 20px; border-bottom:1px solid #eee;}
.view-header .view-category{margin-bottom:12px;}
.view-header .view-title{font-size:22px; font-weight:700; color:#222; line-height:1.4; letter-spacing:-0.5px; margin-bottom:14px;}
.view-header .view-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; color:#888;}
.view-header .view-meta .view-meta-author{color:#333; font-weight:600;}
.view-header .view-meta .view-meta-divider{color:#ddd;}
.view-header .view-meta .view-meta-stats{display:inline-flex; gap:12px; margin-left:auto;}
.view-header .view-meta .view-meta-stats .stat-item{display:inline-flex; align-items:center; gap:4px; color:#888;}
.view-header .view-meta .view-meta-stats .stat-item .ic{display:inline-block; width:14px; height:14px; position:relative;}
.view-header .view-meta .view-meta-stats .ic-view{border:1.5px solid #aaa; border-radius:50% 10% 50% 10%; transform:rotate(45deg); width:13px; height:8px;}
.view-header .view-meta .view-meta-stats .ic-view:after{content:""; position:absolute; left:50%; top:50%; width:3px; height:3px; background:#aaa; border-radius:50%; transform:translate(-50%,-50%);}
.view-header .view-meta .view-meta-stats .ic-like{width:14px; height:13px; background:#aaa; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;}
.view-header .view-meta .view-meta-stats .ic-cmt{width:14px; height:13px; background:#aaa; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;}
.view-body{padding:30px 24px 36px; min-height:240px; font-size:15px; line-height:1.85; color:#333; word-break:break-word;}
.view-body p{margin-bottom:16px;}
.view-body img{max-width:100%; height:auto; display:block; margin:18px auto;}
.view-attached{padding:14px 24px; background:#fafafa; border-top:1px solid #eee; display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;}
.view-attached .attached-label{flex-shrink:0; display:inline-block; font-size:13px; font-weight:600; color:#666; padding-top:7px;}
.view-attached ul{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px;}
.view-attached ul li{max-width:100%; min-width:0;}
.view-attached ul li a{display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 12px; background:#fff; border:1px solid #e0e0e0; border-radius:18px; font-size:13px; color:#555; transition:all 0.15s; min-width:0;}
.view-attached ul li a:before{flex-shrink:0;}
.view-attached ul li a .file-name{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0;}
.view-attached ul li a .file-size{flex-shrink:0; color:#999; font-size:12px;}
.view-attached ul li a:before{content:""; display:inline-block; width:10px; height:13px; background:#888; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;}
.view-attached ul li a:hover{border-color:#ff4363; color:#ff4363;}
.view-attached ul li a:hover:before{background:#ff4363;}
.view-react{display:flex; align-items:center; justify-content:center; gap:10px; padding:26px 0; background:#fff;}
.view-react .react-btn{min-width:108px; height:46px; padding:0 22px; background:#fff; border:1.5px solid #ff4363; color:#ff4363; border-radius:26px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:all 0.15s;}
.view-react .react-btn:hover{background:#ff4363; color:#fff;}
.view-react .react-btn.on{background:#ff4363; color:#fff;}
.view-react .react-btn:before{content:""; display:inline-block; width:16px; height:14px; background:#ff4363; transition:background 0.15s;}
.view-react .react-btn:hover:before, .view-react .react-btn.on:before{background:#fff;}
.view-react .react-btn.like:before{-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;}
.view-react .react-btn.scrap:before{width:14px; height:16px; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;}
.view-nav{margin-top:24px; border-top:1px solid #eee; border-bottom:1px solid #eee;}
.view-nav .view-nav-item{display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid #f4f4f4; font-size:14px; color:#444; transition:background 0.15s;}
.view-nav .view-nav-item:last-child{border-bottom:0;}
.view-nav .view-nav-item:hover{background:#fafafa;}
.view-nav .view-nav-item .nav-label{flex-shrink:0; width:60px; color:#888; font-weight:600; font-size:13px;}
.view-nav .view-nav-item .nav-title{flex:1; min-width:0; color:#444; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.view-nav .view-nav-item:hover .nav-title{color:#ff4363; text-decoration:underline;}
/* comments */
.view-comment{margin-top:36px;}
.view-comment .comment-head{display:flex; align-items:center; font-size:18px; font-weight:700; color:#222; padding-bottom:14px; border-bottom:2px solid #ff4363;}
.view-comment .comment-head strong{color:#ff4363; margin-left:4px;}
.view-comment .comment-list li{padding:18px 4px; border-bottom:1px solid #eee;}
.view-comment .comment-list .cmt-info{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13px;}
.view-comment .comment-list .cmt-name{font-weight:600; color:#333;}
.view-comment .comment-list .cmt-date{color:#aaa; font-size:12px;}
.view-comment .comment-list .cmt-text{font-size:14px; line-height:1.6; color:#333; word-break:break-word;}
.view-comment .comment-list .cmt-actions{display:flex; gap:10px; margin-top:8px; font-size:12px;}
.view-comment .comment-list .cmt-actions a{display:inline-flex; align-items:center; gap:4px; color:#888; transition:color 0.15s;}
.view-comment .comment-list .cmt-actions a:hover{color:#ff4363; text-decoration:underline;}
.view-comment .comment-list .cmt-actions a.like:before{content:""; display:inline-block; width:12px; height:11px; background:#aaa; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; transition:background 0.15s;}
.view-comment .comment-list .cmt-actions a.like:hover:before{background:#ff4363;}
.view-comment .comment-list .cmt-actions a.like.is-on{color:#ff4363; font-weight:600; text-decoration:none;}
.view-comment .comment-list .cmt-actions a.like.is-on:before{background:#ff4363;}
.view-comment .comment-list .cmt-actions a.edit{margin-left:auto;}
.view-comment .comment-list .cmt-actions a.edit:before{content:""; display:inline-block; width:11px; height:11px; background:#aaa; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; transition:background 0.15s;}
.view-comment .comment-list .cmt-actions a.edit:hover:before{background:#ff4363;}
.view-comment .comment-list .cmt-actions a.delete:before{content:""; display:inline-block; width:10px; height:12px; background:#aaa; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; transition:background 0.15s;}
.view-comment .comment-list .cmt-actions a.delete:hover:before{background:#ff4363;}
.view-comment .comment-empty{padding:36px 10px; text-align:center; color:#999; font-size:14px;}
.view-comment .comment-form{margin-top:24px; padding:18px; background:#fafafa; border-radius:10px;}
.view-comment .comment-form textarea{width:100%; min-height:90px; padding:12px 14px; border:1px solid #e2e2e2; border-radius:8px; font-size:14px; line-height:1.6; font-family:inherit; resize:vertical; background:#fff; outline:none;}
.view-comment .comment-form textarea:focus{border-color:#ff4363;}
.view-comment .comment-form .comment-btn-row{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.view-comment .comment-form .comment-byte{font-size:12px; color:#999;}
.view-comment .comment-form .comment-submit{height:40px; padding:0 24px; background:#ff4363; color:#fff; border:0; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; transition:background 0.15s;}
.view-comment .comment-form .comment-submit:hover{background:#e63554;}
/* 대댓글 */
.view-comment .comment-list .reply-list{margin-top:12px; padding-left:24px; border-left:2px solid #f1f1f1;}
.view-comment .comment-list .reply-list:empty{display:none;}
.view-comment .comment-list .reply-list .reply-item{position:relative; padding:14px 4px 14px 22px; border-bottom:1px solid #f3f3f3;}
.view-comment .comment-list .reply-list .reply-item:last-child{border-bottom:0;}
.view-comment .comment-list .reply-list .reply-item:before{content:""; position:absolute; left:0; top:22px; width:14px; height:10px; border-left:2px solid #d8d8d8; border-bottom:2px solid #d8d8d8; border-bottom-left-radius:6px;}
.view-comment .comment-list .reply-list .reply-item .cmt-info{margin-bottom:6px;}
.view-comment .comment-list .reply-list .reply-item .cmt-text{font-size:13px;}
.view-comment .comment-list .reply-list .reply-item .reply-to{display:inline-block; margin-right:4px; color:#ff4363; font-weight:600;}
.view-comment .reply-form{margin-top:14px; padding:14px; background:#fafafa; border-radius:8px;}
.view-comment .reply-form textarea{width:100%; min-height:70px; padding:10px 12px; border:1px solid #e2e2e2; border-radius:6px; font-size:13px; line-height:1.6; font-family:inherit; resize:vertical; background:#fff; outline:none;}
.view-comment .reply-form textarea:focus{border-color:#ff4363;}
.view-comment .reply-form .reply-btn-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px;}
.view-comment .reply-form .reply-byte{font-size:12px; color:#999;}
.view-comment .reply-form .reply-btn-group{display:flex; gap:6px;}
.view-comment .reply-form .reply-cancel,
.view-comment .reply-form .reply-submit{height:34px; padding:0 16px; border-radius:5px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid; transition:all 0.15s;}
.view-comment .reply-form .reply-cancel{background:#fff; border-color:#ccc; color:#666;}
.view-comment .reply-form .reply-cancel:hover{background:#f1f1f1;}
.view-comment .reply-form .reply-submit{background:#ff4363; border-color:#ff4363; color:#fff;}
.view-comment .reply-form .reply-submit:hover{background:#e63554; border-color:#e63554;}
.view-comment .comment-list .cmt-edit-form{margin-top:6px;}
.view-comment .comment-list .cmt-edit-form textarea{width:100%; min-height:70px; padding:10px 12px; border:1px solid #e2e2e2; border-radius:6px; font-size:13px; line-height:1.6; font-family:inherit; resize:vertical; background:#fff; outline:none;}
.view-comment .comment-list .cmt-edit-form textarea:focus{border-color:#ff4363;}
.view-comment .comment-list .cmt-edit-form .cmt-edit-btn-row{display:flex; justify-content:flex-end; gap:6px; margin-top:6px;}
.view-comment .comment-list .cmt-edit-form .cmt-edit-cancel,
.view-comment .comment-list .cmt-edit-form .cmt-edit-save{height:32px; padding:0 14px; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid; transition:all 0.15s;}
.view-comment .comment-list .cmt-edit-form .cmt-edit-cancel{background:#fff; border-color:#ccc; color:#666;}
.view-comment .comment-list .cmt-edit-form .cmt-edit-cancel:hover{background:#f1f1f1;}
.view-comment .comment-list .cmt-edit-form .cmt-edit-save{background:#ff4363; border-color:#ff4363; color:#fff;}
.view-comment .comment-list .cmt-edit-form .cmt-edit-save:hover{background:#e63554; border-color:#e63554;}
/* view bottom actions */
.view-actions{display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:10px; flex-wrap:wrap;}
.view-actions .view-action-left, .view-actions .view-action-right{display:flex; gap:8px;}
.view-actions .view-action-btn{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px; font-size:14px; font-weight:600; border-radius:6px; cursor:pointer; border:1px solid; transition:all 0.15s; background:#fff;}
.view-actions .view-action-btn.list{border-color:#aaa; color:#444;}
.view-actions .view-action-btn.list:hover{background:#f5f5f5;}
.view-actions .view-action-btn.edit{border-color:#ff4363; color:#ff4363;}
.view-actions .view-action-btn.edit:hover{background:#ff4363; color:#fff;}
.view-actions .view-action-btn.delete{border-color:#888; color:#666;}
.view-actions .view-action-btn.delete:hover{background:#666; color:#fff; border-color:#666;}
.view-actions .view-action-btn.write{background:#ff4363; border-color:#ff4363; color:#fff;}
.view-actions .view-action-btn.write:hover{background:#e63554; border-color:#e63554;}
@media (max-width:767px){
.view-header{padding:18px 14px;}
.view-header .view-title{font-size:18px;}
.view-header .view-meta{font-size:12px; gap:8px;}
.view-header .view-meta .view-meta-stats{margin-left:0; width:100%; padding-top:6px; border-top:1px dashed #eee;}
.view-body{padding:22px 14px 28px; font-size:14px;}
.view-attached{padding:12px 14px; gap:8px;}
.view-attached ul li{width:100%;}
.view-attached ul li a{width:100%; display:flex;}
.view-react{padding:20px 0;}
.view-react .react-btn{min-width:96px; height:42px; font-size:13px;}
.view-nav .view-nav-item{padding:11px 14px; font-size:13px; gap:8px;}
.view-nav .view-nav-item .nav-label{width:50px; font-size:12px;}
.view-comment{margin-top:28px;}
.view-comment .comment-head{font-size:16px;}
.view-comment .comment-list li{padding:14px 4px;}
.view-comment .comment-list .cmt-text{font-size:13px;}
.view-comment .comment-form{padding:14px;}
.view-comment .comment-form textarea{font-size:13px; min-height:80px;}
.view-comment .comment-form .comment-submit{height:38px; padding:0 18px; font-size:13px;}
.view-comment .comment-list .reply-list{padding-left:10px;}
.view-comment .comment-list .reply-list .reply-item{padding:12px 2px 12px 14px;}
.view-comment .comment-list .reply-list .reply-item:before{width:10px; left:0;}
.view-comment .comment-list .reply-list .reply-item .cmt-text{font-size:12px;}
.view-comment .reply-form{padding:12px;}
.view-comment .reply-form textarea{font-size:12px; min-height:60px;}
.view-comment .reply-form .reply-cancel,
.view-comment .reply-form .reply-submit{height:32px; padding:0 12px; font-size:12px;}
.view-actions{flex-direction:column-reverse; align-items:stretch;}
.view-actions .view-action-left, .view-actions .view-action-right{width:100%; justify-content:center;}
.view-actions .view-action-btn{flex:1; min-width:0; padding:0 12px; height:42px; font-size:13px;}
}
/* ===========================================================
* write page (글쓰기)
* =========================================================== */
.write-wrap{max-width:980px; margin:0 auto; padding:0 0 60px;}
.write-form{background:#fff; border-top:2px solid #e61f19; border-bottom:1px solid #e6e6e5;}
.write-form .write-field{display:flex; align-items:stretch; border-bottom:1px solid #eee;}
.write-form .write-field:last-of-type{border-bottom:0;}
.write-form .write-field > label{flex-shrink:0; width:140px; padding:16px 18px; background:#fafafa; font-size:14px; font-weight:600; color:#333; display:flex; align-items:center; letter-spacing:-0.3px;}
.write-form .write-field > label .required-mark{color:#ff4363; font-style:normal; margin-left:2px;}
.write-form .write-field .write-input{flex:1; min-width:0; padding:14px 18px; display:flex; align-items:center; gap:8px;}
.write-form .write-field .write-input input[type="text"], .write-form .write-field .write-input select{width:100%; height:44px; padding:0 14px; border:1px solid #e2e2e2; border-radius:6px; font-size:14px; background:#fff; outline:none; transition:border-color 0.15s; font-family:inherit;}
.write-form .write-field .write-input input[type="text"]:focus, .write-form .write-field .write-input select:focus{border-color:#ff4363;}
.write-form .write-field .write-input input::placeholder{color:#bbb;}
.write-form .write-field .write-input select{cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; background-size:10px; padding-right:36px;}
/* file attach */
.write-form .write-field .write-file{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0;}
.write-form .write-field .write-file .write-file-row{display:flex; gap:8px; align-items:center;}
.write-form .write-field .write-file .write-file-name{flex:1; min-width:0; height:44px; padding:0 14px; border:1px solid #e2e2e2; border-radius:6px; background:#fafafa; display:flex; align-items:center; font-size:13px; color:#888; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.write-form .write-field .write-file .write-file-btn{flex-shrink:0; height:44px; padding:0 18px; background:#fff; border:1px solid #ff4363; color:#ff4363; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all 0.15s; margin:0;}
.write-form .write-field .write-file .write-file-btn:hover{background:#ff4363; color:#fff;}
.write-form .write-field .write-file input[type="file"]{display:none;}
.write-form .write-field .write-file .write-file-help{font-size:12px; color:#999;}
.write-form .write-field .write-file .write-file-list{display:flex; flex-direction:column; gap:4px;}
.write-form .write-field .write-file .write-file-item{display:flex; align-items:center; gap:6px; font-size:13px; color:#555;}
.write-form .write-field .write-file .write-file-item .write-file-remove{margin-left:auto; padding:2px 6px; background:none; border:0; color:#aaa; font-size:13px; cursor:pointer;}
.write-form .write-field .write-file .write-file-item .write-file-remove:hover{color:#ff4363;}
/* body editor */
.write-form .write-field.write-body{flex-direction:column;}
.write-form .write-field.write-body > label{width:auto; padding:14px 18px; border-bottom:1px solid #eee; background:#fafafa;}
.write-form .write-field.write-body .write-input{flex-direction:column; padding:0; gap:0; align-items:stretch;}
.write-form .write-toolbar{display:flex; gap:6px; padding:8px 14px; background:#fafafa; border-bottom:1px solid #eee; flex-wrap:wrap;}
.write-form .write-toolbar button{min-width:32px; height:32px; padding:0 10px; background:#fff; border:1px solid #e2e2e2; border-radius:4px; font-size:12px; cursor:pointer; color:#555; transition:all 0.15s; font-weight:600;}
.write-form .write-toolbar button:hover{background:#ff4363; color:#fff; border-color:#ff4363;}
.write-form .write-field.write-body textarea{width:100%; min-height:380px; padding:20px; border:0; outline:none; font-size:15px; line-height:1.75; font-family:inherit; resize:vertical; box-sizing:border-box; background:#fff;}
.write-help{margin-top:14px; padding:14px 18px; background:#fff5f6; border-left:3px solid #ff4363; border-radius:4px;}
.write-help h4{font-size:13px; font-weight:700; color:#ff4363; margin-bottom:6px;}
.write-help ul li{position:relative; padding:2px 0 2px 10px; font-size:12px; color:#666; line-height:1.6;}
.write-help ul li:before{content:""; position:absolute; left:0; top:11px; width:3px; height:3px; background:#ff4363; border-radius:50%;}
/* write bottom buttons */
.write-btns{display:flex; gap:10px; justify-content:center; margin-top:30px;}
.write-btns .write-btn{min-width:140px; height:52px; padding:0 30px; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; border:1px solid; display:inline-flex; align-items:center; justify-content:center; transition:all 0.15s;}
.write-btns .write-btn.cancel{background:#fff; border-color:#ddd; color:#666;}
.write-btns .write-btn.cancel:hover{border-color:#999; color:#222;}
.write-btns .write-btn.submit{background:#ff4363; border-color:#ff4363; color:#fff;}
.write-btns .write-btn.submit:hover{background:#e63554; border-color:#e63554;}
@media (max-width:767px){
.write-form .write-field{flex-direction:column;}
.write-form .write-field > label{width:auto; padding:10px 14px; border-bottom:1px solid #eee;}
.write-form .write-field .write-input{padding:12px 14px 14px;}
.write-form .write-field.write-body > label{padding:10px 14px;}
.write-form .write-field.write-body textarea{min-height:300px; padding:16px 14px; font-size:14px;}
.write-form .write-field .write-input input[type="text"], .write-form .write-field .write-input select{height:42px; font-size:13px;}
.write-form .write-field .write-file .write-file-name{height:42px; font-size:12px;}
.write-form .write-field .write-file .write-file-btn{height:42px; padding:0 12px; font-size:12px;}
.write-form .write-toolbar{padding:6px 10px;}
.write-form .write-toolbar button{min-width:28px; height:28px; font-size:11px;}
.write-btns{margin-top:24px;}
.write-btns .write-btn{min-width:0; flex:1; height:48px; font-size:14px; padding:0 16px;}
}