/* ==============================
   Base & Tokens
============================== */
:root {--navy: #464e6b; --navy-dark: #003366; --line: #dfdfdf; --line-mid: #ccc; --label-bg: #f5f5f5; --txt: #282828; --txt-sub: #666; --txt-light: #999;}
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
.wrap {max-width: 1400px; margin: 0 auto; background: #fff;}

/* ==============================
   Section Title
============================== */
.sec-title {margin: 40px 0 0; padding: 14px 15px 12px; font-size: 18px; font-weight: 500; color: #141414; background: #f9f9f9; border-bottom: 1px solid #e8e8e8;}
.sec-title:first-child {margin-top: 0;}

/* ==============================
   Table
============================== */
table {width: 100%; border-collapse: collapse;}
th, td {border: 1px solid var(--line); padding: 12px 14px; vertical-align: middle; font-size: 16px; color: var(--txt);}
th {background: var(--label-bg); font-weight: 500; white-space: nowrap;}
th[style] {min-width: 140px;}
td {background: #fff;}

/* ==============================
   List
============================== */
.page_list table {border-bottom: 1px solid var(--line);}
.page_list th, .page_list td {border-left: none; border-right: none; text-align: center; background: none;}
.page_list thead th {padding: 0 14px; line-height: 60px; font-size: 17px; font-weight: 500; color: #222;}
.page_list tbody th, .page_list tbody td {padding: 17px 14px; font-size: 17px; font-weight: 400; color: var(--txt);}
.page_list td.left {text-align: left;}

/* ==============================
   Form Controls
============================== */
input[type=text], input[type=number], select {height: 38px; padding: 0 11px; border: 1px solid var(--line-mid); border-radius: 0; font-size: 16px; font-family: inherit; color: var(--txt); background: #fff; outline: none; -webkit-appearance: none; appearance: none;}
td input[type=text] {width: 100%;}
input[type=text]:focus, input[type=number]:focus, select:focus {border-color: var(--navy);}
select {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23666666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; cursor: pointer;}
input[type=file] {display: none;}
.note, .sub-note {font-size: 13px; color: var(--txt-sub); margin-top: 8px;}
.hint {font-size: 14px; color: var(--txt-sub); margin: 0 5px;}

/* ==============================
   Photo
============================== */
.photo-cell {width: 218px; text-align: center; background: var(--label-bg); padding: 18px !important; vertical-align: middle;}
.photo-box {width: 182px; height: 132px; border: 1px solid var(--line-mid); background: #fff; margin: 0 auto; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;}
.photo-box:hover {border-color: var(--txt-light);}
.photo-box img {width: 100%; height: 100%; object-fit: cover; display: none;}
#photoPlaceholder {font-size: 13px; color: var(--txt-light);}

/* ==============================
   File
============================== */
.file-row {display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.file-label {font-size: 14px; color: var(--txt-light);}
.file-table th {text-align: center; width: 100px; font-size: 14px;}
.file-table td {padding: 8px 14px;}
.thume{margin-top:0}

/* ==============================
   Editor
============================== */
.editor-wrap {border: 1px solid var(--line-mid);}
.editor-wrap:focus-within {border-color: var(--navy);}
.editor-toolbar {background: var(--label-bg); border-bottom: 1px solid var(--line); padding: 5px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; row-gap: 3px;}
.tb-select {height: 26px; padding: 0 20px 0 6px; border: 1px solid var(--line); font-size: 12px; font-family: inherit; color: var(--txt-sub); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666666' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 5px center; width: auto; cursor: pointer; -webkit-appearance: none; appearance: none; outline: none;}
.tb-select:focus {border-color: var(--navy);}
.tb-btn {display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 26px; padding: 0 5px; background: #fff; border: 1px solid var(--line); font-size: 12px; cursor: pointer; color: var(--txt-sub); font-family: inherit; line-height: 1;}
.tb-btn:hover {background: var(--label-bg); border-color: var(--line-mid); color: var(--txt);}
.tb-btn.tb-bold {font-weight: 700;}
.tb-btn.tb-italic {font-style: italic;}
.tb-btn.tb-under {text-decoration: underline;}
.tb-btn.tb-strike {text-decoration: line-through;}
.tb-btn.active {background: var(--navy); border-color: var(--navy); color: #fff;}
.tb-sep {width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex-shrink: 0; align-self: center;}
.tb-color-wrap {position: relative; display: inline-flex;}
.tb-color-inp {position: absolute; width: 28px; height: 28px; top: 0; left: 0; opacity: 0; cursor: pointer; border: none; padding: 0;}
.tb-color-btn {display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 26px; min-width: 26px; padding: 0 4px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 700; cursor: pointer; pointer-events: none; line-height: 1; gap: 2px; color: var(--txt-sub);}
.tb-color-bar {width: 14px; height: 3px; display: block;}
.editor-area {min-height: 120px; padding: 12px 14px; outline: none; font-size: 16px; line-height: 1.75; overflow-y: auto; background: #fff; color: var(--txt);}
.editor-area-lg {min-height: 180px;}
.editor-footer {background: var(--label-bg); border-top: 1px solid var(--line); padding: 4px 10px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--txt-light);}
.editor-footer button {height: 24px; padding: 0 10px; font-size: 12px; background: #fff; border: 1px solid var(--line); cursor: pointer; font-family: inherit; color: var(--txt-sub); margin-left: 4px;}
.editor-footer button:hover {background: var(--label-bg); border-color: var(--line-mid);}
.editor-source {display: none; width: 100%; min-height: 100px; border: none; outline: none; font-size: 12.5px; font-family: Consolas, monospace; padding: 10px 14px; resize: vertical; background: #f9f9f9; color: #333; line-height: 1.6;}

/* ==============================
   Sub Table
============================== */
.sub-table thead th {background: var(--label-bg); color: #222; font-weight: 500; text-align: center; font-size: 16px;}
.sub-table td {text-align: center; padding: 8px 6px; height: 46px;}
.sub-table td.td-content {text-align: left;}
.sub-table textarea {width: 100%; height: 44px; padding: 8px 10px; border: 1px solid var(--line-mid); border-radius: 0; font-size: 16px; font-family: inherit; resize: none; outline: none; color: var(--txt); line-height: 1.5;}
.sub-table textarea:focus {border-color: var(--navy);}
.sub-table input[type=text] {text-align: center;}

/* ==============================
   Buttons
============================== */
.btn-filepick, .btn-add-row, .btn-del-row, .btn-ok, .btn-cancel {display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 25px; border-radius: 0; font-size: 14px; font-family: "Nanum Gothic", "Nanum Barun Gothic", sans-serif; cursor: pointer; white-space: nowrap;}
.btn-del-row, .btn-cancel {background: #fff; color: #333; border: 1px solid var(--line); border-bottom-color: #c4c4c4;}
.btn-del-row:hover, .btn-cancel:hover {background: var(--label-bg);}
.btn-ok, .btn-add-row {background: var(--navy); color: #fff; border: 1px solid var(--navy-dark);}
.btn-ok:hover, .btn-add-row:hover {background: var(--navy-dark);}
.btn-filepick {padding: 0 20px; background: #555; color: #fff; border: 0; font-size: 12.8px; flex-shrink: 0;}
.btn-filepick:hover {background: #333;}
.btn-add-row {gap: 5px; margin-top: 10px;}
.btn-add-row::before {content: '+'; font-size: 16px; font-weight: 300; line-height: 1;}
.btn-del-row {padding: 0 12px; font-size: 13px;}
.btn-area {display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: 10px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line);}