@charset "utf-8";

/* --------------------------------------------------------
게시판 목록 스타일 - UXC RECIPE
* board.css 변수 시스템 사용
----------------------------------------------------------*/
.boardListWrap {position:relative;}

/* Recipe Grid */
[data-board="uxc_recipe"] {display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, auto)); gap:16px; scrollbar-width:none;}

/* Card */
[data-board="uxc_recipe"] .recipeCard {display:flex; flex-direction:column; justify-content:space-between; padding:20px; border-radius:var(--board-radius-lg); background:var(--board-white); border:1px solid var(--board-gray-200); transition:all 0.2s ease; position:relative;}
[data-board="uxc_recipe"] .recipeCard:hover {border-color:var(--board-gray-300); box-shadow:0 2px 8px rgba(0,0,0,0.06);}
[data-board="uxc_recipe"] .recipeCard a {display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; height:100%;}

/* Tags */
[data-board="uxc_recipe"] .recipeTags {display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
[data-board="uxc_recipe"] .recipeTags .tagDifficulty {padding:3px 10px; border-radius:4px; font-size:12px; font-weight:600; color:#fff;}
[data-board="uxc_recipe"] .recipeTags .tagDifficulty.beginner {background:#3b82f6;}
[data-board="uxc_recipe"] .recipeTags .tagDifficulty.intermediate {background:#f59e0b;}
[data-board="uxc_recipe"] .recipeTags .tagDifficulty.advanced {background:#ef4444;}
[data-board="uxc_recipe"] .recipeTags .tagLang,
[data-board="uxc_recipe"] .recipeTags .tagFramework {padding:3px 8px; border-radius:4px; font-size:11px; font-weight:500; color:var(--board-gray-600); background:var(--board-gray-100);}

/* Title */
[data-board="uxc_recipe"] .recipeTitle {font-size:16px; font-weight:700; color:var(--board-gray-900); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:4px 0;}
[data-board="uxc_recipe"] .recipeCard:hover .recipeTitle {color:var(--color-prime);}

/* Title badges */
[data-board="uxc_recipe"] .recipeTitle .bo_current {padding:2px 8px; border-radius:var(--board-radius-lg); background:var(--color-prime); color:var(--board-white-only); font-size:11px; font-weight:500; vertical-align:middle;}
[data-board="uxc_recipe"] .recipeTitle .iconBox {padding:2px 6px; border-radius:10px; background:var(--board-success); color:var(--board-white-only); font-size:10px; font-weight:600;}

/* Description */
[data-board="uxc_recipe"] .recipeDesc {font-size:13px; color:var(--board-gray-500); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1;}

/* Footer */
[data-board="uxc_recipe"] .recipeFooter {display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--board-gray-100);}
[data-board="uxc_recipe"] .recipeStats {display:flex; align-items:center; gap:12px; font-size:12px; color:var(--board-gray-400);}
[data-board="uxc_recipe"] .recipeStats span {display:flex; align-items:center; gap:3px;}
[data-board="uxc_recipe"] .recipeStats i {font-size:14px;}
[data-board="uxc_recipe"] .recipeSteps {font-size:12px; font-weight:600; color:var(--board-gray-600); padding:3px 8px; background:var(--board-gray-50); border-radius:4px;}

/* Checkbox */
[data-board="uxc_recipe"] .recipeCard .checkBox {position:absolute; top:10px; right:10px; z-index:1; opacity:0; transition:opacity 0.2s;}
[data-board="uxc_recipe"] .recipeCard:hover .checkBox {opacity:1;}

/* Notice */
[data-board="uxc_recipe"] .recipeCard.bo_notice {border-left:3px solid var(--color-prime);}

/* Empty */
[data-board="uxc_recipe"] .recipeCard.empty {grid-column:1 / -1; text-align:center; padding:40px; color:var(--board-gray-400);}

/* Animation */
[data-board="uxc_recipe"] .recipeCard {opacity:0; transform:translateY(10px); animation:recipeIn 0.4s ease forwards;}
@keyframes recipeIn {
  to {opacity:1; transform:translateY(0);}
}

/* Write Form - Recipe Fields */
.recipeFields {display:flex; flex-direction:column; gap:0; border-radius:var(--board-radius-lg); background:var(--board-gray-50); border:1px solid var(--board-gray-200); overflow:hidden;}
.recipeFieldGroup {padding:16px 20px;}
.recipeFieldGroup + .recipeFieldGroup {border-top:1px solid var(--board-gray-200);}
.recipeFieldLabel {display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--board-gray-500); margin-bottom:12px; text-transform:uppercase; letter-spacing:0.5px;}
.recipeFieldLabel::before {content:''; display:inline-block; width:3px; height:12px; border-radius:2px; background:var(--color-prime);}
.recipeCheckGroup {display:flex; flex-wrap:wrap; gap:8px;}
.recipeCheckGroup .opt {display:flex; align-items:center;}
.recipeCheckGroup .opt input[type="checkbox"] {display:none;}
.recipeCheckGroup .opt label {display:inline-block; padding:8px; border-radius:4px; gap:6px; font-size:13px; font-weight:500; color:var(--board-gray-500); background:var(--board-white); border:1px solid var(--board-gray-200); cursor:pointer; transition:all 0.2s ease; user-select:none;}
.recipeCheckGroup .opt label:hover {border-color:var(--color-prime); color:var(--color-prime); background:var(--board-white);}
.recipeCheckGroup .opt input[type="checkbox"]:checked + label {background:var(--color-prime); color:var(--board-white-only); border-color:var(--color-prime); font-weight:600;}
.recipeCheckGroup .opt input[type="checkbox"]:checked + label:after {left:8px;}
.recipeFields input[type="text"],
.recipeFields input[type="number"] {padding:8px 14px; border:1px solid var(--board-gray-200); border-radius:8px; background:var(--board-white); font-size:13px; color:var(--board-gray-700); outline:none; transition:border-color 0.2s;}
.recipeFields input[type="text"]:focus,
.recipeFields input[type="number"]:focus {border-color:var(--color-prime);}

/* View - Recipe Meta Box */
.recipeMetaBox {display:flex; flex-direction:column; gap:12px; margin:20px 0; padding:20px; border-radius:var(--board-radius-lg); background:var(--board-gray-50); border:1px solid var(--board-gray-200);}
.recipeMetaItem {display:flex; align-items:center; gap:12px;}
.recipeMetaLabel {flex-shrink:0; font-size:12px; font-weight:600; color:var(--board-gray-400); min-width:64px; text-transform:uppercase; letter-spacing:0.5px;}
.recipeMetaTags {display:flex; flex-wrap:wrap; gap:6px;}
.recipeMetaTag {display:inline-block; padding:5px 14px; border-radius:20px; font-size:13px; font-weight:500; color:var(--board-gray-700); background:var(--board-white); border:1px solid var(--board-gray-200);}

/* View - Recipe Content Box */
.recipeContentBox {margin:20px 0; border-radius:var(--board-radius-lg); background:var(--board-gray-50); border:1px solid var(--board-gray-200); overflow:hidden;}
.recipeContentHeader {display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid var(--board-gray-200);}
.recipeContentActions {display:flex; align-items:center; gap:4px; margin-left:auto;}
.recipeContentLabel {display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--board-gray-500); text-transform:uppercase; letter-spacing:0.5px;}
.recipeContentLabel::before {content:''; display:inline-block; width:3px; height:12px; border-radius:2px; background:var(--color-prime);}
.recipeContentBox .content {padding:20px; background:var(--board-white);}
.btnContentCopy {display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border:1px solid var(--board-gray-200); border-radius:6px; background:var(--board-white); font-size:12px; font-weight:500; color:var(--board-gray-500); cursor:pointer; transition:all 0.2s ease;}
.btnContentCopy:hover, .btnContentDownload:hover {border-color:var(--color-prime); color:var(--color-prime);}
.btnContentCopy i, .btnContentDownload i {font-size:14px;}
.btnContentDownload {display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border:1px solid var(--board-gray-200); border-radius:6px; background:var(--board-white); font-size:12px; font-weight:500; color:var(--board-gray-500); cursor:pointer; transition:all 0.2s ease;}

/* Responsive */
@media (max-width:768px) {
  [data-board="uxc_recipe"] {grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce) {
  [data-board="uxc_recipe"] .recipeCard {animation:none; opacity:1; transform:none;}
}