.container{padding-top:20px;}
.jumbotron .row{padding-bottom:20px;font-size:14px;}
.jumbotron p{font-size:15px;}
.roundborder{
	width:100%;
	border-style: solid;
	border-width: 1px;
	border-radius:15px;
	padding:15px;
	border-color: #c4b5fd;
}
#testresult{ font-size:15px;}
.table th{text-align:center}
.progress{ height:22px; border-radius:8px; background:#ede9fe; margin-bottom:0; }
.progress-bar{ background:linear-gradient(90deg,#7c3aed,#a855f7); border-radius:8px; min-width:2em; transition:width .3s ease; line-height:22px; }

/* 카드 */
.pp-card{ background:#fff; border:1.5px solid #ede9fe; border-radius:14px; padding:24px 20px; box-shadow:0 2px 14px rgba(90,60,160,.08); text-align:center; }
.pp-muted{ font-size:13px; color:#6b7280; }
.pp-main-btn{ display:inline-block; background:linear-gradient(135deg,#5c3d99,#7c5cbf); color:#fff !important; border:none; border-radius:10px; padding:14px 30px; font-size:16px; font-weight:800; min-height:48px; text-decoration:none !important; }
.pp-main-btn:disabled{ opacity:.45; }
.pp-sub-btn{ background:#fff; border:1.5px solid #ede9fe; color:#7c5cbf; border-radius:9px; padding:10px 16px; font-weight:700; min-height:44px; }
.pp-play{ width:96px; height:96px; border-radius:50%; border:none; background:linear-gradient(135deg,#5c3d99,#7c5cbf); color:#fff; font-size:34px; box-shadow:0 4px 16px rgba(92,61,153,.35); transition:transform .1s; }
.pp-play:active{ transform:scale(.95); }
.pp-play:disabled{ background:#d1d5db; box-shadow:none; }
.pp-play-left{ font-size:13px; color:#7c5cbf; font-weight:700; margin-top:10px; min-height:20px; }
.pp-hint{ font-size:13px; color:#7c5cbf; background:#f5f3ff; border-radius:8px; padding:8px 12px; display:inline-block; margin-top:6px; }

/* 피아노 건반 (한 옥타브) */
.pp-keys{ position:relative; width:100%; max-width:420px; height:170px; margin:18px auto 0; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.pp-key{ position:absolute; top:0; border:1.5px solid #c4b5fd; cursor:pointer; padding:0; font-weight:800; line-height:1.25; -webkit-tap-highlight-color:transparent; }
.pp-key.white{ width:calc(100% / 7); height:170px; background:#fff; color:#3d2b6b; border-radius:0 0 10px 10px; font-size:15px; z-index:1; display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px; }
.pp-key.black{ width:calc(100% / 7 * .66); transform:translateX(-50%); height:104px; background:#3d2b6b; color:#fff; border-color:#3d2b6b; border-radius:0 0 8px 8px; font-size:11px; z-index:2; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; }
.pp-key.white:active{ background:#ede9fe; }
.pp-key.black:active{ background:#5c3d99; }
.pp-key:disabled{ cursor:default; }
.pp-key.white:disabled{ color:#c4b5fd; }
.pp-key.black:disabled{ background:#d1d5db; border-color:#d1d5db; color:#f3f4f6; }
.pp-keys.locked .pp-key{ opacity:.55; }

/* 결과 */
.pp-level{ font-size:28px; font-weight:900; color:#3d2b6b; margin:6px 0 4px; }
.pp-score{ font-size:15px; color:#7c5cbf; font-weight:800; }
.pp-bar{ height:14px; border-radius:7px; background:#ede9fe; overflow:hidden; max-width:340px; margin:12px auto 0; }
.pp-bar > div{ height:100%; background:linear-gradient(90deg,#7c3aed,#a855f7); }
.pp-table td, .pp-table th{ text-align:center; vertical-align:middle !important; font-size:14px; }
.pp-ok{ color:#059669; font-weight:900; }
.pp-no{ color:#dc2626; font-weight:900; }
.pp-levels .lv{ background:#f5f3ff; border-radius:10px; padding:12px 14px; margin-bottom:10px; text-align:left; }
.pp-levels .lv strong{ color:#5c3d99; }
.pp-article h2{ font-size:20px; font-weight:800; color:#3d2b6b; margin-top:28px; }
.pp-article h3{ font-size:17px; font-weight:800; color:#5c3d99; margin-top:22px; }
.pp-article p, .pp-article li{ line-height:1.9; font-size:15px; color:#374151; word-break:keep-all; }
.pp-faq dt{ font-size:15px; font-weight:800; color:#3d2b6b; margin-top:14px; }
.pp-faq dd{ font-size:15px; line-height:1.9; color:#374151; margin:4px 0 0; word-break:keep-all; }
.pp-answer{ background:#f5f3ff; border-left:4px solid #7c3aed; border-radius:8px; padding:12px 16px; font-size:15px; line-height:1.8; color:#3d2b6b; word-break:keep-all; }

/* 모바일: 엄지가 닿는 크기(최소 44px)를 우선한다 */
@media (max-width:480px){
	.jumbotron{ padding:22px 14px !important; }
	.pp-card{ padding:20px 8px; }
	.pp-main-btn{ display:block; width:100%; text-align:center; }
	.pp-sub-btn{ width:100%; margin-bottom:8px; }
	.pp-keys{ height:165px; margin-top:16px; }
	.pp-key.white{ height:165px; font-size:15px; }
	.pp-key.black{ width:calc(100% / 7 * .74); height:108px; font-size:11px; }
	.pp-level{ font-size:26px; }
	.pp-table td, .pp-table th{ font-size:13px; padding:8px 4px !important; }
}

/* 결과 페이지 추천 테스트 카드 */
.pp-reco{ display:flex; gap:8px; }
.pp-reco a{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; background:#f5f3ff; border:1px solid #ede9fe; border-radius:10px; padding:12px 6px; min-height:88px; color:#3d2b6b; text-decoration:none; word-break:keep-all; }
.pp-reco a:hover{ background:#ede9fe; text-decoration:none; }
.pp-reco i{ font-size:20px; color:#7c3aed; margin-bottom:6px; }
.pp-reco strong{ font-size:13px; }
.pp-reco span{ font-size:12px; color:#6b7280; margin-top:2px; }