@charset "utf-8";

/* layout */

* {  margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%;}
body { min-height: 100vh;}
.wrapper {}

/* header */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); padding: 0 5rem; background: var(--color-primary); color: #fff;}
.header__logo { display: flex; align-items: center; gap: 1.2rem;}
.header__logo-link { display: flex; align-items: center;}
.header__logo-link img { display: block; width: 16rem; height: 4.2rem; object-fit: contain;}
.header__logo-text { color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1;}

/* header actions */
.header__actions { display: flex; align-items: center; gap: 2.4rem;}

/* user */
.header__user {	display: flex; align-items: center;	gap: 0.4rem; text-decoration: none; color: inherit; /*cursor: pointer;*/}
.header__user {	transition: opacity 0.2s;}
/*.header__user:hover { opacity: 0.7;}*/
.header__user-icon { width: 2.4rem; height: 2.4rem; object-fit: contain;}
.header__user-name { color: #fff; font-size: 1.6rem; font-weight: 400;}

/* logout */
.header__logout { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; transition: opacity 0.2s; cursor: pointer;}
.header__logout:hover {	opacity: 0.7;}
.header__logout img { width: 2rem; height: 2rem; object-fit: contain;}

/* sidebar */
.sidebar { position: fixed; top: var(--header-height); left: 0; bottom: 0; overflow-y: auto; width: var(--sidebar-width); border-right: 1px solid var(--color-border); background: #fff; padding-top:2rem;}
.sidebar__group { border-bottom: 1px solid var(--color-border);}
.sidebar__title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.6rem 2rem; line-height: 1; text-align: left;font-size: 1.8rem; font-weight: 600;}
.sidebar__group { border-bottom: 1px solid var(--color-border);}
.sidebar__group.is-open { background: var(--color-bg-subtle);}
.sidebar__group.is-open .sidebar__title { background: var(--color-bg-subtle);}
.sidebar__group.is-open .sidebar__menu { background: var(--color-bg-subtle);}
.sidebar__arrow { width: 2.4rem; height: 2.4rem; object-fit: contain; flex-shrink: 0;}
.sidebar__menu { padding: 0.4rem 0;}
.sidebar__menu a { display: block;  padding: 1.2rem 3rem; font-size: var(--font-size-lg); line-height: 1;}
.sidebar__group:not(.is-open) .sidebar__menu { display: none;}
.sidebar__menu a.is-active { color: var(--color-primary); font-weight: 700;}

/* content */
.content { display: flex; flex-direction: column; min-height: 100vh; margin-left: var(--sidebar-width); padding: calc(var(--header-height) + 4rem) 4rem 6rem;}
.content__inner { flex: 1;}
.footer { margin-top: 6rem; padding-top: 1.6rem; color: #999; font-size: 1.3rem;}

/* page */
.page-header { padding-bottom: 1.2rem; border-bottom: 1px solid var(--color-border-dark);}
.page-title { font-size: 4rem; line-height: 1; font-weight: 700;}

/* search */
.search-section { margin-top: 6rem; padding: 2rem; background: var(--color-bg-subtle); border-radius: var(--radius-sm);}
.search-box { display: flex; align-items: center; justify-content: center; gap: 1.2rem;}

/* =========================
   custom select
========================= */

.form-select-wrap { position: relative; width: 18rem; height: var(--form-height); background: #fff; border: 1px solid var(--form-border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s ease;}
.form-select-wrap:focus-within { border-color: var(--form-border-dark);}
.form-select-wrap:focus-within::after { background: var(--form-border-dark);}
.form-select-wrap::before { content: ''; position: absolute; top: 0; right: 0; width: 4.8rem; height: 100%; background: var(--color-bg-subtle); pointer-events: none;}
.form-select-wrap:focus-within::before { background: #efefef;}
.form-select {  width: 100%;  height: 100%; padding: 0 6rem 0 2rem;  border: 0; background: transparent; font-size: var(--font-size-md); font-weight: 400; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;}
.form-select-wrap::after { content: ''; position: absolute; top: 0; right: 4.8rem; width: 1px; height: 100%; background: var(--form-border); transition: background-color 0.2s ease;}
.form-select-wrap:focus-within::after { background: var(--form-border);}
.form-select-arrow {  position: absolute; top: 50%; right: 1.4rem; width: 2rem; height: 2rem; transform: translateY(-50%); transition: transform 0.2s ease; pointer-events: none;}
.form-select-wrap.is-open .form-select-arrow { transform: translateY(-50%) rotate(180deg);}

/* board */
.board-section { margin-top: 2.4rem;}
.board-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
.board-count { font-size: 1.6rem;}
.board-count strong { color: var(--color-primary); font-weight: 700;}

.board-table { width: 100%;}
.board-table th { height: 5rem; border-top: 1px solid var(--color-border-dark); border-bottom: 1px solid var(--color-border); background: var(--color-bg-subtle); font-size: 1.6rem; font-weight: 600;}
.board-table td { padding: 1.6rem 1.2rem; border-bottom: 1px solid var(--color-border); text-align: center; font-size: 1.6rem; }
.board-title { display: flex; align-items: center; gap: 0.8rem;}
.board-link { display: inline-flex; align-items: center; gap: 0.8rem; min-width: 0; color: inherit;}
.board-link-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.board-link:hover .board-link-text { text-decoration: underline;}
.board-link-icon { width: 1.6rem; height: 1.6rem; flex-shrink: 0;  object-fit: contain;}

/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 4rem;}
.page-number { width: 3.2rem; height: 3.2rem; border: 1px solid transparent; border-radius: 0.4rem; font-size: 1.6rem; color: #888888;}
.page-number.is-active { color: var(--color-primary); font-weight: 700;}
.page-number:hover { text-decoration: underline;}
.page-arrow { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; transition: border-color 0.2s,  background-color 0.2s;}
.page-arrow:hover { background: #f7f7f7;}
.page-arrow img { width: 1.6rem; height: 1.6rem; object-fit: contain;}

/* next */
.page-arrow-next img { transform: rotate(180deg);}

/* =========================
   board write
========================= */

.write-section { margin-top: 4rem;}
.write-table { width: 100%; border-top: 1px solid var(--color-border);}
.write-table th { padding: 2.4rem 1.6rem; border-bottom: 1px solid var(--color-border);  vertical-align: top;}
.write-table td { padding: 1.6rem; border-bottom: 1px solid var(--color-border);  vertical-align: top;}
.write-table th { background: var(--color-bg-subtle); color: var(--color-text); font-weight: 600; text-align: left;}
.required { color: var(--color-danger);}
.write-input {  width: 100%;}
.textarea-wrap {  position: relative;}
.write-textarea {  width: 100%;  height: 32rem;  padding: 1.6rem;  border: 1px solid var(--form-border);  border-radius: var(--radius-sm);  background: #fff;  font-size: var(--font-size-md); }
.write-textarea:focus { outline: none;  border-color: var(--form-border-dark);}
.textarea-count {  position: absolute;  right: 1.6rem;  bottom: 1.6rem;  color: #B5B5B5;  font-size: 1.4rem;}
.textarea-count span {  color: #666;}

.file-area {  display: flex;  flex-direction: column;  align-items: flex-start;  gap: 1.2rem;}

/* file button */
.file-button {	display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; height: var(--form-height); min-width: 16.4rem; padding: 0 2rem; border-radius: var(--radius-sm); background: var(--color-secondary);
	color: #fff; font-size: var(--font-size-md); font-weight: 600; cursor: pointer; transition: background-color 0.2s ease;}

.file-button:hover { background: #4A4A4A;}

.file-button img { width: 2rem;	height: 2rem; object-fit: contain; flex-shrink: 0; }

/* file list */
.file-list { display: flex; flex-wrap: wrap; gap: 0.8rem;}

/* file item */
.file-item { display: inline-flex; align-items: center;	gap: 2rem; max-width: 100%; padding: 0.4rem 1.2rem; background: #F4F4F4; border-radius: 0.4rem; transition: background-color 0.2s ease, box-shadow 0.2s ease;}
.file-item:hover { background: #ECECEC;	box-shadow: inset 0 0 0 1px #DDDDDD;}

/* file name */
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm);}

/* delete button */
.file-delete {	display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; transition: background-color 0.2s ease, opacity 0.2s ease;}
.file-delete:hover { background: #DCDCDC;}
.file-delete img { width: 1.6rem; height: 1.6rem; object-fit: contain; opacity: 1;transition: opacity 0.2s ease;}

/* file guide */
.file-guide {display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem;}
.file-guide-bullet { width: 0.2rem;	height: 0.2rem;	border-radius: 50%;	background: #8D8D8D; flex-shrink: 0;}
.file-guide-text { color: #8D8D8D; font-size: var(--font-size-sm);}

/* primary action area */
.page-actions {	display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; margin-top: 4rem;}
.page-actions .btn {min-width: 12rem;}

.btn-outline {	border: 1px solid var(--color-primary);	background: #fff; color: var(--color-primary); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
.btn-outline:hover {background: #E7F4FD;}


/* =========================
   board view
========================= */

.board-view-section {margin-top: 4rem;}

/* top */
.board-view-head {	padding-bottom: 2rem;	border-bottom: 1px solid var(--color-border);}
.board-view-title-wrap {display: flex;	align-items: center; gap: 0.8rem;}
.board-view-title { font-size: 2.4rem;	font-weight: 600;}
.board-view-meta {	display: flex; align-items: center;	gap: 4rem; margin-top: 1.2rem;}
.board-view-meta-item {display: flex; align-items: center; gap: 0.4rem;}
.board-view-meta-label {font-weight: 600;}

/* content */
.board-view-content { padding: 3.2rem 0; border-bottom: 1px solid var(--color-border); word-break: keep-all;}
.board-view-content p { margin: 0;}

/* attachment */
.board-attachment { padding: 3.2rem 0 4rem; border-bottom: 1px solid var(--color-border);}
.board-attachment-title { margin-bottom: 1.2rem; font-weight: 700;}
.board-file-list {	display: flex; flex-wrap: wrap;	gap: 1.2rem;}
.board-file-item {	display: inline-flex; align-items: center;	justify-content: space-between;	gap: 2rem; padding: 1.2rem;	border-radius: 0.4rem; background: #F5F5F5;	transition: background-color 0.2s ease, box-shadow 0.2s ease;}

.board-file-item:hover { background: #ECECEC; box-shadow: inset 0 0 0 1px #DDDDDD;}
.board-file-name {	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;	font-size: var(--font-size-sm);}
.board-file-icon {	width: 1.6rem; height: 1.6rem; object-fit: contain; flex-shrink: 0; }

/* bottom */
.board-view-bottom { display: flex; align-items: center; justify-content: space-between;}
.board-view-actions { display: flex; align-items: center; gap: 1.2rem;}


/* =========================
   gift table
========================= */

.gift-table td { vertical-align: middle;}

/* product */
.gift-product { display: flex; align-items: center; gap: 1.6rem; min-width: 0;}
.gift-product:hover .gift-product-name {text-decoration: underline;}
.gift-product-thumb { display: flex; align-items: center; justify-content: center; width: 10rem; height: 10rem; border: 1px solid rgba(203, 203, 203, 0.5); background: #f4f4f4; overflow: hidden; flex-shrink: 0;}
.gift-product-thumb img { width: 100%; height: 100%; object-fit: cover;}
.gift-product-info { min-width: 0;}
.gift-product-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* status */
.gift-status.is-hidden {color: #888888;}

/* =========================
   gift upload
========================= */

.gift-upload-area {	display: flex; flex-direction: column; gap: 1.2rem;}
.gift-thumb-list { display: flex; flex-wrap: wrap; gap: 1.2rem;}

/* 업로드 완료 썸네일 */
.gift-thumb-item { position: relative; width: 10rem; height: 10rem;	border: 1px solid rgba(203, 203, 203, 0.5); border-radius: var(--radius-sm);	background: #f4f4f4; overflow: hidden; flex-shrink: 0;        }
.gift-thumb-image { width: 100%; height: 100%; object-fit: cover; display: block;}

/* 삭제 버튼 */
.gift-thumb-delete { position: absolute; top: 0.8rem; right: 0.8rem; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;background: rgba(0, 0, 0, 0.5);	transition: background-color 0.2s ease,	opacity 0.2s ease;}
.gift-thumb-delete:hover { background: rgba(0, 0, 0, 0.7);}
.gift-thumb-delete img { width: 2rem; height: 2rem;	object-fit: contain;}

/* 업로드 버튼 */
.gift-thumb-upload { flex-shrink: 0;}
.gift-upload-button { display: flex; align-items: center; justify-content: center; width: 10rem; height: 10rem;	border-radius: var(--radius-sm); background: var(--color-secondary); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease;}
.gift-upload-button:hover {	background: #4A4A4A; border-color: #4A4A4A;}
.gift-upload-button img { width: 2.4rem; height: 2.4rem; object-fit: contain; }

.gift-view-thumbnail { display: flex; justify-content: center; align-items: center; }
.gift-view-image { display: block;	width: 75rem; height: 75rem; max-width: 100%; object-fit: cover;}