/* ==========================================================================
   Heirloom & Harvest — Board Skin Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@400,0&display=swap');

/* ── 토큰 ──────────────────────────────────────────────────────────────── */
:root {
    --hk-primary:                #442a22;
    --hk-primary-container:      #5d4037;
    --hk-on-primary:             #ffffff;
    --hk-primary-fixed:          #ffdbd0;
    --hk-on-primary-fixed:       #2c160e;
    --hk-inverse-primary:        #e7bdb1;

    --hk-secondary:              #7e5700;
    --hk-secondary-container:    #feb300;
    --hk-on-secondary-fixed:     #281900;
    --hk-on-secondary-fixed-var: #604100;
    --hk-secondary-fixed:        #ffdeac;

    --hk-error:                  #ba1a1a;
    --hk-error-container:        #ffdad6;

    --hk-background:             #ffffff;
    --hk-surface:                #ffffff;
    --hk-surface-low:            #f6f5df;
    --hk-surface-container:      #f1efd9;
    --hk-surface-high:           #ebe9d4;
    --hk-surface-highest:        #e5e3ce;

    --hk-on-surface:             #1c1c0f;
    --hk-on-surface-var:         #504441;
    --hk-outline:                #827470;
    --hk-outline-var:            #d4c3be;
    --hk-inverse-surface:        #313123;
    --hk-inverse-on-surface:     #f4f2dc;

    --hk-font-headline:var(--font-base);
    --hk-font-body:var(--font-base);

    --hk-radius-sm:   0.25rem;
    --hk-radius:      0.5rem;
    --hk-radius-md:   0.75rem;
    --hk-radius-lg:   1rem;
    --hk-radius-xl:   1.5rem;
    --hk-radius-full: 9999px;

    --hk-stack-sm:   8px;
    --hk-stack-md:   16px;
    --hk-stack-lg:   32px;
    --hk-stack-xl:   64px;
    --hk-gutter:     24px;
    --hk-max-w:      100%;
}

/* ── 래퍼 ──────────────────────────────────────────────────────────────── */
.hk-wrap {
    background-color: var(--hk-background);
    color: var(--hk-on-surface);
    font-family: var(--hk-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.hk-container {
    max-width: var(--hk-max-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: var(--hk-stack-lg);
    padding-bottom: var(--hk-stack-xl);
}

@media (min-width: 768px) {
    .hk-container { padding-left: var(--hk-gutter); padding-right: var(--hk-gutter); }
}


/* Material Symbols */
.hk-icon {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* ==========================================================================
   공통 컴포넌트
   ========================================================================== */

/* ── 버튼 ──────────────────────────────────────────────────────────────── */
.hk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--hk-radius);
    font-family: var(--hk-font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.hk-btn-primary {
    background-color: var(--hk-primary);
    color: var(--hk-on-primary);
}
.hk-btn-primary:hover { opacity: 0.88; color: var(--hk-on-primary); }

.hk-btn-outline {
    background-color: transparent;
    color: var(--hk-primary);
    border: 1px solid var(--hk-primary);
}
.hk-btn-outline:hover { background-color: rgba(68, 42, 34, 0.05); color: var(--hk-primary); }

.hk-btn-danger {
    background-color: transparent;
    color: var(--hk-error);
    border: 1px solid rgba(186, 26, 26, 0.4);
}
.hk-btn-danger:hover { background-color: rgba(186, 26, 26, 0.05); }

/* ── 입력 필드 ─────────────────────────────────────────────────────────── */
.hk-input {
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--hk-radius);
    border: 1px solid rgba(68, 42, 34, 0.2);
    background-color: var(--hk-background);
    color: var(--hk-on-surface);
    font-family: var(--hk-font-body);
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 0.15s;
    outline: none;
    -webkit-appearance: none;
}
.hk-input:focus {
    border-color: var(--hk-primary);
    border-width: 2px;
}
.hk-input::placeholder { color: var(--hk-outline); }

textarea.hk-input { resize: vertical; }
select.hk-input    { cursor: pointer; }

/* ── 라벨 캡스 ─────────────────────────────────────────────────────────── */
.hk-label-caps {
    font-family: var(--hk-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
}

/* ── 카드 ──────────────────────────────────────────────────────────────── */
.hk-card {
    background-color: var(--hk-surface);
    border: 1px solid rgba(68, 42, 34, 0.1);
    border-radius: var(--hk-radius-lg);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}
.hk-card:hover { box-shadow: 0 4px 16px rgba(68, 42, 34, 0.08); }

/* ── 이미지 ────────────────────────────────────────────────────────────── */
.hk-img-hero {
    border-radius: var(--hk-radius-xl);
    overflow: hidden;
    position: relative;
    background-color: var(--hk-surface-highest);
}
.hk-img-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(68, 42, 34, 0.1);
    pointer-events: none;
}
.hk-img-hero img,
.hk-img-hero-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hk-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--hk-surface-highest);
    color: var(--hk-outline);
}

/* ── 태그/뱃지 ─────────────────────────────────────────────────────────── */
.hk-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--hk-radius-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hk-badge-notice {
    background-color: var(--hk-primary);
    color: var(--hk-on-primary);
}

/* ==========================================================================
   목록 스킨 (list.skin.php)
   ========================================================================== */

/* 게시판 헤더 */
.hk-board-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(68, 42, 34, 0.12);
}
.hk-board-header__title {
    font-family: var(--hk-font-headline);
    font-size: 28px;
    font-weight: 600;
    color: var(--hk-primary);
    margin: 0;
}
.hk-board-header__sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    opacity: 0.7;
    margin-bottom: 4px;
}

/* 빈 게시판 */
.hk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    text-align: center;
    gap: 12px;
    color: var(--hk-on-surface-var);
}
.hk-empty .hk-icon { font-size: 48px; color: var(--hk-outline); }

/* ── Featured 기사 ───────────────────────────────────────────────────────── */
.hk-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hk-gutter);
    margin-bottom: var(--hk-stack-xl);
    align-items: stretch;
}
@media (min-width: 1024px) {
    .hk-featured { grid-template-columns: 5fr 7fr; }
}

.hk-featured__image {
    position: relative;
    border-radius: var(--hk-radius-xl);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: var(--hk-surface-highest);
    display: block;
    text-decoration: none;
}
.hk-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
.hk-featured__image:hover img { transform: scale(1.04); }
.hk-featured__image .hk-badge {
    position: absolute;
    top: 16px;
    left: 16px;
}

.hk-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 4px 0;
    order: 2;
}
@media (min-width: 1024px) {
    .hk-featured__image { order: 1; }
    .hk-featured__body  { order: 2; }
}

.hk-featured__category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-secondary);
}
.hk-featured__title {
    font-family: var(--hk-font-headline);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hk-primary);
    text-decoration: none;
    transition: opacity 0.15s;
    display: block;
}
@media (min-width: 768px) { .hk-featured__title { font-size: 34px; } }
.hk-featured__title:hover { opacity: 0.72; }

.hk-featured__excerpt {
    font-size: 15px;
    line-height: 1.7;
    color: var(--hk-on-surface-var);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hk-featured__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(68, 42, 34, 0.1);
}
.hk-featured__meta-date {
    margin-left: auto;
    font-size: 13px;
    color: var(--hk-outline);
}

/* ── 메타 아이템 (아이콘 + 텍스트) ─────────────────────────────────────── */
.hk-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--hk-primary);
}
.hk-meta-item .hk-icon { font-size: 15px; color: var(--hk-secondary); }
.hk-meta-item--sm { font-size: 12px; color: var(--hk-on-surface-var); }
.hk-meta-item--sm .hk-icon { font-size: 14px; }

/* ── 섹션 구분 ─────────────────────────────────────────────────────────── */
.hk-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--hk-stack-lg);
}
.hk-section-divider__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    opacity: 0.6;
    white-space: nowrap;
}
.hk-section-divider__line {
    flex: 1;
    height: 1px;
    background-color: rgba(68, 42, 34, 0.1);
}

/* ── 카드 그리드 ───────────────────────────────────────────────────────── */
.hk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hk-gutter);
    margin-bottom: var(--hk-stack-xl);
}
@media (min-width: 600px)  { .hk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hk-grid { grid-template-columns: repeat(3, 1fr); } }

.hk-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--hk-surface-highest);
    display: block;
}
.hk-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.hk-card__thumb:hover img { transform: scale(1.05); }
.hk-card__thumb .hk-badge { position: absolute; top: 12px; left: 12px; }

.hk-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
    flex: 1;
}
.hk-card__category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-secondary);
}
.hk-card__title {
    font-family: var(--hk-font-headline);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hk-primary);
    text-decoration: none;
    transition: opacity 0.15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hk-card__title:hover { opacity: 0.72; }

.hk-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(68, 42, 34, 0.08);
}
.hk-card__comment {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--hk-outline);
    margin-left: auto;
}
.hk-card__comment .hk-icon { font-size: 14px; }

/* ── 페이징 ────────────────────────────────────────────────────────────── */
.hk-paging {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.hk-paging a,
.hk-paging strong,
.hk-paging span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 6px;
    font-family: var(--hk-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--hk-on-surface-var);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.hk-paging a:hover       { background-color: rgba(68, 42, 34, 0.07); color: var(--hk-primary); }
.hk-paging strong        { background-color: var(--hk-primary); color: var(--hk-on-primary); font-weight: 700; }
.hk-paging .pg_start a,
.hk-paging .pg_end a,
.hk-paging .pg_prev a,
.hk-paging .pg_next a   { font-size: 18px; }

/* ==========================================================================
   보기 스킨 (view.skin.php)
   ========================================================================== */

/* ── 히어로 섹션 ───────────────────────────────────────────────────────── */
.hk-view-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hk-gutter);
    margin-top: 24px;
    margin-bottom: var(--hk-stack-xl);
    align-items: center;
}
@media (min-width: 1024px) {
    .hk-view-hero { grid-template-columns: 5fr 7fr; }
    .hk-view-hero__text  { order: 1; }
    .hk-view-hero__image { order: 2; }
}

.hk-view-hero__image { order: 1; }
.hk-view-hero__text  { order: 2; }

.hk-view-hero__image-wrap {
    aspect-ratio: 16 / 10;
}

/* 브레드크럼 */
.hk-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    margin-bottom: 12px;
}
.hk-breadcrumb a { color: inherit; text-decoration: none; transition: color 0.15s; }
.hk-breadcrumb a:hover { color: var(--hk-primary); }
.hk-breadcrumb__current { color: var(--hk-primary); }
.hk-breadcrumb .hk-icon { font-size: 14px; }

/* 제목 */
.hk-view-title {
    font-family: var(--hk-font-headline);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--hk-primary);
    margin: 0 0 12px;
}
@media (min-width: 768px) { .hk-view-title { font-size: 44px; } }

/* 한줄 요약 */
.hk-view-excerpt {
    font-size: 17px;
    line-height: 1.65;
    color: var(--hk-on-surface-var);
    margin-bottom: 4px;
}

/* 메타 바 */
.hk-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid rgba(68, 42, 34, 0.1);
    border-bottom: 1px solid rgba(68, 42, 34, 0.1);
    margin: 16px 0;
}
.hk-meta-bar__divider {
    width: 1px;
    height: 32px;
    background-color: rgba(68, 42, 34, 0.1);
}
.hk-meta-bar__item { display: flex; flex-direction: column; gap: 3px; }
.hk-meta-bar__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    opacity: 0.7;
}
.hk-meta-bar__value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hk-primary);
}
.hk-meta-bar__value .hk-icon { font-size: 16px; }

/* 작성자 정보 */
.hk-view-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--hk-outline);
    margin-bottom: 16px;
}
.hk-view-author-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hk-view-author-item .hk-icon { font-size: 14px; }

/* 버튼 그룹 */
.hk-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* ── 재료 섹션 ─────────────────────────────────────────────────────────── */
.hk-ingredients-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hk-stack-xl);
    align-items: start;
    margin-bottom: var(--hk-stack-xl);
}
@media (min-width: 768px) {
    .hk-ingredients-section { grid-template-columns: 1.5fr 1fr; }
}

.hk-section-title {
    font-family: var(--hk-font-headline);
    font-size: 24px;
    font-weight: 600;
    color: var(--hk-primary);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hk-section-title .hk-icon { color: var(--hk-secondary); font-size: 26px; }

.hk-ingredients-list {
    background-color: var(--hk-surface-low);
    border-radius: var(--hk-radius-md);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.hk-ingredient-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(68, 42, 34, 0.05);
}
.hk-ingredient-item:last-child { border-bottom: none; }

.hk-ingredient-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(68, 42, 34, 0.25);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-color: transparent;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.hk-ingredient-item input[type="checkbox"]:checked {
    background-color: var(--hk-primary);
    border-color: var(--hk-primary);
}
.hk-ingredient-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M8 13.4L4.6 10l-1.4 1.4L8 16.2l9-9-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}
.hk-ingredient-item label {
    font-size: 15px;
    color: var(--hk-on-surface);
    cursor: pointer;
    transition: opacity 0.2s, text-decoration 0.2s;
    line-height: 1.5;
}
.hk-ingredient-item input[type="checkbox"]:checked + label {
    text-decoration: line-through;
    opacity: 0.45;
}

.hk-ingredients-img {
    aspect-ratio: 1;
}

/* ── 조리 과정 본문 ────────────────────────────────────────────────────── */
.hk-view-section { margin-bottom: var(--hk-stack-xl); }
.hk-view-section-title {
    font-family: var(--hk-font-headline);
    font-size: 24px;
    font-weight: 600;
    color: var(--hk-primary);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hk-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--hk-on-surface-var);
}
.hk-content img     { border-radius: var(--hk-radius-md); max-width: 100%; height: auto; display: block; margin: 24px 0; }
.hk-content h2,
.hk-content h3      { font-family: var(--hk-font-headline); color: var(--hk-primary); margin: 2rem 0 0.75rem; }
.hk-content h2      { font-size: 24px; }
.hk-content h3      { font-size: 20px; }
.hk-content p       { margin: 0 0 1rem; }
.hk-content ul      { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.hk-content li      { margin-bottom: 0.4rem; }

/* 조리 과정 <ol> 자동 번호 스타일 */
.hk-content ol {
    counter-reset: step-counter;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.hk-content ol > li {
    counter-increment: step-counter;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 16px;
    align-items: start;
}
.hk-content ol > li::before {
    content: counter(step-counter, decimal-leading-zero);
    font-family: var(--hk-font-headline);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--hk-primary);
    opacity: 0.2;
    line-height: 1;
    padding-top: 2px;
}

/* ── 첨부파일 ──────────────────────────────────────────────────────────── */
.hk-attachments {
    border: 1px solid rgba(68, 42, 34, 0.1);
    border-radius: var(--hk-radius-lg);
    padding: 20px 24px;
    margin-bottom: var(--hk-stack-lg);
}
.hk-attachments__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.hk-attachments__title .hk-icon { font-size: 16px; }
.hk-attachments__list { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.hk-attachments__item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--hk-primary);
    text-decoration: none;
}
.hk-attachments__item a:hover { text-decoration: underline; }
.hk-attachments__item .hk-icon { color: var(--hk-secondary); font-size: 16px; }
.hk-attachments__size { font-size: 12px; color: var(--hk-outline); }

/* ── 이전/다음글 ───────────────────────────────────────────────────────── */
.hk-adjacent { border-top: 1px solid rgba(68, 42, 34, 0.1); margin-bottom: var(--hk-stack-md); }
.hk-adjacent__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 8px;
    border-bottom: 1px solid rgba(68, 42, 34, 0.07);
    text-decoration: none;
    border-radius: var(--hk-radius-sm);
    transition: background 0.15s;
}
.hk-adjacent__item:last-child { border-bottom: none; }
.hk-adjacent__item:hover { background-color: rgba(68, 42, 34, 0.03); }
.hk-adjacent__icon { color: var(--hk-secondary); font-size: 20px; flex-shrink: 0; }
.hk-adjacent__dir  { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--hk-outline); width: 52px; flex-shrink: 0; }
.hk-adjacent__title { font-size: 15px; color: var(--hk-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 팁 박스 ────────────────────────────────────────────────────────────── */
.hk-tip-box {
    background-color: rgba(255, 222, 172, 0.3);
    border-left: 4px solid var(--hk-secondary-container);
    border-radius: 0 var(--hk-radius-md) var(--hk-radius-md) 0;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: var(--hk-stack-xl);
}
.hk-tip-box .hk-icon { color: var(--hk-secondary); font-size: 28px; flex-shrink: 0; }
.hk-tip-box__label   { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--hk-on-secondary-fixed-var); text-transform: uppercase; margin-bottom: 4px; }
.hk-tip-box__text    { font-size: 16px; line-height: 1.65; color: var(--hk-on-secondary-fixed); font-style: italic; }

/* ── 목록으로 버튼 영역 ─────────────────────────────────────────────────── */
.hk-view-foot {
    display: flex;
    justify-content: center;
    margin: 32px 0 16px;
}

/* ==========================================================================
   글쓰기 스킨 (write.skin.php)
   ========================================================================== */

.hk-write-wrap {
    margin: 0 auto;
    padding: var(--hk-stack-lg) var(--hk-stack-md) var(--hk-stack-xl);
}

.hk-write-header {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(68, 42, 34, 0.12);
}
.hk-write-header__sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    opacity: 0.7;
    margin-bottom: 4px;
}
.hk-write-header__title {
    font-family: var(--hk-font-headline);
    font-size: 26px;
    font-weight: 600;
    color: var(--hk-primary);
    margin: 0;
}

.hk-write-form { display: flex; flex-direction: column; gap: 32px; }

/* 필드셋 */
.hk-fieldset {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: none;
    padding: 0;
    margin: 0;
}
.hk-fieldset-legend {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    opacity: 0.7;
    padding-bottom: 12px;
    width: 100%;
    /* border-bottom: 1px solid rgba(68, 42, 34, 0.1); */
    margin-bottom: 6px;
    display: block;
}

/* 필드 래퍼 */
.hk-field { display: flex; flex-direction: column; gap: 6px; }
.hk-field-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    display: flex;
    align-items: center;
    gap: 5px;
}
.hk-field-label .hk-icon { font-size: 14px; color: var(--hk-secondary); }
.hk-field-required { color: var(--hk-error); }
.hk-field-hint { font-size: 13px; color: var(--hk-outline); }

/* 3컬럼 그리드 (준비시간, 난이도, 인분) */
.hk-grid-3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 480px) { .hk-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* 2컬럼 그리드 (작성자, 비밀번호) */
.hk-grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 480px) { .hk-grid-2 { grid-template-columns: 1fr 1fr; } }

/* 제목 입력 (헤드라인 폰트) */
.hk-input-title {
    font-family: var(--hk-font-headline);
    font-size: 20px;
}

/* 에디터 래퍼 */
.hk-editor-wrap {
    border: 1px solid rgba(68, 42, 34, 0.2);
    border-radius: var(--hk-radius-md);
    overflow: hidden;
    transition: border-color 0.15s;
}
.hk-editor-wrap:focus-within {
    border-color: var(--hk-primary);
    border-width: 2px;
}
.hk-editor-wrap iframe,
.hk-editor-wrap .se2_wrap { border: none !important; }

/* 파일 업로드 영역 */
.hk-file-field { display: flex; flex-direction: column; gap: 8px; }
.hk-file-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    display: flex;
    align-items: center;
    gap: 5px;
}
.hk-file-label .hk-icon { font-size: 14px; color: var(--hk-secondary); }

.hk-file-existing {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background-color: var(--hk-surface-low);
    border-radius: var(--hk-radius);
}
.hk-file-existing img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--hk-radius-sm); flex-shrink: 0; }
.hk-file-existing__icon { font-size: 30px; color: var(--hk-secondary); }
.hk-file-existing__info { flex: 1; min-width: 0; }
.hk-file-existing__name { font-size: 13px; color: var(--hk-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-file-existing__size { font-size: 11px; color: var(--hk-outline); margin-top: 2px; }
.hk-file-del-label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--hk-error); cursor: pointer; flex-shrink: 0; }
.hk-file-del-label input { accent-color: var(--hk-error); }

.hk-file-drop {
    position: relative;
    border: 2px dashed rgba(68, 42, 34, 0.2);
    border-radius: var(--hk-radius-md);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.hk-file-drop:hover {
    border-color: var(--hk-primary);
    background-color: rgba(68, 42, 34, 0.02);
}
.hk-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.hk-file-drop .hk-icon { color: var(--hk-secondary); font-size: 22px; flex-shrink: 0; }
.hk-file-drop__text { font-size: 14px; color: var(--hk-on-surface-var); }

/* 옵션 체크박스 */
.hk-option-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.hk-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--hk-on-surface-var);
    cursor: pointer;
}
.hk-check-label input[type="checkbox"] { accent-color: var(--hk-primary); width: 16px; height: 16px; }
.hk-check-label .hk-icon { font-size: 16px; color: var(--hk-secondary); }

/* 제출 버튼 그룹 */
.hk-submit-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(68, 42, 34, 0.1);
}
@media (min-width: 480px) {
    .hk-submit-group { flex-direction: row; }
    .hk-submit-group .hk-btn { flex: 0 0 auto; }
}

/* ==========================================================================
   댓글 스킨 (_comment.skin.php)
   ========================================================================== */

.hk-comments { margin-top: 48px; margin-bottom: 64px; }

.hk-comments-title {
    font-family: var(--hk-font-headline);
    font-size: 22px;
    font-weight: 600;
    color: var(--hk-primary);
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hk-comments-title .hk-icon { color: var(--hk-secondary); }
.hk-comments-title__count { font-family: var(--hk-font-body); font-size: 16px; font-weight: 400; color: var(--hk-outline); }

.hk-comment-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(68, 42, 34, 0.08);
    margin-bottom: 32px;
}
.hk-comment-item {
    display: flex;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(68, 42, 34, 0.07);
}
.hk-comment-item--reply {
    padding-left: 32px;
    background-color: rgba(68, 42, 34, 0.02);
}
.hk-comment__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--hk-surface-highest);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.hk-comment__avatar .hk-icon { font-size: 18px; color: var(--hk-outline); }
.hk-comment__body { flex: 1; min-width: 0; }
.hk-comment__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.hk-comment__author { font-size: 14px; font-weight: 600; color: var(--hk-on-surface); }
.hk-comment__secret {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--hk-outline);
}
.hk-comment__secret .hk-icon { font-size: 12px; }
.hk-comment__date { font-size: 12px; color: var(--hk-outline); margin-left: auto; }
.hk-comment__text { font-size: 15px; line-height: 1.65; color: var(--hk-on-surface-var); }
.hk-comment__secret-msg { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--hk-outline); font-style: italic; }
.hk-comment__actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.hk-comment__action-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    cursor: pointer;
    transition: color 0.15s;
}
.hk-comment__action-btn:hover          { color: var(--hk-primary); }
.hk-comment__action-btn--del:hover     { color: var(--hk-error); }

/* 댓글 폼 */
.hk-comment-form {
    background-color: var(--hk-surface-low);
    border-radius: var(--hk-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hk-comment-form__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hk-comment-form__title .hk-icon { font-size: 16px; color: var(--hk-secondary); }
.hk-comment-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hk-comment-login-msg {
    text-align: center;
    padding: 24px;
    font-size: 14px;
    color: var(--hk-outline);
}
.hk-comment-login-msg a { color: var(--hk-primary); text-decoration: underline; }

/* ==========================================================================
   삭제 확인 스킨 (delete.skin.php)
   ========================================================================== */

.hk-delete-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 64px 16px;
    text-align: center;
    gap: 24px;
    max-width: 440px;
    margin: 0 auto;
}
.hk-delete-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--hk-error-container);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hk-delete-icon .hk-icon { font-size: 30px; color: var(--hk-error); }
.hk-delete-title {
    font-family: var(--hk-font-headline);
    font-size: 24px;
    font-weight: 600;
    color: var(--hk-primary);
    margin: 0 0 4px;
}
.hk-delete-desc { font-size: 15px; line-height: 1.6; color: var(--hk-on-surface-var); }
.hk-delete-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   인쇄
   ========================================================================== */
@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {width: 210mm; }
    #hd, #ft, #aside, #wrapper, #container, #bo_v_info, .btn_bo_user, .hk-view-foot, .hk-action-group, header, footer, .site-footer,  {
        display: none !important;
    }
    
    body {
        background: #fff !important;
        color: #000 !important;
    }
    
    .hk-no-print { 
        display: none !important; 
    }
    
    .hk-wrap{margin: 0; border: initial;width: initial;min-height: initial;box-shadow: initial;background: initial;page-break-after: always; }
    /* 인쇄 대상 래퍼를 강제로 노출시키고 화면을 꽉 채웁니다. */
    .hk-wrap, .hk-wrap * {
        display: block !important; /* 그누보드 부모 숨김에 영향받지 않게 복구 */
    }
    
    .hk-wrap, .hk-container {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    .hk-content{
        display:block;
    }
    .hk-ingredient-item input[type="checkbox"] {
        display: inline-block !important;
    }
    .hk-view-foot,.comment-wrap{display:none !important;}
}



@media(max-width:768px){
    .hk-featured__category,
    .hk-featured__excerpt{display:none !important;}
    .hk-featured__body {
        gap: 10px !important;
    }
    .hk-featured__title {
        font-size: 22px !important;
    }
    .hk-featured {
        display: grid;
        grid-template-columns: 1fr;
        gap:10px !important;
        margin-bottom:25px !important;
        align-items: stretch;
    }
    .hk-view-title{
        font-size:24px !important;
    }
    .hk-view-excerpt {
        font-size: 14px;
    }
    .hk-meta-bar {
        display: flex;
        gap: 10px;
        padding: 14px 0;
        margin: 13px 0;
        justify-content: space-between;
    }
    .hk-ingredients-section-list{
        order:2;
    }
    .hk-img-hero.hk-ingredients-img{
        order:1;
    }
    .hk-container {
        padding-top: var(--hk-stack-sm);
        padding-bottom: var(--hk-stack-sm);
    }
}