:root{
  --bg:#fff;
  --ink:#24241f;
  --muted:#6f746f;
  --faint:#989d99;
  --line:#e2e5e2;
  --line-strong:#cfd4d0;
  --jp:#214f77;
  --learn:#2f776c;
  --travel:#b27b00;
  --tool:#343b3a;
  --footer:#292a25;
  --max:1120px;
  --sans:Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",Georgia,serif;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:var(--sans);scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:#fff;color:var(--ink);line-height:1.65;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit}
button,input{font:inherit}
button{color:inherit}
:focus-visible{outline:2px solid #6c7b75;outline-offset:4px}
.shell{width:min(var(--max),calc(100% - 72px));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:999}.skip:focus{left:12px;top:12px;background:#fff;border:1px solid var(--ink);padding:8px 12px}

/* Header: confirmed homepage 木 system */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.head-in{min-height:72px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.mark-wrap{position:relative;width:42px;height:42px;display:grid;place-items:start;flex:0 0 42px}
.mark-shadow{position:absolute;z-index:0;left:0;top:0;width:36px;height:36px;display:grid;grid-template-rows:repeat(4,1fr);overflow:hidden;opacity:0;transform:translate(0,0);pointer-events:none;transition:transform .18s ease,opacity .18s ease}
.mark-shadow i{display:block}
.mark-shadow i:nth-child(1){background:rgba(33,79,119,.16)}
.mark-shadow i:nth-child(2){background:rgba(47,119,108,.16)}
.mark-shadow i:nth-child(3){background:rgba(178,123,0,.16)}
.mark-shadow i:nth-child(4){background:rgba(52,59,58,.14)}
.mark{position:relative;z-index:1;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ink);font-family:var(--serif);font-size:19px;line-height:1;font-weight:400;background:#fff;color:var(--ink);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.brand:hover .mark{transform:translate(-2px,-2px);background:#fff;border-color:#111;box-shadow:0 4px 12px rgba(36,36,31,.05)}
.brand:hover .mark-shadow{opacity:1;transform:translate(5px,5px)}
.brand:active .mark{transform:translate(-1px,-1px)}
.brand:active .mark-shadow{opacity:1;transform:translate(4px,4px)}
.brand:focus-visible{outline:2px solid #6c7b75;outline-offset:5px}
.brand:focus-visible .mark{transform:translate(-2px,-2px);background:#fff;border-color:#111}
.brand:focus-visible .mark-shadow{opacity:1;transform:translate(5px,5px)}
.brand-copy strong{display:block;font-family:var(--serif);font-size:16px;line-height:1.25;font-weight:650;letter-spacing:.01em}
.brand-copy small{display:block;margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px;white-space:nowrap}
.nav a,.search-jump{position:relative;border:0;background:transparent;text-decoration:none;font-size:12px;font-weight:750;padding:8px 0;cursor:pointer}
.nav a{--nav-color:#555f5c;color:var(--nav-color);transition:color .18s ease}
.nav .nav-japanese{--nav-color:var(--jp)}
.nav .nav-learning{--nav-color:var(--learn)}
.nav .nav-travel{--nav-color:var(--travel)}
.nav .nav-tools{--nav-color:var(--tool)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .18s ease}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav a:hover,.nav a:focus-visible{filter:brightness(.82)}
.search-jump{color:#59625e;padding-left:16px;border-left:1px solid var(--line)}
.search-jump:hover,.search-jump:focus-visible{color:var(--ink)}

/* V18: muted photo background inside the existing hero */
.mast{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
  background:#f7f8f6;
}
.mast::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("/images/home-hero-sunset.jpg");
  background-size:var(--photo-zoom,100%) auto;
  background-repeat:no-repeat;
  background-position:var(--photo-x,50%) var(--photo-y,54%);
  filter:saturate(.74) contrast(.90) brightness(1.06);
  transform:none;
}
.mast::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,var(--photo-fog,.43)) 0%, rgba(255,255,255,var(--photo-fog,.43)) 100%);
}
.mast-in{min-width:0;max-width:100%;padding:54px 0 46px;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:48px;align-items:end}
.mast-in>*{min-width:0}
.hero-copy h1{max-width:none;margin:0;font-family:var(--serif);font-size:clamp(39px,5vw,58px);font-weight:600;line-height:1.14;letter-spacing:-.012em;text-wrap:balance;color:#181a18;text-shadow:0 1px 0 rgba(255,255,255,.28)}
.hero-title span{
  display:block;
  white-space:nowrap;
}

.hero-copy p{max-width:30em;margin:17px 0 0;color:#3a4440;font-size:15px;line-height:1.8;text-shadow:0 1px 0 rgba(255,255,255,.2)}
.search-box{position:relative;min-width:0}
.search-label{display:block;margin-bottom:8px;color:#56605b;font-size:10px;font-weight:800;letter-spacing:.1em;text-shadow:0 1px 0 rgba(255,255,255,.18)}
.search-row{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:2px solid #24241f}
.search-row input{min-width:0;border:0;outline:0;background:transparent;padding:11px 0 13px;color:#20211e;font-size:17px}
.search-row input::placeholder{color:#69736e}
.search-row button{border:0;background:transparent;padding:10px 0 10px 18px;color:#22231f;font-size:12px;font-weight:800;cursor:pointer}
.search-results{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;border:1px solid var(--line-strong);box-shadow:0 18px 55px rgba(26,34,31,.1);z-index:80;max-height:340px;overflow:auto}
.search-results.open{display:block}
.search-results a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;font-size:13px}
.search-results a:last-child{border-bottom:0}
.search-results small{color:var(--faint)}
.search-results b{font-weight:650}
.search-results a:hover{background:#f7f8f7}
.search-empty{padding:14px;color:var(--muted);font-size:13px}


/* V33 Final QA: desktop/tablet/mobile responsive pass, semantic line breaks and overflow/tap-target checks */
/* V10 Editorial Polish: quieter hierarchy, simplified motion, better mobile targets */
/* Editorial index: open rows instead of equal cards */
.browse{padding:44px 0 18px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:15px;border-bottom:1px solid var(--ink)}
.section-head h2{margin:0;font-family:var(--serif);font-size:26px;line-height:1.2;font-weight:650;letter-spacing:-.01em}
.editorial-index{border-bottom:1px solid var(--line)}
.index-row{
  --accent:var(--ink);
  position:relative;
  display:grid;
  grid-template-columns:minmax(190px,230px) minmax(220px,1fr) minmax(250px,340px) 28px;
  gap:16px;
  align-items:center;
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.index-row:last-child{border-bottom:0}
.index-row::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px;
  background:var(--accent);
  transition:width .28s cubic-bezier(.2,.7,.2,1);
}
.index-row:hover::after,.index-row:focus-within::after{width:100%}
.index-row--jp{--accent:var(--jp);padding-top:29px;padding-bottom:29px}
.index-row--learning{--accent:var(--learn);padding-top:27px;padding-bottom:27px}
.index-row--travel{--accent:var(--travel);padding-top:27px;padding-bottom:27px}
.index-row--tool{--accent:var(--tool);padding-top:23px;padding-bottom:23px}
.index-title{
  margin:0;
  font-family:var(--serif);
  font-size:34px;
  line-height:1.1;
  font-weight:650;
  letter-spacing:-.015em;
  padding-left:8px;
}
.index-row--jp .index-title{font-size:34px}
.index-title a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  text-decoration:none;
  transition:color .18s ease,transform .22s ease;
}
.index-row:hover .index-title a,.index-row:focus-within .index-title a{
  color:var(--accent);
  transform:translateX(3px);
}
.index-copy{margin:0;color:var(--muted);font-size:13px;line-height:1.8;max-width:34em;text-wrap:pretty}
.index-row--jp .index-copy{font-size:13px}
.index-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:7px 16px;
  font-size:11px;
  line-height:1.6;
}
.index-links a{
  position:relative;
  color:#535e59;
  text-decoration:none;
  white-space:nowrap;
}
.index-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
.index-links a:hover,.index-links a:focus-visible{color:var(--accent)}
.index-links a:hover::after,.index-links a:focus-visible::after{transform:scaleX(1)}
.index-arrow{
  color:var(--faint);
  font-size:19px;
  text-align:right;
  transition:color .2s ease;
}
.index-row:hover .index-arrow,.index-row:focus-within .index-arrow{
  color:var(--accent);
}

/* Latest: data list, not cards */
.latest{padding:46px 0 76px}
.latest-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:13px;border-bottom:1px solid var(--ink)}
.latest-head h2{margin:0;font-family:var(--serif);font-size:26px;line-height:1.2;font-weight:650;letter-spacing:-.01em}
.latest-head a{color:var(--muted);font-size:11px;text-decoration:none}
.latest-head a:hover{text-decoration:underline;text-underline-offset:4px}
.latest-list{margin:0;padding:0;list-style:none}
.latest-list li{border-bottom:1px solid var(--line)}
.latest-list a{display:grid;grid-template-columns:116px 80px minmax(0,1fr) 22px;gap:18px;align-items:center;padding:18px 0;text-decoration:none}
.latest-list time,.latest-list .type{color:var(--faint);font-size:10px}
.latest-list .type{font-weight:800}
.latest-list .type--jp{color:var(--jp)}
.latest-list .type--learning{color:var(--learn)}
.latest-list .type--travel{color:var(--travel)}
.latest-list .type--tool{color:var(--tool)}
.latest-list strong{font-size:14px;font-weight:650;text-wrap:pretty}
.latest-list .arrow{text-align:right;color:var(--faint);transition:transform .16s ease,color .16s ease}
.latest-list a:hover strong{text-decoration:underline;text-underline-offset:4px}
.latest-list a:hover .arrow{transform:translateX(3px);color:var(--ink)}

/* Restore the original dark closing plate */
.footer{background:var(--footer);color:#eee;padding:42px 0 38px}
.footer-links{display:flex;flex-wrap:wrap;gap:20px;color:#bbb;font-size:12px}
.footer-note{margin:15px 0 0;color:#aaa;font-size:11px}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}


/* V33 Final Responsive QA */
.hero-title{
  max-width:none;
}
.hero-title span{
  display:block;
  white-space:nowrap;
}

/* 1024-ish desktop / compact laptop */
@media(max-width:1100px) and (min-width:921px){
  .shell{width:min(var(--max),calc(100% - 56px))}
  .head-in{gap:20px}
  .nav{gap:22px}
  .mast-in{
    padding:50px 0 43px;
    grid-template-columns:minmax(0,1fr) minmax(330px,410px);
    gap:44px;
  }
  .hero-copy h1{font-size:52px;line-height:1.11}
  .index-row{
    grid-template-columns:minmax(175px,210px) minmax(220px,1fr) minmax(235px,310px) 26px;
    gap:16px;
  }
  .index-links{gap:7px 14px}
}

/* Tablet: retain a balanced two-column Hero instead of creating a tall empty block */
@media(max-width:920px) and (min-width:721px){
  .shell{width:calc(100% - 48px)}
  .head-in{min-height:68px;gap:18px}
  .brand-copy strong{font-size:15px}
  .brand-copy small{font-size:9px}
  .nav{gap:18px}
  .nav a,.search-jump{font-size:11px;min-height:40px;display:inline-flex;align-items:center}
  .search-jump{padding-left:14px}

  .mast::before{
    background-position:52% 60%;
  }
  .mast-in{
    grid-template-columns:minmax(0,1fr) minmax(280px,320px);
    gap:28px;
    padding:42px 0 38px;
    align-items:end;
  }
  .hero-copy h1{
    max-width:none;
    font-size:clamp(40px,5.7vw,46px);
    line-height:1.12;
    letter-spacing:-.008em;
  }
  .hero-copy p{font-size:14px;margin-top:13px;line-height:1.75}
  .search-row input{font-size:15px}
  .search-row button{padding-left:14px}

  .browse{padding-top:40px}
  .index-row{
    grid-template-columns:minmax(150px,185px) minmax(0,1fr) 26px;
    gap:16px 20px;
    padding:25px 0;
  }
  .index-row--jp,
  .index-row--learning,
  .index-row--travel,
  .index-row--tool{padding-top:25px;padding-bottom:25px}
  .index-title,.index-row--jp .index-title{font-size:31px}
  .index-copy,.index-row--jp .index-copy{font-size:12.5px;line-height:1.75}
  .index-links{grid-column:2;gap:4px 14px;font-size:10.5px}
  .index-links a{min-height:34px;display:inline-flex;align-items:center}
  .index-arrow{grid-column:3;grid-row:1/3;align-self:center}

  .latest-list a{
    grid-template-columns:92px 62px minmax(0,1fr) 20px;
    gap:10px;
    padding:17px 0;
  }
}

/* Small phones: 360–390 */

@media(max-width:720px){
  .mast::before{background-position:58% 66%}
  .mast-in{grid-template-columns:1fr;gap:22px;padding:32px 0 29px}
  .index-row{grid-template-columns:1fr 22px;gap:8px 12px}
  .index-links{grid-column:1}
  .index-arrow{grid-column:2;grid-row:1/4;align-self:center}
  .latest-list a{grid-template-columns:1fr 18px;gap:5px 8px}
}
@media(min-width:721px){
  .index-title{padding-left:8px}
}
@media(max-width:720px){
  .hero-title{font-size:clamp(31px,9.1vw,35px)!important;line-height:1.12!important;letter-spacing:-.006em!important}
  .hero-title span{white-space:nowrap}

  .shell{width:calc(100% - 28px)}
  .head-in{min-height:auto;align-items:flex-start;flex-wrap:wrap;gap:0;padding:12px 0 8px}
  .brand{width:100%;padding-bottom:7px}.mark-wrap{width:40px;height:40px;flex-basis:40px}.mark-shadow{width:34px;height:34px}.mark{width:34px;height:34px;font-size:18px}
  .brand-copy strong{font-size:15px}.brand-copy small{font-size:9px}
  .nav{width:100%;margin-left:0;gap:12px;justify-content:space-between;overflow:visible;border-top:1px solid var(--line);padding-top:4px}
  .nav a,.search-jump{font-size:11px;flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px}.search-jump{margin-left:0}
  .mast::before{background-position:56% 64%;background-size:cover;filter:saturate(.66) contrast(.87) brightness(1.07)}
  .mast::after{
    background:rgba(255,255,255,var(--photo-fog,.43));
  }
  .mast-in{padding:32px 0 29px;gap:22px}.hero-copy h1{max-width:none}.hero-copy p{font-size:14px;margin-top:11px;line-height:1.72;text-wrap:pretty}
  .search-row input{font-size:15px;padding:9px 0 10px}.search-label{font-size:9px}
  .browse{padding-top:36px}.section-head h2,.latest-head h2{font-size:23px}
  .index-row,.index-row--jp{grid-template-columns:1fr 22px;gap:8px 12px;padding:22px 0}
  .index-title,.index-row--jp .index-title{grid-column:1;font-size:28px;letter-spacing:-.01em;padding-left:0}
  .index-copy,.index-row--jp .index-copy{grid-column:1;font-size:12px;line-height:1.75}
  .index-links{grid-column:1;gap:0 14px;margin-top:2px;font-size:11px}.index-links a{display:inline-flex;align-items:center;min-height:40px;padding:8px 0}
  .index-arrow{grid-column:2;grid-row:1/4;align-self:center;font-size:17px}
  .latest{padding:38px 0 52px}
  .latest-list a{grid-template-columns:1fr 18px;gap:5px 8px;padding:14px 0}.latest-list time{grid-column:1}.latest-list .type{grid-column:1;grid-row:2}.latest-list strong{grid-column:1;grid-row:3;font-size:13px}.latest-list .arrow{grid-column:2;grid-row:1/4;align-self:center}
  .footer{padding-top:34px}.footer-links{gap:8px 16px}.footer-links a{display:inline-flex;align-items:center;min-height:40px}
}

@media(max-width:390px){
  .shell{width:calc(100% - 24px)}
  .head-in{padding:10px 0 8px}
  .brand-copy strong{font-size:14.5px}
  .brand-copy small{font-size:8.5px}
  .nav{gap:0;justify-content:space-between}
  .nav a,.search-jump{font-size:10.5px}
  .search-jump{padding-left:10px}
  .hero-title{font-size:clamp(30px,9vw,34px)!important}
  .hero-copy p{font-size:13.5px}
  .section-head h2,.latest-head h2{font-size:22px}
  .index-title,.index-row--jp .index-title{font-size:27px}
  .index-copy,.index-row--jp .index-copy{font-size:12px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.brand:hover .mark,.brand:active .mark,.brand:focus-visible .mark{transform:none!important}.brand:hover .mark-shadow,.brand:active .mark-shadow,.brand:focus-visible .mark-shadow{transform:translate(4px,4px)!important}}


:root{
  --photo-x:50%;
  --photo-y:54%;
  --photo-zoom:100%;
  --photo-fog:.43;
}

/* V34 — homepage header keeps only the four primary sections */
@media(max-width:720px){
  .nav{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    width:100%;
  }
  .nav a{
    justify-content:center;
    text-align:center;
  }
}