:root{
  --paper:#ffffff;
  --ink:#161616;
  --ink2:#3a3a3a;
  --line:#b8b8b4;
  --line2:#d4d4d0;
  --cell:#e9e9e6;
  --cell2:#e2e2de;
  --link:#1a1a1a;
  --hot:#0a0a0a;
  --tag:#5a5a56;
  --hatch-a:#f4f4f2;
  --hatch-b:#fafafa;
  --fill:#f0f0ee;
}
body.dark{
  --paper:#000000;
  --ink:#e9e9e9;
  --ink2:#c5c5c5;
  --line:#47474b;
  --line2:#2b2b2f;
  --cell:#161619;
  --cell2:#1d1d21;
  --link:#e5e5e5;
  --hot:#f5f5f5;
  --tag:#a5a5a9;
  --hatch-a:#0b0b0d;
  --hatch-b:#050505;
  --fill:#0f0f11;
}
html:has(body.dark){background:#000000;}

*{box-sizing:border-box}
button,input,select,textarea{font:inherit;font-kerning:inherit;font-feature-settings:inherit;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);}
body{min-height:100vh;}
body{
  font-family:"PMingLiU","新細明體","MingLiU","細明體",Georgia,"Times New Roman",serif;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:none;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-optical-sizing:auto;
  -webkit-font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;}
a:hover{background:var(--ink);color:var(--paper);text-decoration:none;}
a:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
.wrap{width:92%;max-width:1180px;margin:0 auto;padding:40px 14px 80px;}

header{border-bottom:1px solid var(--line);padding:18px 0 10px;margin-bottom:0;}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.mark{font-size:30px;letter-spacing:-1px;line-height:1;}
.mark b{font-weight:normal}
.sub{font-size:12px;color:var(--tag);margin-top:6px;}
.util{font-size:12.5px;text-align:right;color:var(--ink2);}
.util a{text-decoration:none;border-bottom:1px solid var(--line);}
.util a:hover{border-bottom-color:var(--ink);}
.cart-n{font-variant-numeric:tabular-nums;}

.bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;
  font-size:11.5px;color:var(--tag);
  border-bottom:1px solid var(--line);
  padding:5px 0;letter-spacing:.2px;
}
.bar .l span{color:var(--ink);}
.bar .r a{color:var(--tag);}
.bar .r a:hover{background:var(--ink);color:var(--paper);}

.sec{margin-top:22px;border:1px solid var(--line);}
.sec-h{
  background:var(--cell2);
  border-bottom:1px solid var(--line);
  padding:4px 9px;font-size:12px;
  display:flex;justify-content:space-between;
  letter-spacing:.4px;
}
.sec-h .r{color:var(--tag);}

table{border-collapse:collapse;width:100%;}
th,td{text-align:left;vertical-align:top;}
thead th{
  background:var(--cell);font-size:11px;font-weight:normal;color:var(--tag);
  padding:6px 9px;border-bottom:1px solid var(--line);letter-spacing:.3px;
  vertical-align:middle;line-height:1.2;
}
thead th.c-name,thead th.c-spec,thead th.c-stat,thead th.c-price{font-size:11px;}
tbody tr{border-bottom:1px solid var(--line2);}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--cell);}
td{padding:7px 9px;font-size:14px;}
.c-name{width:auto;}
.c-name a{font-size:15px;}
.c-spec{color:var(--ink2);width:170px;font-size:12.5px;font-variant-numeric:tabular-nums;}
.c-stat{width:96px;font-size:12px;}
.c-price{width:90px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.meta{display:block;font-size:11px;color:var(--tag);margin-top:1px;}
.soldout{color:var(--tag);text-decoration:line-through;}
a.soldout:hover{text-decoration:line-through;color:var(--paper);}

.arch-row td{color:var(--tag);background-image:linear-gradient(var(--tag),var(--tag));background-size:100% 1px;background-position:0 50%;background-repeat:no-repeat;vertical-align:middle;font-size:13px;}
.arch-row td a{color:var(--tag);font-size:13px;}
.arch-row td a{color:var(--tag);}
.dot{display:inline-block;width:6px;height:6px;border:1px solid var(--ink);margin-right:5px;vertical-align:1px;}
.dot.open{background:var(--ink);}
.dot.gone{background:transparent;border-style:dotted;}

.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;background:var(--fill);border:1px solid var(--line);margin-top:22px;overflow:hidden;}
.file{background:var(--paper);padding:8px;border:1px solid var(--line);margin:-1px;cursor:pointer;}
.file:hover{background:var(--cell);}
.file .ph{
  aspect-ratio:3/4;background:
    repeating-linear-gradient(45deg,var(--hatch-a) 0 7px,var(--hatch-b) 7px 14px);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--tag);font-size:10px;
}
.file cap,.file .cap{display:table;font-size:10px;color:var(--tag);margin-top:5px;line-height:1.3;word-break:break-all;}
.file:hover .cap{background:var(--ink);color:var(--paper);-webkit-box-decoration-break:clone;box-decoration-break:clone;}

.notice{
  margin-top:22px;border:1px solid var(--line);background:var(--cell);
  padding:9px 11px;font-size:13px;color:var(--ink2);
}
.notice b{color:var(--ink);font-weight:normal;}

footer{margin-top:34px;border-top:1px solid var(--line);padding-top:10px;font-size:11.5px;color:var(--tag);}
footer a{color:var(--tag);text-decoration:none;}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

.toggle-wrap{display:flex;justify-content:center;margin-top:28px;}
#theme-toggle{background:var(--paper);color:var(--tag);border:1px solid var(--line);padding:5px 18px;font-size:12px;letter-spacing:.4px;cursor:pointer;}
#theme-toggle:hover{background:var(--ink);color:var(--paper);}

.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;align-items:flex-start;justify-content:center;padding:60px 14px;}
.modal-bg.on{display:flex;}
.modal{background:var(--paper);border:1px solid var(--line);width:100%;max-width:420px;}
.modal-h{background:var(--ink);color:var(--paper);padding:5px 10px;font-size:12px;display:flex;justify-content:space-between;}
.modal-h a{color:var(--paper);}
.modal-h a:hover{background:var(--paper);color:var(--ink);}
.modal-b{padding:14px;}
.modal-b label{display:block;font-size:12px;color:var(--tag);margin-bottom:11px;}
.modal-b input,.modal-b textarea{width:100%;margin-top:3px;padding:5px 7px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:13px;}
.modal-b textarea{resize:vertical;}
.blink{font-size:11px;}

.panel{display:none;border:1px solid var(--line);margin-top:22px;background:var(--cell);}
.panel.on{display:block;}
.panel-h{background:var(--ink);color:var(--paper);padding:5px 10px;font-size:12px;display:flex;justify-content:space-between;}
.panel-h a{color:var(--paper);}
.panel-h a:hover{background:var(--paper);color:var(--ink);}
.panel-b{display:grid;grid-template-columns:auto 1fr;gap:0;align-items:start;}
.panel-img{height:267px;background:repeating-linear-gradient(45deg,var(--hatch-a) 0 8px,var(--hatch-b) 8px 16px);border-right:1px solid var(--line);display:flex;align-items:center;justify-content:flex-start;color:var(--tag);font-size:11px;overflow:hidden;position:relative;}
.panel-img img{height:100%;width:auto;object-fit:cover;display:block;cursor:pointer;transition:none;transform:none;}
.panel-img img:hover{transform:none;scale:none;}
.panel-img:hover img{transform:none;scale:none;}

.panel-img:not(.natural){width:200px;}
.panel-img:not(.natural) img{width:100%;height:100%;object-fit:cover;}
.panel-img.natural{background:none;width:auto;}
.panel-img.natural img{width:auto !important;height:100%;object-fit:contain !important;}

.thumbs{display:flex;gap:5px;padding:8px;flex-wrap:wrap;border-top:1px solid var(--line);}
.thumbs .t{width:44px;aspect-ratio:3/4;border:1px solid var(--line);object-fit:cover;cursor:pointer;background:repeating-linear-gradient(45deg,var(--hatch-a) 0 4px,var(--hatch-b) 4px 8px);}
.thumbs .t.sel{outline:2px solid var(--ink);outline-offset:-1px;}

.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:100;align-items:center;justify-content:center;cursor:zoom-out;padding:30px;}
.lightbox.on{display:flex;}
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;}
.lightbox .lb-close{position:fixed;top:14px;right:18px;color:#fff;font-size:14px;text-decoration:none;z-index:101;}
.lightbox .lb-close:hover{background:#fff;color:#000;}
.lightbox .lb-arrow{position:fixed;top:50%;transform:translateY(-50%);color:#fff;font-size:30px;text-decoration:none;padding:8px 14px;user-select:none;z-index:101;}
.lightbox .lb-arrow:hover{background:#fff;color:#000;}
.lightbox .lb-prev{left:10px;}
.lightbox .lb-next{right:10px;}
.panel-info{padding:11px 13px;font-size:13px;}
.panel-info dl{display:grid;grid-template-columns:84px 1fr;gap:2px 8px;margin:0 0 11px;}
.panel-info dt{color:var(--tag);font-size:12px;}
.panel-info dd{margin:0;font-variant-numeric:tabular-nums;}
.buy{display:inline-block;border:1px solid var(--ink);background:var(--paper);padding:5px 16px;text-decoration:none;font-size:13px;cursor:pointer;}
.buy:hover{background:var(--ink);color:var(--paper);}

@media(max-width:640px){.panel-b{grid-template-columns:1fr;}.panel-img{border-right:none;border-bottom:1px solid var(--line);}}
@media(max-width:560px){.c-spec{display:none;}.c-stat{width:78px;}}

@media(max-width:480px){
  body{font-size:13px;}
  td{font-size:12px;}
  .c-name a{font-size:13px;}
  .c-price{font-size:12px;}
  .sec-h{font-size:11px;}
  .file .cap{font-size:9px;}
  .bar{font-size:10.5px;}
}