/* 여기는 tab css */

*:focus {
	outline: 1px dotted blue;
}

.global-wallet {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 0;
	padding: 7px 12px;
	background: #30265f;
	color: #ffd166;
	font-family: 'Jua', sans-serif;
	font-size: 16px;
	text-align: center;
	box-shadow: 0 2px 7px rgba(0,0,0,.18);
}
.global-wallet span { font-size: 13px; color: #fff; }

.web-adfit-banner {
	display: flex;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

.tabs > ul {
	font-family: 'Jua', sans-serif;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #ccc;
	font-size: 0;
	font-weight: normal;
}
.tabs > ul .indicator {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	width: 20%;
	background: #1e88e5;
	-webkit-transform: translateZ(0) translateX(0);
	transform: translateZ(0) translateX(0);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.tabs > ul li {
	display: inline-block;
	font-size: 1.25rem;
	width: 20%;
}
.tabs > ul li a {
	display: block;
	position: relative;
	overflow: hidden;
	/* padding: 10px; */
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	text-decoration: none;
	text-align: center;
	/* font-weight: bold; */
	/* color: black; */
	-webkit-transition: all 0.3s ease 0.4s;
	transition: all 0.3s ease 0.4s;
}

a[href$='section1'] {
	/* background: #faffd1; */
	background-image: url('img/img_back_1.jpg');
	background-repeat: repeat;
	color: black;
}
a[href$='section2'] {
	background-image: url('img/img_back_6.jfif');
	background-repeat: repeat;
	color: black;
}
a[href$='section3'] {
	background-image: url('img/img_back_1.jpg');
	background-repeat: repeat;
	color: black;
}
a[href$='section4'] {
	background-image: url('img/img_back_6.jfif');
	background-repeat: repeat;
	color: black;
}
a[href$='section5'] {
	background-image: url('img/img_back_6.jfif');
	background-repeat: repeat;
	color: black;
}
a[href$='section6'] {
	background-image: url('img/img_back_6.jfif');
	background-repeat: repeat;
	color: black;
}
a[href$='section7'] {
	background-image: url('img/img_back_1.jpg');
	background-repeat: repeat;
	color: black;
}
a[href$='section8'] {
	background-image: url('img/img_back_6.jfif');
	background-repeat: repeat;
	color: black;
}
a[href$='section9'] {
	background-image: url('img/img_back_1.jpg');
	background-repeat: repeat;
	color: black;
}
a[href$='section11'] {
	background-image: url('img/img_back_6.jfif');
	background-repeat: repeat;
	color: black;
}
a[href$='section12'] {
	background-image: url('img/img_back_1.jpg');
	background-repeat: repeat;
	color: black;
}
/* 신규 놀이 탭도 기존 체크무늬 순서를 그대로 잇는다.
   위쪽 탭·옆 탭과 같은 배경이 닿지 않게 1 ↔ 6 을 번갈아 배치한다.
   ⚠ 탭을 추가하면 여기에도 반드시 규칙을 넣어야 한다.
   빠뜨리면 그 탭만 배경 없이 허옇게 뜬다(section15 가 그랬다). */
a[href$='section15'] {
	background-image: url('img/img_back_1.jpg');
	background-repeat: repeat;
	color: black;
}
a[href$='section16'] {
	background-image: url('img/img_back_6.jfif');
	background-repeat: repeat;
	color: black;
}
a[href$='section14'] {
	background-image: url('img/img_back_6.jfif');
	background-repeat: repeat;
	color: black;
}

.tabs > ul li a:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: #1e88e5;
	-webkit-transform: translateZ(0) translateY(100%);
	transform: translateZ(0) translateY(100%);
	-webkit-transition: all 0.3s ease 0.3s;
	transition: all 0.3s ease 0.3s;
	z-index: -1;
}

.tabs > ul li a[aria-selected] {
	transition: all 0.2s ease;
	color: #dc281e;
}

.tabs > ul li a[aria-selected]:before {
	-webkit-transform: translateZ(0) translateY(0);
	transform: translateZ(0) translateY(0);
}

/* .tabs > section[aria-hidden='true'] { */
.tabs > section[aria-hidden='true'] {
	display: none;
}
/* 여기는 tab css 마지막 */

/* 탭 10개를 5개씩 2줄로 놓았다. 좁은 화면에서 글자가 겹치는 것을 막는다.
   2026-09-11: 실기기(안드로이드 폰)에서 글자가 너무 작다는 지적을 받았다.
   ⚠ 이 문서의 root font-size 가 10px 이라 0.85rem 은 실제로 8.5px 였다. 본문(iframe) 은
   root 16px 이고 '성별을 선택하세요' 가 28px 이다. 탭 한 칸은 화면 폭의 20%(약 123px)다. 그래서 **한 줄에 몇 글자인지가 글자 크기의 상한**이다.
   네 글자(인공지능·외모점수·커플궁합)가 있으면 26.6px 가 한계였다. 라벨을 세 글자 이하로 줄여
   최대 40px 까지 가능하지만, 칸이 좁아서 40px 는 글자가 칸을 꽉 채워 실제보다 커 보인다.
   본문 제목(h1 '인공지능 외모점수')이 40px 인데 넓은 자리에 있어 작아 보이는 것과 반대다.
   지금은 20px(2rem)다. 이 크기면 네 글자 라벨도 들어간다(4자 x 20px = 80px < 123px).
   ⚠ 라벨을 네 글자로 되돌리면 글자가 접힌다. 라벨과 글자 크기는 같이 봐야 한다.
   탭 한 칸 폭이 화면의 20% 라 **한 줄에 4글자까지만** 들어간다. 라벨을 더 길게 쓰면 넘친다. */
@media (max-width: 700px) {
	.tabs > ul li {
		font-size: 2rem;
		letter-spacing: -0.03em;
	}
	/* ⚠ li 에만 font-size 를 주면 글자가 커지지 않는다. 글자는 li 가 아니라
	   그 안의 <a> 가 들고 있고, a 에는 별도 규칙이 걸려 있어 상속이 끊긴다.
	   2026-09-13 실측: li 20px 인데 a 는 12.5px 로 남아 있었다.
	   그래서 **a 에 직접** 크기를 준다. (inherit 이 아니라 명시값 — 확실하게)

	   ⚠⚠ viewport 가 initial-scale=0.65 라 레이아웃 폭이 600px 로 잡히고
	   화면에는 0.65배로 축소돼 그려진다. **화면에 보이는 크기 = 지정값 x 0.65**.

	   ⚠⚠⚠ 크기 이력 (사용자 판정):
	     20px -> 화면 13.0px  "너무 작다"
	     28px -> 화면 18.2px  "적정"   <- 현재값
	     34px -> 화면 22.1px  "너무 크다" (한 줄 4개까지 갔다가 되돌림)
	   28px 를 기준으로 삼는다. 한 칸은 600 x 20% = 120px,
	   네 글자 x 28px = 112px 로 들어간다. 더 키우려 한 줄 4개로 바꾸지 말 것. */
	.tabs > ul li {
		width: 20%;
	}
	.tabs > ul li a {
		font-size: 2.8rem;
		padding-top: 8px;
		padding-left: 1px;
		padding-right: 1px;
		line-height: 1.16;
	}
}