@charset "utf-8";

html.curtain-ai-lock, body.curtain-ai-lock { overflow:hidden; }

#MAIN__SECTION_AI {padding:20px 0 20px;background-image:url(./img/section_ai_bg.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;}
#curtainAiWrap { font-family:inherit; color:#222;}
#curtainAiWrap * { box-sizing:border-box; }
#curtainAiWrap .curtain-ai-start { max-width:1024px; margin:0 auto; padding:34px 28px;display:flex; align-items:center; justify-content:space-between; gap:22px; /*background:#fff;*/}
#curtainAiWrap .curtain-ai-start-text { flex:1; max-width:420px;min-width:0;word-break:keep-all; }
#curtainAiWrap .curtain-ai-label { display:inline-block; margin:0 0 10px; padding:6px 13px; border-radius:999px; background:#f3eee8; color:#623206 !important; font-size:16px !important; font-weight:700; letter-spacing:0.08em; border:3px solid #D4B89B;}
#curtainAiWrap .curtain-ai-start h2 { margin:15px 0; font-size:35px; line-height:1.28; font-weight:700; color:#161616; letter-spacing:-0.025em; word-break:keep-all; }
#curtainAiWrap .curtain-ai-start p { margin:12px 0 0; color:#666; font-size:18px; line-height:1.65; word-break:keep-all; }
#curtainAiWrap .curtain-ai-open-btn { flex:0 0 auto; width:200px; height:200px; padding:0 24px; border:0; border-radius:999px; background:#9a6a3a; color:#fff; font-size:26px; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(154,106,58,0.26);position:relative; }
#curtainAiWrap .curtain-ai-open-btn .curtain-ai-arrow { position:absolute; left:50%; bottom:38px; display:block; line-height:1; animation:curtainAiArrowMove 1.1s ease-in-out infinite; }
@keyframes curtainAiArrowMove {
	0% { transform:translateX(-50%); }
	50% { transform:translateX(-35%); }
	100% { transform:translateX(-50%); }
}
#curtainAiWrap .curtain-ai-open-btn:hover { background:#7d5229; }
#curtainAiWrap .curtain-ai-layer { display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:99999; }
#curtainAiWrap .curtain-ai-layer.active { display:block; }
#curtainAiWrap .curtain-ai-dim { position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.62); }
#curtainAiWrap .curtain-ai-modal { position:absolute; left:50%; top:50%; width:92%; max-width:900px; height:88vh; transform:translate(-50%, -50%); display:flex; flex-direction:column; overflow:hidden; background:#fff; border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,0.35); }
#curtainAiWrap .curtain-ai-modal-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; border-bottom:1px solid #eee; }
#curtainAiWrap .curtain-ai-modal-head p { margin:0 0 5px; color:#9a6a3a; font-size:12px; font-weight:800; letter-spacing:0.08em; }
#curtainAiWrap .curtain-ai-modal-head h3 { margin:0; color:#222; font-size:23px; line-height:1.35; font-weight:800; letter-spacing:-0.04em; }
#curtainAiWrap .curtain-ai-close-btn { width:42px; height:42px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:#f3f3f3; color:#222; font-size:0; line-height:1; cursor:pointer; appearance:none; -webkit-appearance:none; }
#curtainAiWrap .curtain-ai-close-btn:before { content:"×"; display:block; width:42px; height:42px; color:#222; font-size:30px; font-weight:400; line-height:36px; text-align:center; }
#curtainAiWrap .curtain-ai-close-btn:hover { background:#e7e7e7; }
#curtainAiWrap .curtain-ai-progress { flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:14px 26px; border-bottom:1px solid #f0f0f0; }
#curtainAiWrap .curtain-ai-progress-bar { flex:1; height:8px; overflow:hidden; background:#eee; border-radius:999px; }
#curtainAiWrap .curtain-ai-progress-bar span { display:block; width:0; height:100%; background:#9a6a3a; border-radius:999px; transition:width 0.2s ease; }
#curtainAiWrap .curtain-ai-progress p { margin:0; color:#555; font-size:14px; font-weight:800; }
#curtainAiWrap .curtain-ai-body { flex:1 1 auto; overflow:auto; padding:30px 28px; }
#curtainAiWrap .curtain-ai-step { display:none; }
#curtainAiWrap .curtain-ai-step.active { display:block; }
#curtainAiWrap .curtain-ai-question { margin-bottom:20px; text-align:center; }
#curtainAiWrap .curtain-ai-question span { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:12px; border-radius:50%; background:#222; color:#fff; font-size:14px; font-weight:800; }
#curtainAiWrap .curtain-ai-question h3 { margin:0; color:#222; font-size:24px; line-height:1.42; font-weight:800; letter-spacing:-0.03em; word-break:keep-all; }
#curtainAiWrap .curtain-ai-question p { margin:8px 0 0; color:#9a6a3a; font-size:14px; font-weight:700; }
#curtainAiWrap .curtain-ai-options { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; max-width:720px; margin:0 auto 18px; }
#curtainAiWrap .curtain-ai-options label { display:flex; align-items:center; justify-content:center; min-height:58px; padding:13px 12px; border:1px solid #e7e1da; border-radius:15px; background:#fff; color:#333; font-size:15px; font-weight:600; line-height:1.35; text-align:center; cursor:pointer; transition:all 0.18s ease; word-break:keep-all; }
#curtainAiWrap .curtain-ai-options label:hover { border-color:#c99b63; background:#fffaf5; color:#8a5a28; }
#curtainAiWrap .curtain-ai-options label.selected { border-color:#9a6a3a; background:#9a6a3a; color:#fff; box-shadow:0 8px 18px rgba(154,106,58,0.22); }
#curtainAiWrap .curtain-ai-options input { position:absolute; opacity:0; pointer-events:none; }
#curtainAiWrap .curtain-ai-options span { display:block; }
#curtainAiWrap .curtain-ai-other-box { display:none; max-width:720px; margin:0 auto; }
#curtainAiWrap .curtain-ai-other-box.active { display:block; }
#curtainAiWrap .curtain-ai-other-box input { width:100%; height:50px; padding:0 16px; border:1px solid #ddd; border-radius:13px; background:#fff; color:#222; font-size:15px; outline:none; }
#curtainAiWrap .curtain-ai-other-box input:focus { border-color:#9a6a3a; box-shadow:0 0 0 3px rgba(154,106,58,0.1); }
#curtainAiWrap .curtain-ai-other-box em { display:block; margin-top:7px; color:#888; font-size:13px; font-style:normal; }
#curtainAiWrap .curtain-ai-modal-foot { flex:0 0 auto; display:flex; justify-content:center; gap:10px; padding:18px 24px; border-top:1px solid #eee; background:#fff; }
#curtainAiWrap .curtain-ai-modal-foot button { min-width:130px; height:48px; padding:0 22px; border:0; border-radius:999px; font-size:15px; font-weight:800; cursor:pointer; transition:all 0.18s ease; }
#curtainAiWrap .curtain-ai-prev { background:#f1f1f1; color:#444; }
#curtainAiWrap .curtain-ai-prev:hover { background:#e5e5e5; }
#curtainAiWrap .curtain-ai-next { background:#222; color:#fff; }
#curtainAiWrap .curtain-ai-next:hover { background:#000; transform:translateY(-1px); }
#curtainAiWrap .curtain-ai-submit { display:none; background:#9a6a3a; color:#fff; }
#curtainAiWrap .curtain-ai-submit:hover { background:#7d5229; transform:translateY(-1px); }
#curtainAiWrap .curtain-ai-loading { display:none; padding:70px 20px; text-align:center; }
#curtainAiWrap .curtain-ai-loading p { margin:16px 0 0; color:#333; font-size:18px; font-weight:800; }
#curtainAiWrap .curtain-ai-loading span { display:block; margin-top:7px; color:#777; font-size:14px; }
#curtainAiWrap .curtain-ai-spinner { width:48px; height:48px; margin:0 auto; border:4px solid #eee; border-top-color:#9a6a3a; border-radius:50%; animation:curtainAiSpin 0.85s linear infinite; }
@keyframes curtainAiSpin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
#curtainAiWrap .curtain-ai-result { display:none; max-width:760px; margin:0 auto; }
#curtainAiWrap .curtain-ai-result-head { text-align:center; margin-bottom:20px; }
#curtainAiWrap .curtain-ai-result-head p { display:inline-block; margin:0 0 10px; padding:6px 13px; border-radius:999px; background:#f3eee8; color:#9a6a3a; font-size:12px; font-weight:800; letter-spacing:0.08em; }
#curtainAiWrap .curtain-ai-result-head h3 { margin:0; color:#222; font-size:26px; line-height:1.35; font-weight:800; letter-spacing:-0.04em; }
#curtainAiWrap .curtain-ai-result-main { padding:22px 22px; border-radius:20px; background:#2b241e; text-align:center; }
#curtainAiWrap .curtain-ai-result-main strong { display:block; margin-bottom:9px; color:#f5d4aa; font-size:15px; font-weight:800; }
#curtainAiWrap .curtain-ai-result-main p { margin:0; color:#fff; font-size:18px; line-height:1.6; font-weight:800; word-break:keep-all; }
#curtainAiWrap .curtain-ai-result-recommend { margin-top:13px; padding:20px 20px; border:1px solid #eee5dc; border-radius:18px; background:#fffdfb; }
#curtainAiWrap .curtain-ai-result-recommend strong { display:block; margin-bottom:8px; color:#9a6a3a; font-size:15px; font-weight:800; }
#curtainAiWrap .curtain-ai-result-recommend p { margin:0; color:#444; font-size:15px; line-height:1.7; word-break:keep-all; }

#curtainAiWrap .curtain-ai-result-selected { margin-top:12px; padding:14px 16px; border:1px solid #eee5dc; border-radius:14px; background:#faf7f3; }
#curtainAiWrap .curtain-ai-result-selected strong { display:block; margin-bottom:7px; color:#9a6a3a; font-size:15px; font-weight:800; }
#curtainAiWrap .curtain-ai-result-selected p { margin:0; color:#555; font-size:14px; line-height:1.7; word-break:keep-all; }




#curtainAiWrap .curtain-ai-products { display:none; margin-top:13px; padding:20px 20px; border:1px solid #eee5dc; border-radius:18px; background:#fff; }
#curtainAiWrap .curtain-ai-products > strong { display:block; margin-bottom:12px; color:#9a6a3a; font-size:15px; font-weight:800; }
#curtainAiWrap .curtain-ai-product-list { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
#curtainAiWrap .curtain-ai-product-card { display:block; overflow:hidden; border:1px solid #eee; border-radius:15px; background:#fffdfb; color:#222 !important; text-align:center; text-decoration:none !important; transition:all 0.18s ease; }
#curtainAiWrap .curtain-ai-product-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,0.08); }
#curtainAiWrap .curtain-ai-product-img { display:block; position:relative; width:100%; padding-top:72%; overflow:hidden; background:#f5f5f5; }
#curtainAiWrap .curtain-ai-product-img img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
#curtainAiWrap .curtain-ai-product-card strong { display:block; padding:11px 8px 4px; color:#222; font-size:15px; font-weight:800; }
#curtainAiWrap .curtain-ai-product-card em { display:block; padding:0 8px 12px; color:#9a6a3a; font-size:13px; font-style:normal; font-weight:700; }
#curtainAiWrap .curtain-ai-accordion { margin-top:13px; border:1px solid #eee5dc; border-radius:18px; overflow:hidden; background:#fff; }
#curtainAiWrap .curtain-ai-acc-btn { display:block; width:100%; height:52px; padding:0 18px; border:0; border-top:1px solid #f0e8df; background:#fff; color:#333; font-size:15px; font-weight:800; text-align:left; cursor:pointer; }
#curtainAiWrap .curtain-ai-acc-btn:first-child { border-top:0; }
#curtainAiWrap .curtain-ai-acc-btn:after { content:'+'; float:right; color:#9a6a3a; font-size:20px; font-weight:800; }
#curtainAiWrap .curtain-ai-acc-btn.active { color:#9a6a3a; background:#fffaf5; }
#curtainAiWrap .curtain-ai-acc-btn.active:after { content:'-'; }
#curtainAiWrap .curtain-ai-acc-cont { display:none; padding:0 18px 18px; background:#fffaf5; }
#curtainAiWrap .curtain-ai-acc-cont.active { display:block; }
#curtainAiWrap .curtain-ai-acc-cont p { margin:0; color:#444; font-size:15px; line-height:1.7; word-break:keep-all; }
#curtainAiWrap .curtain-ai-cta { margin-top:18px; padding:22px 18px; border-radius:20px; background:#f8f3ed; text-align:center; }
#curtainAiWrap .curtain-ai-cta p { margin:0 0 14px; color:#333; font-size:16px; line-height:1.55; font-weight:700;word-break:keep-all; }
#curtainAiWrap .curtain-ai-estimate-btn { display:inline-flex; align-items:center; justify-content:center; min-width:210px; height:52px; padding:0 24px; border-radius:999px; background:#9a6a3a; color:#fff !important; font-size:16px; font-weight:800; text-decoration:none !important; box-shadow:0 10px 24px rgba(154,106,58,0.26); }
#curtainAiWrap .curtain-ai-estimate-btn:hover { background:#7d5229; color:#fff !important; }
#curtainAiWrap .curtain-ai-restart-btn { display:inline-flex; align-items:center; justify-content:center; min-width:130px; height:52px; margin-left:8px; padding:0 22px; border:0; border-radius:999px; background:#fff; color:#555; font-size:15px; font-weight:800; cursor:pointer; }
#curtainAiWrap .curtain-ai-restart-btn:hover { background:#eee; }

@media (max-width:1024px) {
	#curtainAiWrap .curtain-ai-start { max-width:none; width:calc(100% - 20px);padding:34px 28px;display:flex; align-items:center; justify-content:space-between; gap:22px; background:#fff; border-radius:24px; box-shadow:0 16px 45px rgba(0,0,0,0.08);}
}

@media (max-width:720px) {
	#curtainAiWrap .curtain-ai-start {  display:block; padding:28px 20px; border-radius:20px; text-align:center; }
	#curtainAiWrap .curtain-ai-start h2 { font-size:25px; }
	#curtainAiWrap .curtain-ai-start p { font-size:14px; }
	#curtainAiWrap .curtain-ai-start-text {max-width:100%;}
	#curtainAiWrap .curtain-ai-open-btn { width:100%; margin-top:18px;  flex:0 0 auto; min-width:190px; height:54px; padding:0 24px; border:0; border-radius:999px; background:#9a6a3a; color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(154,106,58,0.26);}
	#curtainAiWrap .curtain-ai-open-btn .curtain-ai-arrow { display:none; }
	#curtainAiWrap .curtain-ai-modal { left:0; top:0; width:100%; height:100%; transform:none; border-radius:0; }
	#curtainAiWrap .curtain-ai-modal-head { padding:17px 18px; }
	#curtainAiWrap .curtain-ai-modal-head h3 { font-size:19px; }
	#curtainAiWrap .curtain-ai-product-list { grid-template-columns:1fr 1fr; gap:10px; }
	#curtainAiWrap .curtain-ai-close-btn { width:38px; height:38px; font-size:0; line-height:1; }
	#curtainAiWrap .curtain-ai-close-btn:before { width:38px; height:38px; font-size:28px; line-height:34px; }
	#curtainAiWrap .curtain-ai-progress { padding:12px 18px; }
	#curtainAiWrap .curtain-ai-body { padding:24px 16px; }
	#curtainAiWrap .curtain-ai-question h3 { font-size:21px; }
	#curtainAiWrap .curtain-ai-options { grid-template-columns:1fr; gap:9px; }
	#curtainAiWrap .curtain-ai-options label { min-height:52px; font-size:14px; }
	#curtainAiWrap .curtain-ai-modal-foot { padding:14px 14px; }
	#curtainAiWrap .curtain-ai-modal-foot button { flex:1; min-width:0; }
	#curtainAiWrap .curtain-ai-result-head h3 { font-size:23px; }
	#curtainAiWrap .curtain-ai-result-main p { font-size:16px; }
	
	#curtainAiWrap .curtain-ai-result-selected { margin-top:10px; padding:12px 14px; border-radius:12px; }
	#curtainAiWrap .curtain-ai-result-selected strong { font-size:14px; }
	#curtainAiWrap .curtain-ai-result-selected p { font-size:13px; line-height:1.65; }
	
	#curtainAiWrap .curtain-ai-estimate-btn { width:100%; }
	#curtainAiWrap .curtain-ai-restart-btn { width:100%; margin:10px 0 0; }
}