.elementor-13 .elementor-element.elementor-element-300d6a3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-b05feb3 *//* 폰트 임포트 */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');

/* 색상 및 스타일 변수 정의 */
.elementor-13 .elementor-element.elementor-element-b05feb3 {
    --sky-blue: #4FC3F7;
    --gold-color: #D4AF37;
    --bg-color: #0A0A0A;
    --panel-bg: #141414;
    --text-primary: #FFFFFF;
    --text-secondary: #888888;
    --border-color: #222222;
    --font-heading: 'Sora', 'Noto Sans KR', sans-serif;
    --font-body: 'Sora', 'Noto Sans KR', sans-serif;
}

.goruk-showcase-container {
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
    padding: 24px; background-color: var(--bg-color); font-family: var(--font-body);
    position: relative; overflow: hidden;
}
.bento-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
    gap: 16px; width: 100%; max-width: 1200px; height: 80vh; max-height: 800px;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.bento-grid.hidden { transform: scale(0.95); opacity: 0; pointer-events: none; }
.bento-panel {
    background-color: var(--panel-bg); border: 1px solid var(--border-color);
    border-radius: 20px; padding: 24px; position: relative; overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex; flex-direction: column;
}
.panel-profile {
    grid-column: span 2; grid-row: span 2; padding: 0;
    background-image: url('https://gouruk.com/wp-content/uploads/2025/06/솜너new-reference-sheet-scaled.png');
    background-size: cover; background-position: center;
    text-decoration: none;
}
.panel-profile:hover { transform: translateY(-5px); border-color: var(--sky-blue); }
.panel-name { grid-column: span 2; grid-row: span 1; }
.panel-traits { grid-column: span 1; grid-row: span 1; }
.panel-palette { grid-column: span 1; grid-row: span 1; }
.panel-gallery { grid-column: span 2; grid-row: span 1; }
.panel-links { grid-column: span 2; grid-row: span 1; }
.panel-name h2 { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; margin: 0 0 16px 0; color: var(--text-primary); }
.panel-name .subtitle { font-size: 1.2rem; color: var(--sky-blue); margin: 0; }
.panel-name p { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin-top: auto; }
.traits-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-around; }
.traits-list li { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--text-secondary); }
.traits-list .label { color: var(--text-primary); }
.traits-list svg { width: 20px; height: 20px; fill: var(--sky-blue); stroke: var(--sky-blue); }
.palette-container { display: flex; gap: 10px; height: 100%; overflow-x: auto; padding-bottom: 10px; }
.color-swatch { flex: 1; min-width: 80px; border-radius: 12px; display: flex; align-items: flex-end; padding: 10px; font-size: 0.8rem; color: rgba(255,255,255,0.8); }
.palette-container::-webkit-scrollbar { height: 6px; }
.palette-container::-webkit-scrollbar-track { background: transparent; }
.palette-container::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.palette-container::-webkit-scrollbar-thumb:hover { background: #555; }
.panel-gallery { padding: 0; }

/* --- 갤러리 패널 수정 시작 --- */
.panel-gallery .panel-inner-wrapper { 
    box-sizing: border-box;
    padding: 24px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; 
}
.panel-gallery .gallery-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-shrink: 0; }
.panel-gallery h3 { font-size: 1.2rem; margin: 0; color: var(--text-primary); }
.panel-gallery .view-all-button { font-size: 0.9rem; color: var(--sky-blue); text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; }
.gallery-thumbs { 
    flex-grow: 1; 
    min-height: 0; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
    padding-bottom: 5px; /* 썸네일 아래 여백 추가 */
}
/* --- 갤러리 패널 수정 끝 --- */

.gallery-thumbs a { display: block; width: 100%; aspect-ratio: 1 / 1; }
.gallery-thumbs img { width: 100%; height: 90%; object-fit: cover; border-radius: 10px; opacity: 0.8; transition: opacity 0.3s; }
.gallery-thumbs img:hover { opacity: 1; }

/* --- 링크 패널 수정 시작 --- */
.panel-links { 
    justify-content: space-around; 
    align-items: center; 
    flex-direction: row;
    display: flex; /* Flexbox 명시적 선언 */
}
.social-link { color: var(--text-secondary); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: color 0.3s; }
.social-link:hover { color: var(--sky-blue); }
.social-link svg { width: 32px; height: 32px; fill: currentColor; }
.social-link i { font-size: 32px; line-height: 1; }
.social-link span { font-size: 0.9rem; }
.discord-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; /* 수직 중앙 정렬 */
    height: 100%; /* 부모 높이 채우기 */
}
/* --- 링크 패널 수정 끝 --- */

#discord-button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.discord-id-wrapper {
    color: var(--text-primary);
    background-color: var(--bg-color);
    border-radius: 8px;
    text-align: center;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.4s ease, opacity 0.4s ease, margin 0.4s ease, padding 0.4s ease;
}
.discord-id-wrapper.visible {
    opacity: 1;
	padding: 8px 12px 30px 12px;
}
.discord-id-wrapper p { margin: 0; }

.full-gallery-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 24px; background-color: var(--bg-color); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: scale(1.05); pointer-events: none; transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s; }
.full-gallery-view.visible { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; transition-delay: 0s; }
.gallery-view-header { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; }
.gallery-view-header h2 { font-size: 2rem; color: var(--text-primary); font-family: var(--font-heading); margin: 0; }
.back-to-grid-button { background: var(--panel-bg) !important; border: 1px solid var(--border-color); color: var(--text-primary); padding: 8px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.3s, color 0.3s; }
.back-to-grid-button:hover { border-color: var(--sky-blue); color: var(--sky-blue); }
.back-to-grid-button svg { width: 24px; height: 24px; stroke: currentColor; }
.full-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: #444 var(--bg-color); }
.full-gallery-grid::-webkit-scrollbar { width: 8px; }
.full-gallery-grid::-webkit-scrollbar-track { background: var(--bg-color); }
.full-gallery-grid::-webkit-scrollbar-thumb { background-color: #444; border-radius: 4px; border: 2px solid var(--bg-color); }
.full-gallery-grid::-webkit-scrollbar-thumb:hover { background-color: var(--sky-blue); }
.full-gallery-grid a { display: block; width: 100%; height: 250px; }
.full-gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: transform 0.3s ease; }
.full-gallery-grid img:hover { transform: scale(1.03); }

@media (max-width: 992px) { .goruk-showcase-container { min-height: auto; height: auto; padding: 16px; } .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; max-height: none; gap: 12px; } .bento-panel { grid-column: span 1 !important; grid-row: span 1 !important; padding: 20px; } .panel-profile { height: auto; aspect-ratio: 1 / 1; } .panel-name h2 { font-size: 2.2rem; } .full-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (max-width: 480px) { .goruk-showcase-container { padding: 10px; } .bento-grid { gap: 10px; } .panel-name h2 { font-size: 1.8rem; margin-bottom: 8px; } .panel-name .subtitle { font-size: 1rem; } .panel-name p { font-size: 0.9rem; } .traits-list li { font-size: 0.9rem; } .social-link i { font-size: 28px; } .gallery-view-header h2 { font-size: 1.5rem; } .full-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .full-gallery-grid a { height: 180px; } }/* End custom CSS */