:root{--sky:#bfe6ff;--sky2:#e8f6ff;--pink:#ffc6dc;--pink2:#ff8fb8;--cream:#fff8e7;--ink:#5a4a6b;--mint:#c9f2d8;--gold:#ffe08a;--r:22px}
*{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans CJK TC","Noto Serif CJK TC","PingFang TC",sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--sky) 0,var(--sky2) 360px,var(--cream) 900px);min-height:100vh}
a{color:#d4588a;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.nav{background:#fff;border-bottom:4px dashed var(--pink);position:sticky;top:0;z-index:5}
.nav .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:24px;color:var(--pink2);margin-right:auto}
.nav a.m{padding:8px 16px;border-radius:999px;background:var(--sky2);color:var(--ink);font-weight:700;border:2px solid var(--sky)}
.nav a.m.on{background:var(--pink);border-color:var(--pink2)}
.sample{display:inline-block;background:var(--gold);color:#8a5a00;font-size:12px;font-weight:700;padding:2px 8px;border-radius:8px;margin-left:6px;vertical-align:middle}
.card{background:#fff;border-radius:var(--r);border:3px solid #fff;box-shadow:0 6px 0 #e3d6f0,0 10px 24px rgba(90,74,107,.12);padding:20px;margin:18px 0}
.card h2{margin:0 0 12px;font-size:20px;display:flex;align-items:center;gap:8px}
.card h2:before{content:"";width:14px;height:14px;background:var(--pink2);border-radius:50% 50% 45% 45%;box-shadow:inset -3px -3px 0 rgba(0,0,0,.12)}
.hero{text-align:center;padding:40px 16px 20px}
.hero h1{font-size:44px;margin:10px 0;color:#fff;text-shadow:3px 3px 0 var(--pink2),-2px -2px 0 var(--pink2),2px -2px 0 var(--pink2),-2px 2px 0 var(--pink2)}
.hero p{font-size:18px}
.btn{display:inline-block;padding:14px 30px;border-radius:999px;font-weight:900;font-size:18px;border:3px solid #fff;box-shadow:0 5px 0 rgba(0,0,0,.15);margin:6px;color:#fff;background:var(--pink2);cursor:pointer;font-family:inherit}
.btn.blue{background:#5bb8f0}.btn.gray{background:#c9bfd4}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.feat{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.feat div{background:var(--cream);border-radius:16px;padding:14px;border:2px dashed var(--pink)}
.feat b{display:block;font-size:18px;color:var(--pink2)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}
.ok{background:#4fcf7c}.ng{background:#ff6b7a}
table{width:100%;border-collapse:collapse}th,td{padding:9px 8px;text-align:left;border-bottom:2px dotted #eadff2}
th{background:var(--sky2);font-size:14px}
.rank1{color:#e0a100;font-weight:900}
.tag{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;white-space:nowrap}
.t-open{background:var(--mint);color:#227a45}.t-test{background:var(--gold);color:#8a5a00}.t-plan{background:#e6dcf5;color:#6b4fa0}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.tabs span{padding:6px 14px;border-radius:999px;background:var(--sky2);font-weight:700}.tabs span.on{background:var(--pink);}
label{display:block;font-weight:700;margin:12px 0 4px}
input,select,textarea{width:100%;padding:12px;border-radius:14px;border:2px solid var(--sky);font-size:16px;font-family:inherit;background:#fcfeff}
.hint{font-size:13px;color:#8d7fa0}
.captcha{display:flex;gap:10px;align-items:center}.captcha .img{flex:0 0 130px;height:46px;border-radius:10px;background:repeating-linear-gradient(45deg,#ffe3ee 0 6px,#e8f6ff 6px 12px);font:900 24px monospace;letter-spacing:6px;display:flex;align-items:center;justify-content:center;color:#7a4f9a;transform:skew(-6deg)}
.board{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:2px dotted #eadff2}
.board .ic{width:48px;height:48px;flex:0 0 48px}
.board .meta{margin-left:auto;text-align:right;font-size:13px;color:#8d7fa0;white-space:nowrap}
.post{display:flex;gap:14px;padding:14px 0;border-bottom:2px dotted #eadff2}
.post .who{flex:0 0 110px;text-align:center;font-size:13px}
.pin{background:var(--pink);color:#a0285a}
.gm{background:#5bb8f0;color:#fff}
footer{text-align:center;padding:30px 16px;font-size:14px;color:#8d7fa0}
.soon{text-align:center;padding:50px 20px}.soon h1{font-size:40px;color:var(--pink2)}
.pixel{height:10px;background:linear-gradient(90deg,var(--pink) 25%,#fff 0 50%,var(--sky) 0 75%,#fff 0) 0 0/40px 10px;border-radius:4px}
@media(max-width:600px){.hero h1{font-size:32px}.nav a.m{padding:6px 10px;font-size:14px}.logo{font-size:20px;width:100%}.post{flex-direction:column}.post .who{flex:none;text-align:left}.board .meta{display:none}.hide-m{display:none}}
.err{background:#ffe3e8;border:2px solid #ff9aae;border-radius:14px;padding:10px 14px;color:#a0284a}
.okmsg{background:#e3fbe9;border:2px solid #8fdca8;border-radius:14px;padding:10px 14px;color:#227a45}
.tabs a{padding:6px 14px;border-radius:999px;background:var(--sky2);font-weight:700;color:var(--ink)}.tabs a.on{background:var(--pink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chk{width:auto}.inline{display:inline}.lbl-n{font-weight:400}
.captcha img{border-radius:10px;border:2px solid var(--sky);height:50px}
.navbtn{padding:8px 16px;border-radius:999px;background:var(--sky2);color:var(--ink);font-weight:700;border:2px solid var(--sky);font:inherit;cursor:pointer}
.post .body{word-break:break-word;white-space:normal}.right{text-align:right}.mt0{margin-top:0}
.pager a,.pager span{margin:0 4px}
.jobs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin:12px 0}.jobs div{background:var(--sky2);border:2px dashed var(--sky);border-radius:16px;padding:12px}.jobs small{color:#8a7a9b}.jobs b{display:block;font-size:18px;color:var(--pink2)}.jobs i{display:block;font-size:13px;color:#8a7a9b}.jobs p{margin:6px 0 0;font-size:14px}.feat .tag{font-size:12px;vertical-align:middle}
.sex-tip{margin-top:14px;background:var(--cream);border:2px dashed var(--pink);border-radius:16px;padding:12px 14px}.sex-tip b:first-child{color:var(--pink2)}#sex-guide ul,.sex-tip ul{margin:8px 0 0;padding-left:20px;line-height:1.7}



/* v2: 漢堡選單 + 註冊/登入彈窗（純 CSS） */
.menu{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.navt,.tabr{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.burger{display:none;margin:0;padding:8px 14px;border-radius:999px;background:var(--pink);font-weight:900;cursor:pointer;border:2px solid var(--pink2)}
.modal{display:none;position:fixed;inset:0;z-index:50;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 12px}
.modal:target,.modal.open{display:flex}
.modal-bg{position:fixed;inset:0;background:rgba(90,74,107,.45)}
.modal-box{position:relative;background:#fff;border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.25);padding:22px 20px;width:100%;max-width:440px;margin:auto}
.modal-box h2{margin:0 0 8px;color:var(--pink2)}
.modal-x{position:absolute;right:14px;top:10px;font-size:22px;color:var(--ink)}
.pane{display:none}
#at-l:checked~.pane-l,#at-r:checked~.pane-r{display:block}
.switch{text-align:center;margin:14px 0 0;border-top:2px dotted #eadff2;padding-top:12px}
.swl{display:inline;cursor:pointer;color:#d4588a;font-weight:900;margin:0}
.btn.wide{width:100%;margin:6px 0}
.modal .captcha img{flex:0 0 auto;width:120px;height:40px}
@media(max-width:600px){.nav .wrap{flex-wrap:wrap}.logo{width:auto}.burger{display:inline-block}.menu{display:none;width:100%;flex-direction:column;align-items:stretch;gap:8px;padding-bottom:6px}.navt:checked~.menu{display:flex}.menu a.m{text-align:center;padding:10px;font-size:16px}.hero .btn{display:block;margin:10px auto;max-width:280px}}


.or{text-align:center;color:#8d7fa0;margin:4px 0}.btn.gbtn{display:block;text-align:center;background:#fff;color:var(--ink);border:2px solid var(--sky)}