@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
:root{--navy:#243947;--paper:#f7f5ef;--orange:#e86442;--line:#dedfd8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--navy);font-family:'Noto Sans TC',sans-serif;font-size:15px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.topline{background:var(--navy);color:#fff;text-align:center;font-size:11px;letter-spacing:1.4px;padding:9px}.topline span{margin-left:22px;opacity:.6}header{max-width:1400px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px 5%;gap:25px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.mark{font-size:38px;letter-spacing:-4px;position:relative;padding-right:14px}.mark span{font-size:22px;color:var(--orange);position:absolute;right:-1px;top:-5px}.brand strong{font-size:19px;letter-spacing:3px;display:block}.brand small{display:block;font-size:9px;letter-spacing:1.4px;margin-top:3px}nav{display:flex;gap:30px;font-size:13px}nav a:hover{color:var(--orange)}.bag{background:transparent;border:1px solid #a8b1b2;border-radius:5px;padding:11px 14px;font-size:12px}.bag span{background:var(--orange);color:white;border-radius:50%;padding:2px 6px;margin-left:8px}main{min-height:60vh}.hero{max-width:1400px;margin:auto;padding:58px 5% 52px;display:grid;grid-template-columns:1fr 1.08fr;gap:50px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2.5px;color:var(--orange);font-weight:700}.hero h1{font-size:clamp(36px,4.2vw,60px);line-height:1.36;letter-spacing:1px;margin:22px 0}.hero h1 em{font-style:normal;color:var(--orange)}.hero p{line-height:1.95;color:#68757b;font-size:14px}.btn{border:0;background:var(--navy);color:white;padding:15px 23px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;gap:30px;font-weight:500;font-size:14px}.btn:hover{background:#385361}.hero .btn{margin-top:17px}.tiny{display:block;font-size:10px;letter-spacing:1.5px;margin-top:26px;color:#7a8587}.scene{position:relative;background:#e7e9df;aspect-ratio:1.2;overflow:hidden;border-radius:5px}.scene:before{content:'';position:absolute;width:80%;height:130%;background:#d9dfd7;transform:rotate(-30deg);left:62%;top:5%}.scene-label{position:absolute;bottom:22px;left:25px;font-size:10px;letter-spacing:2px}.scene .sun{position:absolute;right:24px;top:20px;font-size:62px;color:var(--orange)}.paper{position:absolute;background:#fffdf7;box-shadow:8px 13px 18px #263a4720}.flyer{width:50%;height:66%;top:12%;left:13%;transform:rotate(-12deg);padding:9% 6%;background:#ece9df}.flyer small{font-size:9px;letter-spacing:2px}.flyer b{display:block;font-size:clamp(27px,3.6vw,48px);line-height:1.05;letter-spacing:-2px;margin:17px 0}.flyer .circle{width:62px;height:62px;border-radius:50%;background:var(--orange);color:white;display:grid;place-items:center;font-size:38px}.bizcard{width:43%;height:29%;top:53%;left:48%;transform:rotate(11deg);background:var(--navy);color:#fff;padding:5%;font-size:20px;font-weight:800}.bizcard small{font-size:7px;letter-spacing:2px;display:block;margin-top:15px;font-weight:400}.stamp{position:absolute;right:18%;top:24%;width:75px;height:95px;background:linear-gradient(90deg,#283b44,#52656c,#21313a);border-radius:15px 15px 8px 8px;transform:rotate(13deg);box-shadow:9px 12px 12px #24394730;border-bottom:15px solid #101e27}.stamp:after{content:'JC';position:absolute;bottom:10px;left:25px;color:white;font-size:13px}.sticker{position:absolute;bottom:12%;left:24%;width:78px;height:78px;border-radius:50%;background:var(--orange);border:5px solid #fff6df;box-shadow:4px 5px 9px #24394720;color:#fff7e6;text-align:center;padding-top:16px;font-size:11px;transform:rotate(-16deg);font-weight:800}.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-evenly;padding:20px 5%;gap:15px;font-size:12px}.ribbon span:before{content:'✧';color:var(--orange);margin-right:10px}.section{max-width:1400px;margin:auto;padding:65px 5%}.sectionhead{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.sectionhead h2{font-size:29px;margin:9px 0 0}.sectionhead p{font-size:12px;color:#7b8587}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}.category{display:block}.art{height:230px;background:#e8e9e1;overflow:hidden;position:relative;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:transform .25s}.category:hover .art{transform:translateY(-4px)}.art svg{height:90%;width:90%;filter:drop-shadow(7px 10px 7px #25394716)}.art-1{background:#e5e9e2}.art-2{background:#eee3d5}.art-3{background:#e0e6ea}.art-4{background:#e9e4d9}.art-5{background:#e5e7dd}.art-6{background:#e9e1dc}.cattext{display:flex;align-items:center;justify-content:space-between;padding:18px 0 5px}.cattext h3{margin:0;font-size:19px}.cattext .arrow{border:1px solid #c4cbca;border-radius:50%;width:31px;height:31px;display:grid;place-items:center}.category p{font-size:12px;color:#7a8485;margin:3px 0}.category small{font-size:9px;color:#7a8485;letter-spacing:1.5px}.how{background:#ebece4}.how .section{padding-top:44px;padding-bottom:44px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}.step{display:flex;gap:18px}.step>b{font-size:32px;color:var(--orange);font-weight:400}.step h3{font-size:15px;margin:7px 0}.step p{font-size:12px;line-height:1.8;color:#748084}.contact{max-width:1260px;margin:50px auto;padding:32px 36px;background:var(--navy);color:white;border-radius:5px;display:flex;justify-content:space-between;align-items:center}.contact h2{font-size:23px;margin:0 0 9px}.contact p{margin:0;color:#c3cbcc;font-size:13px}.contact .btn{background:#f6f4ed;color:var(--navy)}footer{max-width:1400px;margin:auto;border-top:1px solid var(--line);padding:35px 5%;display:flex;justify-content:space-between;gap:30px;font-size:12px;line-height:2;color:#758085}.footerbrand{font-weight:900;font-size:24px;color:var(--navy);letter-spacing:1px}.footerbrand span{font-weight:400;display:block;font-size:11px;letter-spacing:1px}footer small{font-size:10px;text-align:right}.breadcrumb{max-width:1280px;margin:25px auto 0;padding:0 3%;font-size:12px;color:#758085}.orderlayout{max-width:1200px;margin:35px auto 70px;padding:0 3%;display:grid;grid-template-columns:1fr 1.1fr;gap:60px}.productvisual .art{height:400px}.productvisual h1{font-size:34px;margin:25px 0 10px}.productvisual p{color:#748084;line-height:1.8}.note{font-size:12px;background:#edece4;padding:17px 20px;border-left:2px solid var(--orange);line-height:1.9}.orderform{background:#fffdf8;padding:30px;border:1px solid var(--line);border-radius:6px}.orderform h2{font-size:20px;margin:0 0 5px}.formhint{font-size:12px;color:#7a8485;margin-bottom:25px}label{display:block;font-size:13px;font-weight:500;margin:18px 0 7px}input,select,textarea{width:100%;border:1px solid #ced3d0;border-radius:3px;padding:11px;background:white;color:var(--navy);outline-offset:2px}textarea{resize:vertical;min-height:85px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.orderform .btn{width:100%;margin-top:22px}.formfoot{font-size:11px;color:#7a8485;line-height:1.8;margin-top:14px}.backcats{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.backcats a{font-size:12px;border:1px solid #ccd0cb;padding:6px 10px;border-radius:3px}dialog{border:0;border-radius:8px;max-width:600px;width:calc(100% - 28px);padding:26px;color:var(--navy);max-height:90vh}dialog::backdrop{background:#14253070}.dialoghead{display:flex;align-items:center;justify-content:space-between}.dialoghead h2{font-size:21px}.dialoghead button{border:0;background:none;font-size:28px;color:var(--navy)}.bagitem{padding:15px 0;border-bottom:1px solid var(--line)}.bagitem p{font-size:12px;white-space:pre-wrap;color:#758085;line-height:1.8;margin:6px 0}.remove{border:0;background:none;color:#b94c30;padding:0;font-size:12px}.empty{text-align:center;padding:40px 10px;color:#758085}.linebtn{background:#167e47;width:100%;margin-top:12px}.secondary{background:transparent;border:1px solid #cbd0ca;color:var(--navy);width:100%;margin-top:12px}.preview{white-space:pre-wrap;background:#f2f3ed;padding:14px;font-size:12px;line-height:1.8;max-height:220px;overflow:auto}.check{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.7;font-weight:400}.check input{width:auto;margin-top:4px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--navy);color:white;padding:13px 22px;border-radius:4px;font-size:13px;display:none;z-index:5}.status{font-size:12px;color:#167e47;min-height:18px}@media(min-width:1450px){.contact{max-width:1260px}}@media(max-width:800px){header{padding:18px 5%;gap:12px}nav{gap:16px}nav a:nth-child(2){display:none}.hero{gap:24px;padding-top:35px}.hero h1{font-size:36px}.grid{gap:24px 16px}.art{height:180px}.section{padding-top:45px;padding-bottom:45px}.orderlayout{gap:25px}.productvisual .art{height:300px}.contact{margin:35px 5%}.topline span{display:none}}@media(max-width:580px){header{flex-wrap:wrap}.brand strong{font-size:16px}.mark{font-size:32px}.brand small{font-size:8px}nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:15px}.bag{font-size:11px;padding:9px}.hero{grid-template-columns:1fr;gap:30px;padding:30px 5%}.hero h1{font-size:40px;margin:16px 0}.hero p{font-size:13px}.scene{aspect-ratio:1.35}.flyer b{font-size:39px}.tiny{margin-top:18px}.ribbon{font-size:10px;gap:7px;padding:17px 3%}.ribbon span:before{margin-right:5px}.sectionhead h2{font-size:25px}.sectionhead p{display:none}.grid{grid-template-columns:repeat(2,1fr);gap:25px 14px}.art{height:160px}.cattext h3{font-size:17px}.category p{font-size:10px}.category small{font-size:8px}.steps{grid-template-columns:1fr;gap:16px}.contact{align-items:flex-start;gap:22px;flex-direction:column;padding:27px}.contact h2{font-size:20px}footer{flex-wrap:wrap;gap:20px}footer small{text-align:left;width:100%}.orderlayout{grid-template-columns:1fr;gap:25px;margin-top:20px}.productvisual .art{height:270px}.productvisual h1{font-size:28px}.orderform{padding:23px}.breadcrumb{padding:0 5%}.productvisual p{font-size:13px}.contact p{font-size:12px}.pair{gap:10px}}