/* 캐릭터 상세 페이지 전체 컨테이너 */
.char-detail-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background: #111;
    color: #eee;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.char-detail-wrapper * {
    box-sizing: border-box;
}

/* 상단 내비게이션 */
.char-nav {
    background: #222;
    padding: 10px 15px;
    border-radius: 4px;
    border-left: 10px solid #33c5ff;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.char-nav a {
    text-decoration: none;
    color: #aaa;
}

.char-nav a:hover { color: #33c5ff; }

.char-nav-active {
    color: #33c5ff !important;
    font-weight: bold;
    border-bottom: 1px solid #33c5ff;
}

/* 상단 가로 배치 레이아웃 */
.char-top-row {
    display: flex;
    gap: 15px;
    width: 100%;
    align-items: stretch;
}

/* 프로필 박스 */
.profile-box {
    flex: 1;
    text-align: center;
    padding: 15px;
}

/* 프로필 내부 레이아웃 */
.profile-content {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.portrait-frame {
    flex: 1;
    text-align: center;
}

.stats-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    border-bottom: 1px solid #222;
    min-height: 28px;
}

.stat-detail-row.growup {
	color: #33c5ff;
	border-bottom: 1px solid #333;
	margin-bottom: 5px;
	padding-bottom: 10px;
}

.special-stats {
    flex: 1;
    color: #ccc;
    line-height: 1.5;
    text-align: center;
    align-self: flex-start;
}

/* 스탯 가감 버튼 그룹 */
.stat-btn-group {
    display: flex;
    gap: 3px;
}

.btn-stat-adj {
    width: 22px;
    height: 22px;
    background: #333;
    border: 1px solid #555;
    color: #fff;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
    padding: 0;
}

/* All 버튼 특수 스타일 */
.btn-stat-adj.all {
    width: 30px;
    background: #444;
}

.btn-stat-adj:hover,
.btn-stat-adj.all:hover {
    background: #444;
    border-color: #33c5ff;
    color: #33c5ff;
}

/* 섹션 카드 공통 */
.char-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 15px;
}

.char-card h4 {
    margin: 0 0 12px 0;
    padding: 0 0 5px 10px;
    border-left: 10px solid #33c5ff;
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-subtitle {
    color: #888;
	/* letter-spacing: -0.075em; */
}

.management-form {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.char-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.select-wide {
    width: 160px;
    background: #222;
    color: #eee;
    border: 1px solid #444;
}

/* 행동 패턴 그리드 */
.pattern-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pattern-row {
    display: grid;
    grid-template-columns: 10px 40px 1fr 50px 220px 30px;
    gap: 10px;
    padding: 10px 0;
    border: 1px solid #1a1a1a;
    border-top: 1px solid #222;
    align-items: center;
    border-radius: 4px;
}

.pattern-col-no {
    text-align: center;
    color: #888;
}
.pattern-col-radio { text-align: center; }

.pattern-row select, .pattern-row input[type="text"] {
    width: 100%;
    background: #222;
    color: #eee;
    border: solid 1px #444;
    padding: 6px;
    border-radius: 3px;
	height: 40px;
}

/* 판정 목록 특수 스타일 */
.select0 {
    background: #333 !important;
    color: #33c5ff !important;
    font-weight: bold;
}

/* 장비/인벤토리 */
.equip-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
    border: 1px dashed #444;
    padding: 10px;
    border-radius: 4px;
}

.equip-summary-full { grid-column: span 2; }

.equip-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    align-items: center;
}

.equip-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #222;
    border-radius: 4px;
    width: 100%;
}

.scroll-list-box {
    height: 250px;
    overflow-y: auto;
    padding: 10px;
    background: #222;
    border-radius: 4px;
    margin-top: 10px;
}

/* 스킬 그리드 */
.skill-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.skill-row {
    border-bottom: 1px solid #222;
}

.skill-section-title {
    margin-top: 20px;
    font-weight: bold;
    border-left: 3px solid #33c5ff;
    padding-left: 10px;
    margin-bottom: 12px;
    color: #ccc;
}

/* 직업 변경 컨테이너 */
.class-change-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* 직업 선택 카드 스타일 재정의 */
.class-option-box { 
    flex-direction: column; /* 이미지와 텍스트를 세로로 배치 */
    justify-content: flex-end !important;
    width: 140px; /* 카드 너비 */
    height: 175px;
    padding: 20px 10px !important;
    gap: 10px;
}

.class-option-img { 
    /* max-width: 60px;  */
    /* max-height: 60px; */
    height: auto; 
    object-fit: contain;
    /* margin-bottom 제거 (gap으로 대체) */
}

/* 버튼 스타일 */
.char-detail-wrapper .btn {
    display: inline-block;
    background: #333;
    color: #eee !important;
    border: 1px solid #111;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
}

.char-detail-wrapper .btn:hover {
    background: #444;
    border-color: #666;
    color: #fff;
}

.char-detail-wrapper .btn-primary:hover {
    background: #446688;
    border-color: #304052;
}

.char-detail-wrapper .btn-danger:hover {
    background: #cc0000;
    border-color: #721c24;
}

.char-detail-wrapper .btn-primary {
    background: #304052;
    border-color: #202935;
}

.char-detail-wrapper .btn-danger {
    background: #ff3333;
    color: #fff;
    border-color: #721c24;
}

.char-detail-wrapper .btn-block {
    display: block;
    width: 100%;
    margin-top: 5px;
}

.btn-group {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.pipeline {
    margin: 0 2px;
    color: #444;
}

/* 카드 그리드 레이아웃 */
.tcg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    padding: 10px 0;
}

/* 카드 본체 */
.tcg-hunt-card {
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border: 5px solid #304052;
    border-radius: 6px;
    height: 320px;
    overflow: hidden;
    box-sizing: content-box;
    box-shadow: 0px 5px 5px rgba(0,0,0,.25);
}

.tcg-hunt-card:hover {
	outline: 3px solid gold;
}

/* 카드 상단 */
.tcg-card-header {
    background: #304052;
    color: #eee;
    padding: 5px 10px 10px 10px;
    text-align: left;
    font-weight: bold;
}

/* 카드 중단 이미지 영역 */
.tcg-card-image-wrap {
    position: relative;
    flex: 2;
    background-size: cover;
    background-position: center;
}

.tcg-card-image-wrap img {
	position:absolute;
	bottom:10px;
	right:-10px;
	z-index:1;
	transform: scaleX(-1) scale(1.5);
	image-rendering: pixelated;
}

/* 텍스트 오버레이 영역 */
.tcg-overlay-content {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: normal;
    padding: 10px;
    gap: 4px;
}

/* 오버레이 링크 및 아이콘 정렬 수정 */
.tcg-overlay-content a {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
	z-index: 10;
	transition: ease 0.2s all;
}

.tcg-overlay-content a i {
    margin-right: 6px;
}

.tcg-overlay-content a:hover {
	color: #33ff33;
	background: rgba(0,0,0,.75);
	padding: 5px;
	/* margin-left: 10px; */
	transition: ease 0.2s all;
}

/* 카드 하단 설명 영역 */
.tcg-card-footer {
    flex: 1;
    background: #111;
    padding: 10px;
    border-top: 5px solid #304052;
}

.tcg-description {
    color: #757575;
    line-height: 1.2;
    word-break: keep-all;
}

/* 사냥터 상세 상단 배너 */
.land-banner {
    position: relative;
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-bottom: 4px solid #304052;
}

.banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
}

.banner-overlay h2 { 
    margin: 0; 
    font-size: 1.8em; 
    text-shadow: 2px 2px 4px #000; 
}

.banner-overlay .proper-lv { 
    color: #33c5ff; 
    font-weight: bold; 
    margin-top: 8px; 
    text-shadow: 1px 1px 2px #000;
}

.banner-overlay .land-desc { 
    margin-top: 5px; 
    color: #ccc; 
    text-shadow: 1px 1px 2px #000;
}

/* [추가] 배율 토글 버튼 스타일 (btn-stat-adj와 통일성 유지) */
.multiplier-toggle-btn {
    display: inline-block;
    background: #333;
    border: 1px solid #555;
    color: #888;
    font-weight: bold;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 2px;
    min-width: 40px;
    text-align: center;
}

/* 활성화 상태 (btn-stat-adj:hover와 유사한 테마 컬러 적용) */
.multiplier-toggle-btn.is-active {
    background: #444;
    border-color: #33c5ff;
    color: #33c5ff;
}

.multiplier-toggle-btn input {
    display: none;
}

/* --- 행동 패턴 드래그 & 드랍 추가 스타일 --- */
.pattern-row {
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    background: #1a1a1a; /* 배경색 명시 */
}

/* 드래그 핸들 (아이콘 영역) */
.pattern-col-no.drag-handle {
    cursor: grab;
    color: #555;
}

.pattern-col-no.drag-handle:hover {
    color: #eee;
}

.pattern-col-no.drag-handle:active {
    cursor: grabbing;
}

/* 드래그 중인 상태 (반투명 + 테두리 강조) */
.pattern-row.dragging {
    opacity: 0.5;
    background: #222;
    border: 2px dashed #33c5ff;
}

/* --- 스킬 목록 마퀴(Marquee) 효과 스타일 --- */

/* 스킬 아이템을 Flex 컨테이너로 변경하여 내부 요소 정렬 */
.skill-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 10px; /* 우측 여백 확보 */
}

/* 라디오 버튼이 찌그러지지 않도록 설정 */
.skill-item input[type="radio"] {
    flex-shrink: 0;
    margin-right: 8px;
}

/* 텍스트가 표시될 영역 (넘치면 숨김 처리) */
.marquee-content {
    flex: 1;             /* 남은 공간 모두 차지 */
    min-width: 0;        /* Flex 아이템 내에서 text-overflow 작동 필수 조건 */
    white-space: nowrap; /* 줄바꿈 금지 */
    overflow: hidden;    /* 넘치는 내용 숨김 */
    text-overflow: ellipsis; /* 넘칠 경우 ... 표시 */
    display: block;
    
    /* 부드러운 복귀를 위한 트랜지션 */
    transition: text-indent 0.3s ease-out; 
}